• 締切済み

マップ設定でロールオーバーイメージ

ポインタを、クリッカブルマップのところにあてると、ロールオーバーするjava script（？）はどうやって宣言するのでしょうか？ ああ、わかりません。 見本はアルバイト情報誌のAnのサイト「web an」の駅選択のページでやってるのですが、あれはどうやってやるのでしょうか、ご教授おねがいですーー。

みんなの回答

  • duckling
  • ベストアンサー率47% (88/185)
回答No.1

OnMouse で、マップ全体の画像を入れ替えてるみたいですね。 池袋なら、池袋部分だけががオレンジになっている画像と。

amazulu
質問者

お礼

お礼遅くなってすみません。 あれから、解決しました。 なんかそんな感じでした。。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • HTMLだけでイメージマップにロールオーバー

    こんにちは。 いくつかクリッカブルリンクがあるイメージマップのリンクの部分を ロールオーバーさせたいのですが、HTMLだけで可能でしょうか？ javascriptをサポートしていない環境で、外部CSSファイルも使えません。 可能でしたら、どのようにHTMLを書けばよいか、 ご教示いただけると幸いです。 よろしくお願いいたします。

  • クリッカブルマップにロールオーバーを付ける

    クリッカブルマップにロールオーバー（Javascript）を付けようと思うのですが、 どうも目指していることが上手くいきません。 まずは、下記サイトをご覧ください。 http://www.webdlab.com/template/clickable2/ これはソースコードが乗っているサイトです。 この通りに書けば、通常のロールオーバーはできるのですが、 私の目的はあと＋α必要になります。 [内容] 1.　オンマウス時にロールオーバー 2.　クリック後も、ロールオーバー状態 3.　他のイメージにオンマウスしても、さっきクリックしたイメージがロールオーバー状態 ４．他のイメージをクリックして、はじめてロールオーバー画像が切り替わる。 以上です。 ちなみに現状（上記サイト）は.onmouseover、.onmouseout、.onclickの３つすべてロールオーバー後のイメージを指定すれば[内容]の１と２まではクリアなのですが、３以降がNGです。 そもそもクリッカブルのロールオーバーでは不可能なのでしょうか。 どなたがご教授よろしくお願いいたします。

  • クリッカブルマップからリモートロールオーバー

    使用しているソフトは、GoLive6.0、OSはWINDOWSです。 一枚の大き目の画像にクリッカブルマップを設定しまし た。そのホットスポットに別ファイルへのリンクを貼り ました。このホットスポットにカーソルが乗った時点で 離れたところにある画像の表示をリモートロールオーバ ーで変化させたいのです。また、その離れたところにあ る画像自体もその画像にカーソルが乗るとホットスポッ トにカーソルが乗った時と同様に画像を切り替えて、ク リックすれば別ファイルへ飛ぶリンク設定をしたいと思 っています。このようなことはGoLive6.0では可能でし ょうか。 もし可能であれば、方法をお教えいただければ幸いです。 また方法を解説しているサイトなどがあればお教えくだ さい。どうぞよろしくお願いします。

  • クリッカブルマップで切り替えた先の画像に部分リンク

    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で制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(alt=area1)を押せば正常に動作しますが、 もう一方のクリッカブルマップ(alt=area2)を押すと、 IE6の場合にエラーが発生してブラウザが終了してしまいます。 尚、FireFoxでは正常に動作します。 どこに原因があるかも分らず手詰まり状態です。 同じ現象にあわれた方で解決策をご存知の方がいらっしゃれば、ご教授下さいm(_ _)m <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <script type="text/javascript"> <!-- function ChangeImg(mapname,usemapname) { document.map0.src = mapname; document.map0.useMap = usemapname; } //--> </script> </head> <body> <img src="map0.jpg" width="300" height="300" name="map0" useMap="#usemap0"> <map name="usemap0"> <area href="JavaScript:ChangeImg('map1.jpg','#usemap1')" shape="rect" alt="area1" coords="10,100,140,200"> <area href="JavaScript:ChangeImg('map2.jpg','#usemap2')" shape="rect" alt="area2" coords="150,100,290,200"> </map> <map name="usemap1"> <area href="http://google.co.jp" shape="rect" alt="shop1" coords="50,50,250,250"> </map> <map name="usemap2"> <area href="http://yahoo.co.jp" shape="rect" alt="shop2" coords="50,50,250,250"> </map> </body> </html>

  • クリッカブルマップをロールオーバーをしたい！

    画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。 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番上の画像がロールオーバーされるという。。。 ジャバスクリプト初心者の私にはなぜだか全く分かりません。 他の方法（フラッシュなど）もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか？ どうぞよろしくお願いいたします。

  • クリッカブルマップの画像処理

    クリッカブルマップを使い、画像内の指定した一部分だけを暗くする処理を行いたいです。 ロールオーバーで画像を切り替えるのではなく、デフォルトの状態で 暗い部分と明るい部分を作りたいと思っています。 areaにクラス属性を与えて、その部分だけ画像の不透明度を変えたり 別の画像をかぶせるというような処理を行うことはできないでしょうか。

    • ベストアンサー
    • HTML
  • クリッカブルマップをCSSでロールオーバーする方法

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

  • ビルダー９でロールオーバー作成

    現在ビルダー９でロールオーバーのリンクボタンを作っています。ウェブアートデザイナーを開いてウェブアート素材タブのなかから画像を選びましたが、オブジェクトの選択で、画像だけ（あるいは文字だけ）が選択されてしまい、ロールオーバーが作れません。 説明わかりづらいですか？つまり、画像のみ（文字のみ）のロールオーバーになってしまうということです。画像＋文字を選択するにはどうしたらいいですか？

  • ロールオーバーを外部にするとエラーがでます。

    ホームページビルダーＶ９を使用しています。 はじめてjavascriptを扱う初心者ですのでうまく説明が出来ないと思いますが宜しくお願い致します。 ビルダーでロールオーバーを作成し、それを外部ファイルにしました。 ビルダーでプレビューを見ると 「このページのスクリプトでエラーが発生しました エラー：'HPB_SCRIPT_CODE_40''HPB_SCRIPT_CODE_50''HPB_SCRIPT_CODE_50'は宣言されていません。」 と出ます。 ブラウザーで見てみると 「セキュリティ保護の為、コンピュータにアクセス出来るアクティブコンテンツは表示されないようWEBブラウザで制限されています。 オプションを表示するにはここをクリック」と上の方に出ます。 クリックしないとロールオーバーは機能しません。 クリックすると機能します。 ロールオーバーを外部にうまく移動出来ていないのでしょうか？ 外部ファイルを全部載せると文字数オーバーする為１つだけ記載しました。 アドバイスお願い致します。 <HEAD> <META> <TITLE></TITLE> <LINK rel> </HEAD> <BODY> <script type="text/javascript" src="java1.js"></script> <script type="text/javascript" src="java3.js"></script> <script type="text/javascript" src="java2.js"></script> ★java2.js HPB_SCRIPT_PLD_50 HpbImgPreload('_HPB_ROLLOVER1', 'logo3.gif', 'logot7.gif'); HpbImgPreload('_HPB_ROLLOVER2', 'logo4.gif', 'logot17.gif'); HpbImgPreload('_HPB_ROLLOVER3', 'lo_sel.gif', 'logot19.gif'); HpbImgPreload('_HPB_ROLLOVER4', 'lo_car.gif', 'logot20.gif'); HpbImgPreload('_HPB_ROLLOVER5', 'lo_suki.gif', 'logot21.gif'); HpbImgPreload('_HPB_ROLLOVER6', 'lo_kon.gif', 'logot22.gif'); HpbImgPreload('_HPB_ROLLOVER7', 'lo_home.gif', 'logot23.gif');

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する