プロが教える店舗&オフィスのセキュリティ対策術

いつもお世話になっております。
地図の画像をイメージマップにして、地図の各ポイントをマウスオーバーすると画像が横に出る
というものを作りたいのですが、可能でしょうか?
調べたのですが「イメージマップにマウスオーバーで説明文を出す」や
「リンクにマウスオーバーで画像を出す」というものしか見つかりませんでした。
javascriptオフにも対応するためCSSで実現できないかと考えているのですが方法を教えて頂けませんでしょうか?
宜しくお願いいたします。

A 回答 (1件)

「イメージマップにマウスオーバーで説明文を出す」と


「リンクにマウスオーバーで画像を出す」
を組み合わせてみてはどうでしょうか。
(要は area のonmouseoverで画像を出す関数を呼ぶ)

なお、CSSをちゃんと実装したブラウザでならCSSだけでも出来そうですが、
特にIE6あたりが実装していないプロパティを使わないとできないので
現実的にはjavascriptを使うか、全体をFlashで作成するしかないと思います。
    • good
    • 0
この回答へのお礼

早速の回答ありがとうございます。
ひとまず解決しましたのでメモとして残します。

参考はこちら
http://www.pat.hi-ho.ne.jp/oka_tosho/mouseover35 …
で実際に使用したものは以下になります。

<SCRIPT language="JavaScript">
function ShowPic(sImage)
{
document.ShowRoom.src = sImage;
}
//-->
</SCRIPT>

<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><map name="マップname" target-"_blank">
<area onmouseover="ShowPic(this.href)" shape="poly" coords="420,24,412,41,455,60,463,43" href="マウスオーバー画像.jpg">
</map> <img src="イメージマップ画像.gif" width="700" height="982" border="0" usemap="#マップname"></td>
<td><img name="ShowRoom" src="初期画像.gif" width="249" height="166">
</td>
</tr>
</table>


CSSでの件ですが、FLASHを使わずに、というのが目標だったので後日また調べたいと思います。

お礼日時:2007/06/15 11:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!