- ベストアンサー
イメージマップでのマウスオーバー
イメージマップでのマウスオーバーなのですが、 此方で見ても良く解らなかったので質問させて頂きます。 http://nearlyequal.fc2web.com/m.gifの画像を http://nearlyequal.fc2web.com/m1.gif の様にイメージマップでマウスオーバーを個々の菱形に設定したいのですが、どの様にすれば良いのでしょうか？ area shapeの中にonmouseoverで指定してみても上手くいきませんでした。。。 タグ初心者の為、詳しく教えていただければ幸いです。
- xxx_869_xxx
- お礼率62% (35/56)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じで・・・ <script> function over(num){ img1.src="http://nearlyequal.fc2web.com/m"+num+".gif" } function out(){ img1.src="http://nearlyequal.fc2web.com/m.gif" } </script> <body> <img id="img1" src="http://nearlyequal.fc2web.com/m.gif" usemap="#hisigata" border="0"> <map name ="hisigata"> <area shape="poly" coords="37,58,64,76,90,58,64,41" href="#" onmouseover="over(1)" onmouseout="out()"> </map> </body> 各ひし形が赤くなっている画像をひし形の数だけ作り、m1,m2,m3・・・と名前を付けます。 onmouseover="over(1)" の数字がひし形の画像のナンバーに対応します。 .
その他の回答 (1)
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=Shift_JIS"/> <title>Test</title> <link rel="stylesheet" type="text/css" href="../css/mystyle.css"/> <script type="text/javascript" src="../script/mylibrary.js"></script> </head> <body> <!------------> <!-- 見出し --> <!------------> <div id="page_header"> <img class="map" src="m.gif" usemap="#navi" hspace="0" width="150" height="134"> <map name ="navi" id="navi"> <area href="../xxxx.htm" alt="xxxxx" shape="poly" coords="98,21,123,4,148,21,123,38,98,21"> </map> </div> </body> </html> これで、一番右上が菱形にリンクします。 左角の座標=98,21 中上の座標=123,4 右端の座標=148,21 中下の座標=98,21 後は、それぞれの左角を求めれば、同じ要領でOKです。 スタイルシートで色々と指定している部分以外を参考にして下さい。
関連するQ&A
- Javascriptのマウスオーバー
Javascriptでのマウスオーバーで、Mapを使って画像上に範囲指定しているリンク範囲にボーダーを表示させたいと考えています。 HTMLは、 <html> <head> <title></title> </head> <body> <img src="aaa.gif" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="78,200,228,241" href="bbb.html"> <area shape="rect" coords="326,168,476,209" href="ccc.html"> <area shape="rect" coords="78,141,228,182" href="ddd.html"> </map> </body> </html> このようになっています。 この状態で、マウスオーバー時にリンク範囲をボーダーで囲みたいと思っています。 JavascriptやCSSとの組み合わせ等でいろいろ探してみたのですが、どうしても上手くいきませんでした。どうしたらいいのか教えて下さい。 また、JavascriptやCSSでなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。
- 締切済み
- JavaScript
- イメージマップ内のロールオーバーで切替後の画像のURL設定について。
イメージマップ内のロールオーバーで切替後の画像のURL設定について。 下記のURLでは、３枚の画像を用意し、tab1,tab2,tab3,と三つのタブの場所にそれぞれイメージマップを利用してロールオーバー効果を持たせ、tabにカーソルが乗ったとき３枚の画像が切り替わるようになっています。 http://sky.geocities.jp/make_it_move/index.html そこで、皆さんにお聞きしたいのは、切り替わった画像それぞれに異なったリンクを指定する方法です。 ソースは <SCRIPT type="text/javascript" > function imgHover(path){ var target=document.getElementById('AreaMap'); var imagePath='./img/'+path; target.src=imagePath; } </SCRIPT> <body> <img src="img/image1.jpg" id="AreaMap" alt="地図" width="825" height="300" usemap="#imagemap" border="0" /> <map name="imagemap" id="imagemap"> <area shape="rect" coords="554,16,811,105" href="ttp://www.yahoo.co.jp/" alt="" onmouseover="imgHover('image1.jpg')" > <area shape="rect" coords="556,104,811,196" href="ttp://www.i-mezzo.net/" alt="" onmouseover="imgHover('image2.jpg')"> <area shape="rect" coords="556,195,812,287" href="ttp://www.kotaro269.com/" alt="" onmouseover="imgHover('image3.jpg')"> </map> です。 area shape部分にはurlを指定出来るのですが、切り替わった画像の image1,image2,image3部分にも、tab部分と同じurlを指定して上げるには、どのようにすればいいのでしょうか？ 宜しくお願い致します。
- ベストアンサー
- JavaScript
- イメージマップでマウスオーバーするとポップアップ
いつもお世話になっております。 地図の画像をイメージマップにして、地図の各ポイントをマウスオーバーすると画像が横に出る というものを作りたいのですが、可能でしょうか？ 調べたのですが「イメージマップにマウスオーバーで説明文を出す」や 「リンクにマウスオーバーで画像を出す」というものしか見つかりませんでした。 javascriptオフにも対応するためCSSで実現できないかと考えているのですが方法を教えて頂けませんでしょうか？ 宜しくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- イメージマップで文章を表示したい。
下記の例のように、「map.gif」という画像の各箇所ごとにそれぞれのリンクを貼るのは下記の方法で出来ると思うのですが、 「coords="22,11,122,62"」にマウスが乗ったときに指定した箇所に文章を表示するにはどうしたらよいのでしょうか？ ※それぞれの箇所によって、それぞれ違った文章を表示したいです。 ※「map.gif」という画像が表示されている上段（下段でもＯＫ）に枠を作って、その中に説明文が表示される仕組み。 <img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> <area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3"> <area shape="default" href="map4.html" alt="リンク4"> </map> 宜しくお願いします。
- ベストアンサー
- HTML
- クリッカブルマップで切り替えた先の画像に部分リンク
javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。（下記コード） イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。 この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。 詳しい方、教えてください。 <script type="text/javascript"> function button1_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像1'; } function button2_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像2'; } function button3_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像3'; } <figure> <img src="元画像" alt="○" usemap="#image_map" id="map" /> <map id="image_map" name="image_map"> <area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="～～～" /> <area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="～～～" /> <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="～～～" /> </map> </figure>
- ベストアンサー
- JavaScript
- クリッカブルマップでの画像のロールオーバー
いつも大変お世話になっております。 同じような質問があったのでいろいろと拝見したのですがなかなか上手くいかず質問させていただきました。 今回ホームページで下記のような感じで、クリッカブルマップを 作成しその中に５つのリンクを作成しました。 （仮に、このイメージはmenu.gifだとします。） ￤----------------------￤ ■■■■■ ￤----------------------￤ これを一番左の四角にマウスをあてると （menu.gif→menu01.gifの画像に入れ替わる。 隣の四角にマウスが来ると今度はmenu02.gifに変わる。） ￤----------------------￤ ■□□□□ ￤----------------------￤ このような、同じ大きさの違う画像に入れ替えたいのですが このようなことは可能でしょうか？ 下のように記述してもエラーが出て上手くいきません。 なにがいけないのでしょうか？ <AREA shape="rect" coords="44,209,153,454" href="main.html" onMouseOver="imgChange(menu01.gif)" onMouseOut="imgChange(menu.gif)"> よろしくお願いいたします。
- 締切済み
- JavaScript
- 画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ
画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか？ 画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですが その画像の切り替えをフェードでできないでしょうか 問題のコードです <script>function over(num){ document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg" } function out(){ document.getElementById("mg").src="site02/ex/ex_top03.jpg" } </script> <div id="main_content_ex"> <img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()"> <area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()"> <area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div> jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいました こういう質問のしかたで大変恐縮なのですが 誰かご教授願えないでしょうか？？ scriptもjQueryも基本を理解できておらず、大変困っています。 大変申し訳ありませんが、お願いいたします。
- ベストアンサー
- JavaScript
- クリッカブルマップをロールオーバーをしたい！
画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1422869464 ですが、 <div> <img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map"> <map name="Map3"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_01_02.jpg')" onmouseout="changeMapImage('sample_01.jpg')"> </map> </div> <div> <img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map"> <map name="Map4"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_02_02.jpg')" onmouseout="changeMapImage('sample_02.jpg')"> </map> </div> このように、クリッカブルを配した画像が続いた場合、なぜか2番目の画像にカーソルを当てると、1番上の画像がロールオーバーされるという。。。 ジャバスクリプト初心者の私にはなぜだか全く分かりません。 他の方法（フラッシュなど）もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- イメージマップで画像変え
イメージマップで作成したリンクボタンを使って別の場所の画像を変えることはできるのでしょうか? またイメージマップを使っている画像を上の方法で変えることはできますか? ↓のはためしに作っているプログラムですがうまく動きません。 <IMG SRC="picture1" WIDTH="500" HEIGHT="271" BORDER="0" usemap="#picture1" NAME="picture1"> <MAP name="picture1"> <a href="#" onMouseOver="document.picture2.src=btn.src;return true" onMouseOut="document.picture2.src=picture2.src;return true"> <AREA shape="rect" coords="365,62,373,70" ALT="ボタン"></a> </map>
- 締切済み
- JavaScript
- マウスオーバー
マウスオーバーの制御で下記のソースなのですが、今まで、こちらを教えてもらってやっていました。 今のままだと、オーバーで画像が変わるだけでマウスが外れると、元の画像に戻ってしまいます。該当ページへジャンプしたときに画像が変わったままにするのにはどうしたらよいのでしょうか。 <script LANGUAGE="JavaScript"> <!-- if (document.images) { //if image object is available img1on = new Image(); // MouseOver Images img1on.src = "image/1.gif"; img2on = new Image(); img2on.src = "image/2.gif"; img1off = new Image(); // MouseOut Images img1off.src = "image/1_1.gif"; img2off = new Image(); img2off.src = "image/2_2.gif"; } function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); }} function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); }} //--> </script> ***HTML***** <a onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')" TARGET="_self" href="index.htm"> <img NAME="img1" image/1_1.gif" width="130" height="20"></a> <a onMouseOver="imgOn('img2')" onMouseOut="imgOff('img2')" href="next.htm"> <img NAME="img2" SRC="image/2_2.gif" width="130" height="20"></a>
- ベストアンサー
- JavaScript
