クリッカブルマップをCSSでロールオーバーする方法

質問

webプログラマです。
いろいろやってみましたが、どうしても方法が分かりません。
ネットでもずいぶん調べましたが、見つけられませんでした。

クリッカブルマップで指定したareaの部分だけを
CSSを使って別の画像をロールオーバーしたいのです。
JavaScriptを使う方法や、
CSSでも他の方法は分かっていますが、
ページがかなり複雑な構成で、
divタグだらけになっていますので、
出来ればa:hoverのようなシンプルな方法を探しています。
ちなみに、この画像を背景にすることは、
制作意図的にできませんので、
画像挿入の上、マップというのが前提になります。

どなたか方法をご存知の方、ご享受ください。
よろしくお願いします。

回答No.1

yyr446

やっぱり、javascript使っちゃいますが、だめですか。
　指定したareaのonmouseoverとonmouseoutで、javascript関数
を呼びます。ロールオーバーする画像はこっそり、display:none;
position:absolute;で準備しといて、javascript関数でスタイル
属性を変えてます。

サンプル↓

<img src="/image/yahagi.png" usemap="#mymap" width="600" height="200" alt="ClickableMap">
<map name="mymap">
<area shape="rect" alt="Index" coords="50,50,100,100" href="#"
　onclick="return false;" onmouseover="rollover();" onmouseout="rollout();">
</map>
<img src="/image/s_yui.jpg" id="rollimg" style="display:none;position:absolute;top:0px;left:0px;">

<script type="text/javascript">
function rollover(){
　var roll_image = document.querySelector('#rollimg');　//ロールオ-バ-させるIMAGE
　var map_image = document.querySelector('img[usemap="#mymap"]'); //クリッカブルMAPのIMAGE

　var rect = map_image.getBoundingClientRect();

　var left = rect.left + (window.pageXOffset||document.documentElement.scrollLeft)
　　　 + 50; //エリアの左上のX座標
　var top = rect.top + (window.pageYOffset||document.documentElement.scrollTop)
　　　 + 50; //エリアの左上のY座標
　var width = 100; //エリアの幅
　var height = 100; //エリアの高さ

　roll_image.style.left = left + "px";
　roll_image.style.top = top + "px";
　roll_image.style.width = width + "px";
　roll_image.style.height = height + "px";
　roll_image.style.border = "none";
　roll_image.style.display = "block";

}

function rollout(){
　var roll_image = document.querySelector('#rollimg');
　roll_image.style.display = "none";
}
</script>

※document.querySelector()使ってるので、古いブラウザーは、
IDでもふって、document.getElementById()とか使うようにしてね。
※エリアが矩形でないと困るぞ。

お礼

ご回答いただき、ありがとうございます。
やっぱりJavaScriptになりますよねぇ。。。
今回の開発はサーバの仕様に加え、後のメンテなどの経緯から、JavaScriptを使えないんです。
あれからいろいろ思いついてやってみたけど、まだ解決できません。
もしまたいい案がありましたらぜひお願いします。