• ベストアンサー

Gif上のある領域上でプルダウンメニューを出したい

あるGifで作成された絵の一部にマウスを持っていくと、そこでプルダウンメニューが出て、その絵の一部からマウスをずらすとプルダウンメニューが隠れる様なものを作りたいのです。絵の一部は座標がわかっているので、その座標領域内にマウスが入っているかいないかを判断してプルダウンメニューを出したいのです。 どなたか簡単な方法を教えて頂けないでしょうか。実現にあたりかなり切望しています。

回答 全件
ベストアンサー
ご質問文への回答だけなら、スクリプトで表示/非表示するだけでよいので、…
イメージマップ又は直に mouseover 拾って、（非）表示するだけ。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

ご質問文への回答だけなら、スクリプトで表示/非表示するだけでよいので、イベント時に sample(true/false)などで同じ関数を呼び出して、 document.getElementById('pulldown').style.display = f?'block':''; みたいな1行で済んでしまします。 （方法としては、#1様の回答の通りの方法） ↓のサンプルは画像の中央付近にマウスをおくと、リストが表示されます。 その他はほとんどおまけで、いろいろくっつけてしまった… （ので、長くなっちゃいました） ＩＥだとCSSで li:hover ができないので、それもスクリプトでとか… 実際の、画像のホットポイントとリストの位置関係などが不明ですが、位置によっては、イベント処理で表示状態とマウスの状態を考慮して調整することが必要になる場合もありそう。 （サンプルではリストからのマウスアウトで無条件に非表示にしています（リストをマップエリアに被せているので）が、マウスアウトが画像のマップエリアに入ったりする場合は、両方併せて監視する必要がありそう。） <html> <head> <style type="text/css"> .wrapper { position:relative;} .wrapper img { width:400px; height:400px; background-color:azure; } .wrapper #pulldown { position:absolute; top:160px; left:150px; z-index:5; overflow:hidden; display:none; } .wrapper ul { margin-left:0; paddding:0; width:80px; background-color:white; position:relative; } .wrapper ul li { list-style: none outside; padding:3px 10px 3px; border:1 solid lightgrey; } .LIhover { color:white; background-color:slategray; } </style> <script type="text/javascript"> function mouseOn() { var e = document.getElementById('pulldown'); if (e.style.display != 'block'){ e.style.display = 'block'; var elm = document.getElementById('list'); elm.style.top = 0; elm.style.top = -e.offsetHeight; flg = true; slide(); } function slide() { var t, elm = document.getElementById('list'); elm.style.top.match(/([\-\d]+)/); t = parseInt(RegExp.$1) + 5; elm.style.top = t>0?0:t; if (t<0) setTimeout(slide,10); }; } function listOn(evt) { var e = evt?evt.target:event.srcElement; if (e.nodeName=='LI') { flg = false; var i, elm = document.getElementById('list').getElementsByTagName('LI'); for (i=0; i<elm.length; i++) elm[i].className = (e==elm[i])?'LIhover':''; } } function mouseOut() { flg = true; setTimeout(function(){ if (flg) document.getElementById('pulldown').style.display = ''; },30); } </script> </head> <body> <div class="wrapper"> <img src="xx.gif" usemap="#map0"> <div id="pulldown" onmouseover="listOn();" onmouseout="mouseOut();"> <ul id="list"> <li>test1 <li>test2 <li>test3 </ul> </div> </div> <map name="map0"> <area shape=rect coords="175,175,225,225" href="#" onmouseover="mouseOn();"> </map> </body> </html>

Pitch-kun
質問者

お礼

返事が遅くなりすいませんでした。私が求めていたのは、まさにこの様なことです。実際に動きも確認してみました。本当に有難うございました。実際には、Gifに１５程の領域があるので、共通のプルダウンメニューとそれを押下後のリンク先を設定すればできそうです。 繰り返しになりますが、本当に良いヒントを与えて頂き有難うございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.1

イメージマップ又は直に mouseover 拾って、（非）表示するだけ。

Pitch-kun
質問者

お礼

回答を有難うございました。もう少し詳しく回答を頂ければ良かったです。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Gif上の領域毎にその位置でプルダウンメニューを表示させたい

    Gif画面上に１５個程度の（10文字程度表示の）rect領域があります。このrect領域をクリックするとその位置でプルダウンメニューを表示して選択処理をさせたいのです。プルダウンのメニュー数と文字は共通なのですが、領域毎メニュー選択後のリンク先を変えたいのです。 どなたかアドバイスを頂けないでしょうか。切望します。

  • ｆｌash画像に隠れてしまうプルダウンメニュー

    cssで作成したプルダウンメニューがflash画像の後ろに隠れてしまいます。 マウスON時にプルダウンされるメニューをCSSで作成しましたが、 プルダウンメニューの下に配置している画像が、 ただの画像（GIF）だとプルダウンメニューが前に表示されるのですが、 フラッシュ（SWF）だとプルダウンメニューが後ろに隠れてしまい表示されません。 ・プルダウンメニューを前に表示させる方法 もしくは、 ・フラッシュ画像を後ろに隠す？方法 を探しています。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • javascriptでなめらかなプルダウンメニューを

    javascriptを使ってFlashで作成したようななめらかな動きをするプルダウンメニューを 作成するのは出来るのでしょうか。 色々と調べてはいるのですが、下記サイトのサンプルのように クリックして直ぐにサブメニューが表示される、という方法は見つけられても 滑らかな動きを実現できる方法が見つかりません。 http://javascript.eweb-design.com/sample/s0701_1.html イメージとしては、 1.メニューをクリック 2.1秒後に上からズルズルっとサブメニューが表示される 3.メニューからマウスが離す 4.1秒後にズルズルっとサブメニューが上に戻る うまい表現方法が見つからず分りづらい質問となってしまいましたが アドバイスをいただけると助かります。宜しくお願いします。

  • CSSで作成したプルダウンメニュー

    フラッシュ画像にCSSで作成したプルダウンメニューが隠れてしまいます。 ただの画像（GIF）だとプルダウンメニューが前に表示されるのですが、 フラッシュ（SWF）だと後ろに隠れてしまいプルダウンメニューが表示されません。 ・プルダウンメニューを前に表示させる方法 もしくは、 ・フラッシュ画像を後ろに隠す？方法 を探しています。 よろしくお願いします。

  • プルダウンメニューを作りたい

    　javascriptに関して、ほとんど知識がないのですがトップページの メニュー部分を最近よく使われている、プルダウン形式にする様に 依頼されました。 その仕様としては、 オンマウスになったときに、隠されているメニューが表示され、なおかつ ロールオーバーで画像がきりかわり、 マウスオーバーになったときには、また隠れる。 といったものです。いろいろと方法はあるかと思いますが、 <SCRIPT LANGUAGE="JavaScript" SRC="./common/fw_menu.js"></SCRIPT> と、外部ファイルfw_menu.jsを読み込むようにして、fw_menu.jsに は function fwLoadMenus() { if (window.fw_menu_0) return; window.fw_menu_1 = new Menu("root",324,35,"Osaka, MS UI Gothic",12,"","","",""); fw_menu_1.addMenuItem("<A HREF='./topics/index.html' onMouseOver='changeImage('pto01', './img/body-btn-pto01_over.gif');' onMouseOut='changeImage('pto01', './img/body-btn-pto01.gif');'><IMG NAME='pto01' SRC='./img/body-btn-pto01.gif' WIDTH='90' HEIGHT='37' BORDER='0'></A><BR>",""); fw_menu_1.hideOnMouseOut=true; fw_menu_1.writeMenus(); } // fwLoadMenus() と切り替わる画像とそのロールオーバーを記述しました。 結果、オンマウスした時に、指定した座標位置に画像body-btn-pto01.gifはきちんと表示されるのですが、ロールオーバーが作動しません！！ おそらく↑の記述にミスがあると思うのですが、その原因がつかめず朝に なってしまいました。。。。　 どなたか、javascriptに詳しいかた、↑の記述の間違いを私に教えて下さい。　どうか、よろしくお願い致します。

  • ロールオーバー式プルダウンメニューでタグの書き方を教えてください。

    いつもお世話になります。 ホームページのタグのことですが現在、termsmenu.gifという画像の上にマウスを置くと「プルダウンメニュー1」が表示されるように下記タグを書き込んでいます。 <IMG src="termsmenu.gif" onmouseover="pdMenu('Menu1')" width="88" height="26"> 今回、画像の代わりに特定の文字列、たとえば「総合メニュー」の上マウスを置くとすると、「プルダウンメニュー1」が表示されるようにしたいのですが、タグをどのように書けば良いか教えてください。 よろしくお願いします。

  • プルダウンメニュー

    プルダウンメニューを作ってみたいのですが、初心者でよくわかりません。ソースや作成方法などご存知の方がいましたら、どなたか教えてください。よろしくお願いします。

  • プルダウンメニュー

    親メニューボタンの上にカーソルを乗せると更に子メニューが出るプルダウンのメニューを作成することはできたのですが、 さらに子メニューから孫メニューを出すプルダウンのメニューが作れません。 色んなページに紹介されているCSSをコピペして自分のページに貼っても思うように表示されなかったりします。 教えていただけないでしょうか？

  • エクセルにプルダウンメニュー

    エクセルにプルダウンメニューの作成方法を教えて下さい。

  • プルダウンメニューに関してご教授お願いします。

    自分のホームページに使用する為のプルダウンメニューの作成方法を現在勉強中です。 以下のサイトの中の左のバナーで使用されているような、 カーソルを合わせると右にメニューが出てくるようなプルダウンメニューの作成はどうすれば良いのでしょうか？ かなり専門的な知識が必要でしょうか？？ http://www.yonekura-group.jp/ 作成方法等を分かりやすく説明しているサイト等がありましたら教えて下さい。

    • ベストアンサー
    • CSS
廃インク吸収パッドについて
このQ&Aのポイント
  • 廃インク吸収パッドの限界に達して印刷ができない場合、修理前に一枚だけ印刷する方法はありますか。
  • EPSON社製品の廃インク吸収パッドが限界に達すると、印刷ができなくなる問題が発生することがあります。修理前に一枚だけ印刷したい場合は、特定の方法を試してみることができます。
  • EPSON社製品の廃インク吸収パッドが満杯になると、印刷ができなくなりますが、修理前に一枚だけ印刷する方法はあります。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する