- ベストアンサー
リンクをオーバーマウスで画像表示
リンクにポインタを当てると画像と説明がポップアップされる仕様のhtmlを作りたいと思っています。 下記URLの様なものが理想です。 http://www.yaplog.jp/DesignSelect.blog 似たようなものはいくつか見つけれましたが 「ひとつのリンクにしか割り当てれない」 「画像しか表示できない」 などいずれも制限があるものでした。 どなたか上記の方法をご存知でしたらご伝授お願いできないでしょうか。 よろしくお願いいたします。
- gigigi
- お礼率91% (237/260)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご質問のサイトはかなり手の込んだスクリプトをかいてますね。 コピーライツも書いてあり、そのままコピーでは違法になりそうなので、 ほぼ一から書き換えました。ふぅー。 たぶん、こんな感じ・・ <html> <head> <script> src1="http://download.computers.yahoo.co.jp/download/jcnland/photo/plant/cherrytree/3406000015.jpg"; src2="http://www.geocities.jp/arenani_sorenani/3406000015.jpg"; image=new Image(); image.src=src2 function showView(aFile, aName, theEvent){ myLayer.innerHTML=OutputHTML(aFile, aName); var view = document.getElementsByName("view"); x+=65; y-=120; myLayer.style.top=y; myLayer.style.left=x; myLayer.style.visibility="visible"; } function closeView(){ myLayer.style.visibility="hidden"; } function OutputHTML(aFile, aName){ var str = ''; str+='<TABLE border="1" cellspacing="0" cellpadding="10">'+'\n'; str+='<TR><TD bgcolor="#ffffff" align="center">'+'\n'; str+='<FONT size="2">'+aName+'</FONT><BR>'+'\n'; str+='<IMG name="view" src="'+aFile+'" alt="now loading..." style="width:400px;"><BR>'+'\n'; str+='</TD></TR></TABLE>'+'\n'; return str; } function mouseStatus(theEvent){ x=document.body.scrollLeft+event.clientX; y=document.body.scrollTop+event.clientY; document.forms[0].txt.value=x+"："+y; } document.onmousemove = mouseStatus; </script> </head> <body> <div id="myLayer" style="position:absolute;z-index:100;top:0px;left:0px;visibility:hidden;"></div> <div> <a href="#" onmousemove="showView(src2,'桜の公園',event)" onmouseover="showView(src2,'桜の公園',event)" onmouseout=closeView()> <img id="img1" border=0 src="javascript:img1.src=src1" style="width:100px;position:absolute;top:200px;left:10px;"></a> </div> <form> X ：Y<br><input type="text" name="txt" size="8"/></form> </body> </html> .
お礼
すごすぎます！！ 感動しました。完璧です。 実を言うと例に挙げたサイトのソースからjsファイル やらなんやらを取り出して使えるようになりました。 （理解はできてないまま） で二日も立って投稿のない記事だから削除しようと思ってきてみればとても短く洗練されたソースが書いてあって驚きです。あれがこれになるとは本当に驚きです。 本当にありがとうございます。 早速乗り換えさせていただきます。 私の努力はなんだったんだ・・・