• 締切済み

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でなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。

  • RRHH
  • お礼率62% (34/54)

みんなの回答

  • kancil
  • ベストアンサー率27% (26/95)
回答No.4

1です。いろいろ省いているけど 以下のような感じにしてこれらを ひとかたまりとして扱うのはNGなのかな？ <div style="position:relative;background-image:url(aaa.gif)"> <div style="position:absolute;top:10px;left:10px"><a href="xxx"><img src="linkpont.gif" /></a></div> <div style="position:absolute;top:20px;left:10px"><a href="xxx"><img src="linkpont.gif" /></a></div> <div style="position:absolute;top:30px;left:10px"><a href="xxx"><img src="linkpont.gif" /></a></div> <div style="position:absolute;top:40px;left:10px"><a href="xxx"><img src="linkpont.gif" /></a></div> </div> あとはa:hoverとかでボーダー付ければOKじゃないのかな？

RRHH
質問者

お礼

お返事が遅くなり申し訳ありません。 この方法なら私にも理解できるし、いろいろ試してみてもいます。 で、これですとまずリンク対象の画像も文字も無い状態でのリンクですので<a></a>では無理だと思います。 また、リンク位置もposition:absoluteでは左上の端からの位置指定となるので画像が動く度に変更が必要になってしまい無理ではありませんか? やはり簡単な事では無かったようですね。 今回は諦めるしかないかもしれません。 いろいろ考えて頂き有難うございました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

HTML5のCANVASを使って作って見ました。 　コンテナーにするCANVAS要素と、 　マップにする画像のソースと幅・高さ　と 　マッピングする領域の形、ボーダー色、座標　の配列を 渡して初期化します。 HTMLマークアップの例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Canvas Map</title> <script type="text/javascript" src="CanvasMap.js"></script> </head> <body> <h1>Canvas Map</h1> <canvas id="canvasmap" style="border:1px solid gray;"></canvas> <script type="text/javascript"> new CanvasMap(document.getElementById("canvasmap"), {src:"/aaa.gif",width:500,hight:250}, [ {link:"hoge.htm",type:"rect",border:"red",points:[{x:78,y:200},{x:228,y:241}]}, {link:"fuga.htm",type:"rect",border:"green",points:[{x:326,y:168},{x:476,y:209}]}, {link:"piyo.htm",type:"rect",border:"blue",points:[{x:78,y:141},{x:228,y:182}]} ] ); </script> </body> </html> ※領域の形の指定(type)が"rect"の時は、points:[]に左上と右下を渡します。 ※領域の形の指定(type)を"polygon"の時は、points:[]に頂点の座標を、時計方向回りで順番に指定すると、多角形のマップが作れます。 ※領域の形の指定(type)を"circle"の時は...（抜本的に作り変えが必要だ！） 肝心のCanvasMap.jsは、2000文字をオーバーするので↓ https://gist.github.com/890089 に置きました。

RRHH
質問者

お礼

お返事が遅くなり申し訳ありません。 ここまで難しいなんて、理解するのが大変で…。 それにIEでは無理なのでは、理解出来ても使えないかもしれません。 折角ご伝授頂いたのに活用できなくてすみません。 本当にいろいろ有難うございました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

とりあえず、マウス座標が領域内に有るか無いかの判定が肝 ポリゴン領域内の判定については、以前↓ http://www.j-tokkyo.com/1999/G06T/JP11144041.shtml 「点p＝（Ｘp，Ｙp）と、多角形の頂点qi＝（Ｘi，Ｙi）が与えられた時、 　多角形の各辺について、Ｍ１=(Ｘp- Ｘi)(Ｘp-Ｘi+1)を計算して 　これが負である場合のみ、 　 Ｍ２=(Ｘp-Ｘi){(Ｘp-Ｘi)(Ｙi+1-Ｙi)-(Ｙp-Ｙi)(Ｘi+1-Ｘi)}を求めて 　その符号( Ｍ２＜０のとき１、Ｍ２＞０のとき０）の和を求め、 　これが偶数であるとき、与えられた点pは多角形で囲まれる領域の外部にあり、 　奇数であるときには内部にあると判定する」 を参考に、作ったやつ↓があるので、 function Region_chk(point,polygon){ 　var result = new Boolean(); 　var count = 0; 　for (i=0;i<polygon.lengt-1;i++){ 　 if( 　　　　 ( 　　　　　((point.x-polygon[i].x) * 　　　　　(point.x-polygon[i+1].x)) 　　　　　< 0) 　　　 &&( 　　　　 ( (point.x-polygon[i].x) * 　　　　　( 　　　　　 ((point.x-polygon[i].x) * 　　　　　 (polygon[i+1].y-polygon[i].y)) - 　　　　　 ((point.y-polygon[i].y) * 　　　　　 (polygon[i+1].x-polygon[i].x)) 　　　　　) 　　　　 ) 　　　　 < 0) 　　　){count++;} 　} 　if(count % 2 == 0){ 　　 result = false; 　 }else{ 　　 result = true; 　 } 　return result; } これを使って作ってみよう。 ※矩形(rectangle)だけならもっと簡単だけど、一般化を目指そう。 ※とりあえず、HTML5のCANVASで実装（IEは無視だ。）

RRHH
質問者

お礼

お返事が遅くなり申し訳ありません。 ここまで難しいなんて、理解するのが大変で…。 それにIEでは無理なのでは、理解出来ても使えないかもしれません。 折角ご伝授頂いたのに活用できなくてすみません。 本当にいろいろ有難うございました。

  • kancil
  • ベストアンサー率27% (26/95)
回答No.1

他にもっと良い方法があるのかもしれませんが、 とりあえず今パッと思いついた方法を書きますね。 まずusemapでのリンク方法をやめます。 aaa.gifを背景画像として表示させ、リンクポイントと しての透明の画像を用意してそれらをcssの position:absoluteで配置する、という方法です。 これならJavascriptも必要なく、CSSのみで オンマウスでのボーダー付けもでき、 簡単なんじゃないかな？と思います。

RRHH
質問者

補足

早々のご回答有難うございます。 実はこの方法は私も考えたのですが、aaa.gifをページの何処に配置してもリンク範囲がずれないようにしたかった為、usemapでリンクポイントを指定してみたのです。 CSSのみでは無理かと思い、JavascriptもしくはJavascript＋CSSでのお知恵をお借りしたかったのです。 どうか宜しくお願い致します。

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

関連するQ&A

  • mapが機能しない

    以下のようにmapを設置しましたが、全く機能しません。何が考えられるでしょうか？ <div><img src="images/head.jpg" alt=""　usemap="#map" border="0"/></div> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> <area href="kan.html#2" alt="" shape="rect" coords="314,3,393,154" /> <area href="kan.html#1" alt="" shape="rect" coords="106,3,211,146" /> </map>

    • ベストアンサー
    • HTML
  • areaタグのマウスオーバー時に枠線

    HTML上に <area href="a.htm" shape="rect" alt="四角形" coords="1,1,2,2"> のように四角で囲んだところをリンクにすることはできますが、 なおかつ、マウスオーバーしたときに、 四角の部分を色の枠線で囲むことは可能でしょうか？

    • ベストアンサー
    • HTML
  • 画像に複数リンクをはる方法（イメージマップ）

    画像は表示されるのですが、リンクがはれません。 どこがおかしいのでしょうか？ リンクをはる画像と、リンク先は別フレームで、表示させたいフレームの名前はinです。 ついでに、リンクをクリックした瞬間に出る点線の消し方もわかる方がいたら教えてください。 よろしくお願いします。 タグ（html内）↓ <body> <img src="http:～" usemap="mn"> </body> <map name="mn"> <area shape="rect" coords="298,298,355,262" href="http:～l"target="in"> <area shape="rect" coords="298,276,319,285" href="http:～"target="in"> <area shape="rect" coords="324,273,362,288" href="～html" target="in"> <area shape="rect" coords="367,276,399,286" href="～html" target="in"> </map>

  • 背景画像にクリッカブルマップでリンクを飛ばす方法

    背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが 上手く設定できません。 どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか？ ■CSSで書いているのは .bodytitle { background-image: url('http://**************/title.jpg' width="750" height="269" border="0" usemap="#maintop"); } ■HTMLのbodyの中に書いているのは <map name="maintop"> <area shape="rect" coords="12,10,280,80" href="http://******/" target="_blank"> <area shape="rect" coords="510,8,740,71" href="http://******/" target="_blank"> </map> お手間おかけしますがどうぞよろしくお願い致します。

  • クリカブルマップのリンクが反映されない

    htmlでクリカブルマップを使ってページを作ろうとしています。 ↓現在下記のような記述です ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <title>トップページ</title> </head> <body bgcolor="#ffffff"> <center> <img src="○○○.jpg" usemap="#△△△" border="0"> <map name="△△△"> <area shape="rect" href="profile.html"　coords="274,98,417,118"> <area shape="rect" href="gallery.html"　coords="720,559,793,573"> </map> </center> </body> </html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ いろんなHPでちゃんと確認しながら記述したのですが、リンクがどうもうまくいきません。画像はきちんと表示されます。しかし、画像の上にマウスカーソルを置いても何も反応してくれません。クリックしてももちろんダメです。座標値が間違ってるのかな？と思い何度も確認しましたが間違っていませんでした。スペルも間違いないし、＝とかのつけ忘れもないし、もう何がどう間違って反映されないのかがどうしてもわからなくて質問しました。 初心者なもので・・・・おわかりになった方、どうか教えていただきたいです；▽；

    • ベストアンサー
    • HTML
  • map初心者です

    名前の付け方がわかりません。 なんでもいいのでしょうか？とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <img src="img/1.jpg" usemap="#1map" border="0"> <map name="1map"> 　<area shape="rect" 　　coords="220,148,179,200" 　　href="http://12345" alt="**" target="_blank"> 　<area shape="rect" 　　coords="358,125,181,126" 　　href="http://12345" alt="**" target="_blank"> 　<area shape="rect" 　　coords="167,336,178,141" 　　href="="http://12345" alt="**" target="_blank"> 　<area shape="rect" 　　coords="178,338,180,214" 　　href="="http://12345" alt="**" target="_blank"> </map> 関係あるかわかりませんが、使っているのはロリポップです。

    • ベストアンサー
    • HTML
  • 吹き出しに画像とコメントを入れるプログラム

    下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <img src="画像名" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="305,60,390,126" href="アドレス" alt="北海道"> <area shape="rect" coords="288,151,331,181" href="アドレス" alt="青森"> <area shape="rect" coords="280,181,311,221" href="アドレス" alt="秋田"> <area shape="rect" coords="310,181,341,221" href="アドレス" alt="岩手"> <area shape="rect" coords="275,221,305,245" href="アドレス" </map>

  • ブラウザに対応させるには？

    はじめまして　 現在xoopsでホームページ作成してるんですけど ブロック配置を「中央ブロック中央」で設定し htmlでトップを作ってブラウザで確認したのですけどfirefoxでみたときにイメージマップで作ったリンクがリンクされてないのです。 一応、私もいろいろ思いつくことはやってみたのですけど・・・どうしても出来なかったので質問したしだいです。 これが問題のタグなんですが　 <table> <td align="center" width="" height=""> <img src="" width="" height="" border="" usemap="#Map"> <map name="Map"> <area shape="rect" coords="6,5,54,56" href=""> <area shape="rect" coords="71,6,121,55" href=""> <area shape="rect" coords="135,5,185,55" href=""> <area shape="rect" coords="198,5,248,54" href=""> </map> の部分がfirefoxではリンクされない状態で画像が表示した状態になるところです。　 ご回答よろしくお願いします。

  • <map>の切り替え

    ウェブサイトを作っているのですが、たぶんJavaScriptだとできると思うのでどなたか分かればと思い、投稿しました。 操作的には、 <body> <div><img src="aaa.gif" usemap="#map01" border="0" name="changeImage"></div> <!--▼クリックエリア範囲01の場合--> <map name="map01"> <area shape="rect" coords="0,0,30,30" href="javascript:document.changeImage.src='bbb.gif'";> </map> <map name="map02"> <!--▼クリックエリア範囲01の場合--> <area shape="rect" coords="0,0,20,20" href="bbb.html"> </map> </body> のような感じで、初期設定のusemapがmap01なので、最初クリックする時は、map01のクリックエリア範囲でそのaaa.gifがbbb.gifに変わります。そして、bbb.gifに変わったとき、クリックエリア範囲を<map name="map02">にしたいのです。 できますでしょうか？ 一応補足しておきますが、操作的には違う画面を出すとか、新しい画面に行った時、とかではないです。 同じ画面上の操作です。

  • クリッカブルマップについて

    私は、Macintoshを使って、ＨＰ製作をしているのですが、 クリッカブルマップが、MacのSafariではちゃんと出来ているのに、 internet explorerだと見れません。 どこが違うのでしょうか？ご回答お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- BODY{cursor:crosshair;} --> </style> <title>サンプル</title> </head> <body background="002.jpg"> <div style="top : 40px;left : 90px; position : absolute; z-index : 1; " id="Layer1"> <img src="window18.jpg"　usemap="#map1"　alt=""> <map name="map1"> <area shape="rect" coords="586,247,617,261" href="info.html" target="iframe"> <area shape="rect" coords="622,247,660,261" href="info.html" target="iframe"> <area shape="rect" coords="666,247,690,261" href="contact.html" target="iframe"> <area shape="rect" coords="582,276,626,291" href="cosme.html" target="iframe"> <area shape="rect" coords="631,276,663,290" href="kaimono2.html" target="iframe"> <area shape="rect" coords="667,276,698,290" href="link.html" target="iframe"> <area shape="default" nohref> </map> </div> <div style="top : 145px;left : 190px; position : absolute; z-index : 1; " id="Layer2"> <iframe src="migi.html" border="0px" width="450" height="280" scrolling="AUTO" name="iframe"> </iframe></div> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する