- ベストアンサー
クリッカブルマップのリンク部分の色を変えたい。
タイトルの通りなのですが、、 クリッカブルマップのリンク部分にマウスをあわせると色が変わるようにしたいです。 このような感じです↓ http://www.pstar.jp/home/fr_101.html いろいろ調べてみましたが、どうしてもわかりません。 すみません・・よろしくお願いします。。
- arichiro
- お礼率80% (4/5)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
スクリプトを使うのでちょっと面倒ですが下記のソースを参考にしてください。（マウスをあわせるとimage_aからimage_bに入れ替える） ヘッダー内の記述はそのままコピーでＯＫです。 Bodyタグ内では入れ替えるイメージをあらかじめ読み込む設定があります。画像が小さければこのBodyの記述はなくてもいいかも。 ＩＤ番号を替えていけば１つのページに複数の設定が可能です。 <html> <head> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('iamge_b.jpg')"> <img src="image_a.jpg" id="Image1" onmouseover="MM_swapImage('Image1','','image_b.jpg',1)" onmouseout="MM_swapImgRestore()" /> </body> </html>
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
色を変えるというより、画像を置き換えています。
お礼
ありがとうございます。 やっぱり画像なんですね。。 がんばって作ります。
画像を入れ替えてるだけのようです。 ためしに、参照ページをIEで「名前を付けて保存」で「Webページ、完全」で保存して、その保存したものをIEで表示して、同様にクリッカブルマップにカーソルを合わせてみましょう。 画像全体が×になって表示されないと思います。 一瞬、スゴイと思いましたが、ブロードバンド時代だからできる技ではないでしょうか？
お礼
ありがとうございます！ すごいですよね・・私も初めて見たときびっくりしました。。
関連するQ&A
- クリッカブルマップ上をonMouseで画像を変化させたい
タイトルどおりなのですが、日本地図の画像にクリッカブルマップが指定してあります。 例えば北海道にマウスをあてたときに、北海道の部分の色を変えるようにしたいのですが、可能でしょうか。 （もちろんリンクも可能で。） スタイルシートなども駆使してみたのですが、できませんでした。 ご教授よろしくお願いいたします。
- 締切済み
- JavaScript
- クリッカブルマップでリンクを貼ったとき…
クリッカブルマップでリンクを貼ったとき、リンク周りにborderのような、枠、色をつけることはできないのでしょうか？ <IMG SRC="photo/建物配置図.jpg" ALT="選択してね" border="0" usemap="#haitizu"> <map name="haitizu"> <area shape="rect" coords="185,247,240,303" href="taikukann.html"" alt="体育館"> </map>
- ベストアンサー
- HTML
- クリッカブルマップとインラインフレームを組み合わせたい
こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。 現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。 透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。 画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。 クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・ 回答よろしくお願いします。
- 締切済み
- HTML
- クリッカブルマップの部分的な画像の入れ替え
HTMLの頁に大きな一枚の画像を貼り付け、クリッカブルマップで７か所にリンクボタンを作りました。マウスがリンクボタン上に来た時、そのボタンエリアにだけ違う画像を表示したいのですが、どなたかお教え願えないでしょうか？当方javascriptは初心者です。よろしくお願いします。
- ベストアンサー
- HTML
- クリッカブルマップがきかない！？
html初心者です。 地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか？？ソースは下記にある通りです。 なにか決定的にタグが抜けているんでしょうか？？ 皆様、初心者な私にどうか教えてください。 よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>
- ベストアンサー
- HTML
- クリッカブルマップで同時にリンク
クリッカブルマップで、２つのページに同時にリンクさせたいのですが、下記のタグだと１ヶ所しかリンクができません。同時にリンクをさせるには、どんなタグをどのように追加したらいいのでしょうか。よろしくお願いします。 <MAP NAME="map1"> <AREA SHAPE="RECT" COORDS="*,*,*,*" HREF="xxx.html" target="migi"> </MAP>
- 締切済み
- HTML
- 楽天ブログでクリッカブルマップ
以前クリッカブルマップを教えていただいたものです。 タイトル通りなのですが楽天ブログでクリッカブルマップは使用できるのでしょうか？ また使用できる場合のやり方を教えて欲しいのですが・・・
- 締切済み
- ブログ
- クリッカブルマップについて
クリッカブルマップについて教えていただきたい点がございます。 例えば、以下のような記述をした場合。 ■例 <a href="***.html"> <img src="***.jpg" alt="***" width="***" height="***" border="0" usemap="#Map" /> </a> <map name="Map" id="Map"> <area shape="rect" coords="***" href="***.html" alt="***" /> </map> エリア指定した部分以外のところは<a>タグでのリンクになり、エリアで指定している部分はそのURLになるかと思うのですが、Firefoxですとうまく遷移するのですが、IEだとクリックしてもエリア指定した部分しかページ遷移をしてくれません。 ※ブラウザ左下のマウスオーバー時にでるURLは飛び先を認識しているのですが、クリックしても反応が無いのです。。。 IEはshape="default"にも対応していないようですし、一部分のみをエリアで指定し、それ以外のところは全体的に別のリンクを指定したい場合、どういった記述をすればよいのでしょうか？ shape="poly"で囲んでも問題は無いのですが、あまり見た目が良くないので。。。 また、これよりも良い方法があるなど、ご存知の方がいらっしゃいましたら、ご教授いただけますと幸いでございます。 ----------------------------------- 私が制作時に確認をしているブラウザのバージョンは次の通りです。 Firefox：3.6.12 IE：8.0 ----------------------------------- 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- クリッカブルマップを使わず同じ効果を得たい…。
出来るかも分からないのですが、宜しくお願いします。 題名の通りなのですが、クリッカブルマップのように1枚の画像上に複数箇所のリンクを設定したいのですが、クリッカブルマップ自体は使用したくありません。 そこで、質問なのですがHTMLやCSSを工夫することで、またはJavascriptを使うことで、こういった指定が実現可能でしょうか？ 実際には、良くある地図みたいに地域ごとの形でリンクの設定が出来ればと思います。 なお、FlashはNGとさせてください。 どなたか、ご存知の方いらっしゃいましたらアドバイス頂けないでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
- クリッカブルマップ＋カーソル変更
私のサイトでは、カーソルを画像に変更して使っていて、リンクに触れるとカーソル画像が変わる、っていう設定にしているんですが、クリッカブルマップで指定したリンクではカーソルが変わりません。 どうすればクリッカブルマップのリンクもカーソルをかえられますか？ ちなみに、カーソルの指定はスタイルシートの外部指定でやっていますが、クリッカブルマップではないリンクでは、ちゃんとカーソルが変わります。
- 締切済み
- HTML
お礼
スクリプトまでありがとうございます！ 教えていただいたものでがんばってみます。 また困ったときには助けてやってください。