- ベストアンサー
リンクをオーバーマウスで画像表示
リンクにポインタを当てると画像と説明がポップアップされる仕様の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> .
関連するQ&A
- ブログ内でのカーソル、マウスポインタを画像化したいです。
御観覧有難うございます！ マウスポインタの画像に変更出来る(.curなどをup出来る)ブログがあることは知ったのですが、 ｆｃ２ブログでは、.cur画像はup出来ないですし、 画像urlが用意出来ないのでは、マウスポインタの変更は出来ないし、 別サーバーを用意したとしても、有料サーバーでないと画像urlを直リンクは難しいと聞いたのですが、 ｆｃ２ブログを使っている人が、画像マウスポインタ、マウスストーカーを使っているのを発見し、しかも「カーソル変えてみました♪」 と、余裕のコメント。 しかし、そのブログは更新が去年で止まってしまっていて、 管理人さんに直接聞く事が難しい状況です。 マウスポインタの変更方法は、なんとか知っておりますので、 画像urlの取得だけでも、良い方法がないか、お聞きしたいのです。 もう、どうしても悔しくて… 宜しくお願いいたします…
- 締切済み
- その他（プログラミング・開発）
- マウスオーバーして画像を入れ替えたい
YahooのジオシティーズでHPを作成していますが、教えていただきたいことが２つあります。 １.javaスクリプトを使ってマウスオーバー、マウスアウトした時に写真を入替えたいと思っていますが、全くの初心者でどこにタグを入れていいのかわかりません。 どなたか下記ＵＲＬのページの写真(1)にマウスオーバーした場合に写真(2)に変わり、マウスアウトすると写真(1)に戻るよう、下記URLのソースをすぐに使えるように手直ししていただけませんか？http://sky.geocities.jp/hokuto5131/test.html ２．Yahooのジオシティーズでマウスオーバーして画像を入替えるHPを見てみると、入替える画像のURLはimg.1のようになっていますが、私がYahooのジオシティーズに画像データを送ると上記のURLのソースのように『http://sky.geocities.jp/hokuto5131/～』になってしまいます。なぜでしょうか？またそのページに貼り付けていない画像データをどうやってYahooのジオシティーズのサーバーに送るのでしょうか？ 以上よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- facebookでリンク時に画像が表示されない
http://blog.livedoor.jp/takasu001/ ↑こちらでブログを書いているのですが、更新したときにfacebookのニュースフィードでリンクをシェアしてもサムネイル画像が表示されません。 記事のタイトルとURLは表示されますが、やはりサムネイルを表示させたいと思います。 なにが原因かわからず困っています。 どんな情報を書いておけばよいかもわかりません…。 画像にリンクを張っておけばよい、と聞いてやってみましたがうまくいきません。 ブログのテンプレートの問題なのかと思い、いろいろ変更してみましたが状況は変わりません。 詳しい方、どうしたらよいか教えてください。 どうぞよろしくお願いします。
- 締切済み
- その他（SNS・掲示板・ブログ）
- firefoxでリンクURLをマウス付近でポップアップさせる。
firefox1.503を使用しています。 リンクURLがありまして、マウスオーバーをするとステータスバーにURLが表示されます。 しかしステータスバーに他の色んな情報があるとURLが途中でとぎれてしまいます。 そこでリンクURLをマウス付近でポップアップできないでしょうか？ 画像のマウスオーバーでalt情報がポップアップする感じです。 Greasemonkeyなどを使えばできるかと思いましたが、私の技術ではできませんでした。 分かる方いらっしゃいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- ブラウザ
- IE8で見るとリンク先が開かない。マウスオーバーにもならない。
IE8で見るとリンク先が開かない。マウスオーバーにもならない。 すいません。どなかた良いお知恵を伝授頂ける方がいらっしゃいましたら、ご教授ください。 案件は、IE8で見るとリンク先が開かない。マウスオーバーにもならないという点です。楽天トラベルのページ制作を行っているのですが、クライアントの会社PC(windowsでie8を使っているという点しかわかっていません。ネットワークを組んでいるとは聞いています。)で見ると、リンク先が開かない、マウスがオーバーにもならない（ポインタの形が変わらない）という指摘を受けました。 ちなみに、私の自宅PC(windowsXPでie8と、macbookのsnowLeopardのbootcampでie8)では問題無くリンク先も開きますし、マウスのポインタも変わります。自宅PCでは他のブラウザも同様です。 クライアントには、ie8のセキュリティーレベルの設定か、ネットワークの管理者権限設定で何かしていないかと訪ねてみたのですが、「他の楽天トラベルでのページなら、リンク先は普通に開く」との回答でした。 リンクボタン部分の制作は、htmlとcssを使用して<a href=>をdisplay:block;にして、a:linkやa:hoverで作った画像が切り替わるように設定しております。 上記問題を解決するための何か良い知恵があれば、ご教授ください。 よろしくお願い致します。
- 締切済み
- HTML
- マウスストーカーで画像が表示できません。
前回の質問でポインターに付いてくる画像や文字が「マウスストーカー」で教えてもらったHPより、タグを挿入するところまではわかったのですが、どうしても画像が×マークで出て来ません。画像だけの（giｆ）ｈｔｍを作っていっっしょにアップして、そのＵＲＬをタグに挿入すれば良いのじゃないのですか？（画像のＵＲＬを指定すればきちんとその画像が出ては来るのですが・・） 何度もすいませんがよろしくお願い致します。
- 締切済み
- その他（プログラミング・開発）
- javascriptでURLにマウスオーバー
言語はjavascriptでURLにマウスオーバー すればクリックしないでリンク先へ飛べるものが作りたい。 要するにクリックをなるべく使用しないサイトの構築をしたいんです、 URLにマウスをのせると（ポップアップやツールチップのようなもの(1)）が出てきて、（そこ(1)）にマウスを乗せるとサイトへ飛べるようなものが作りたいです。 下記のURLなどを参考につくってみようとしたんですけど、うまく作れなかったので、 できるかたがいらっしゃいましたらよろしくおねがいします。 h ttp://jqueryfordesigners.com/demo/coda-bubble.html h ttp://www.vegabit.com/Examples/position-align.html ファイヤーフォックスのアドオンのリンク先のサイトプレビューができる「CoolPreviews」などはわかりやすいと思います。 ■←これにマウスをのせる。 すると、■の上のほうに▲が現れる。それにマウスをのせると自動で飛べるってのはできませんか？▲にマウスをのせなかったら二秒後くらいに消える。そういう設定が理想です。 ■ マウスをのせる ▲ ■ がでてくる ▲にマウスをのせると リンク先へ自動で飛べる みたいなのです。 標準のツールチップヒントなどはtitle属性を使うため、属性にさらに属性を組むことができない ですがoverLibというのがありました。 h ttp://www.bosrup.com/web/overlib/ h ttp://www.javable.jp/notes/webscripts/overlib.html しかし, htmlタグは組み込めるようですが、javascriptの関数はできないようです。 何か良いアイデアがありましたら教えてください。
- 締切済み
- JavaScript
- 画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化
画像にリンクを張って、その画像にマウスポインタが乗ったときに画像に変化が現れるようにしたいのですが方法がわかりません。どなた様かご指導のほどよろしくお願いいたします。 今回画像を以下に掲載させて頂きました。よろしければ見てみてください。 http://desktop10.web.fc2.com/11.gif 上記を見て頂くと、HOMEの下に赤い線が入っています。マウスポインタを合わせたときに上記のようにしたいと考えております。よってマウスポインタをあわせないときは、赤い線が表示されないようにしたいと考えております。このような場合はどのような記述が必要なのでしょうか？ 私はhtmlには以下のような記述をしました。 <a href="http://index.html"><img src="img/test.gif" alt="ボタン" width="115" height="48" /></a> どなた様か、ご指導のほどよろしくお願いします。
- ベストアンサー
- HTML
- Sleipnirの「LINK先をポップアップ表示」について
ツール→Sleipnirのオプションでスクリプトを有効にしてメニューの「スクリプト」を選択して「LINK先をポップアップ表示」をクリックしても何も変化がありません。 ファイル内容に下記記述がありましたが、この内容だけでは意味不明です。 やり方後存知の方、教えて頂ければ幸いです。 （フィル内容） LINK全てにtitle=urlを設定します。 これによりマウスをLINKに合わせるだけでURLがポップアップされます
- ベストアンサー
- ブラウザ
お礼
すごすぎます！！ 感動しました。完璧です。 実を言うと例に挙げたサイトのソースからjsファイル やらなんやらを取り出して使えるようになりました。 （理解はできてないまま） で二日も立って投稿のない記事だから削除しようと思ってきてみればとても短く洗練されたソースが書いてあって驚きです。あれがこれになるとは本当に驚きです。 本当にありがとうございます。 早速乗り換えさせていただきます。 私の努力はなんだったんだ・・・