ベストアンサー

javascriptでリンクとロールオーバー

2012/01/24 21:30

少し、質問させてください。　今、javascriptを使って、ロールオーバーする枠画像（リンク付）を作りました。その枠画像の中にリンク（文字）を入れ、リンク文字にカーソルを合わせるとロールオーバー処理後の枠画像に切り替わるようにしたいのですがそういったことは可能でしょうか？　ちなみに色々サイトを調べてみたところ、そのような場合初めから、枠画像の中に文字を入れてロールオーバーさせていました。　私はそうではなしに、上記の方法でやりたいと思っているのですが、お力を貸してください。

trip-trip-trip
お礼率100% (16/16)

JavaScript
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2012/01/27 09:48 回答No.4

こんにちは。 >細かい間違いもいくつかありますがいや、そんなってわけでもないです。 <html>タグが2つあったり<head>の中身等です。コピペミスかもしれませんが。 <a href="link1.html" class="link"> <span class="link">リンク名１</span> <img src="./img/off.png" /> はCSSにて重ねています。CSS内の.llink > .linkの部分です。 ><a href="link1.html">リンク名１ ><img src="./img/off.png" /> >の場合にリンク文字と画像を重ねる方法を上で説明したとおり.link内の.linkの位置を調節して中に入れています。リンク名1に対して.linkを付けないと面倒なので付けています。他に方法はあるのかもしれませんが以下のようなCSSになってしまい、面倒です。 .link { position:relative; display:block; width:95px; height:35px; padding-top:30px; padding-left:25px; } .link > img { position:relative; top:-50px; left:-25px; z-index:-1; } >ただ、１つだけ問題なのが、枠画像(1)offも枠画像(2)offも枠画像(1)_onに切り替わってしまいます。 >それぞれの番号の_onに変えることはできますか？以下のサンプルにて対応してみました。一応何をしているかの説明をするとaタグのlinkクラス全てに対して・マウスオーバー時.link内の画像にもともと設定されている画像パスのoff.pngをon.pngに変更した上で画像を切り替え・マウスアウト時.kink内の画像にもともと設定されている画像パスで画像を切り替えよってx_off.pngに対するx_on.pngを用意すればその画像に切り替わる ※x_off.pngに対してx_on.pngというファイル名でx_off.pngとx_on.pngが同じディレクトリに用意されている前提です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascriptでリンクとロールオーバー</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('a.link').each ( function() { var imgObj = $(this).find('img'); var imgSrc = imgObj.attr('src'); $(this).mouseover ( function() { imgObj.attr ( 'src', imgSrc.replace ( /off.png/, 'on.png' ) ); }).mouseout ( function() { imgObj.attr ( 'src', imgSrc ); }) }); }); </script> <style type="text/css"> img { border:0 } .link { position:relative; } .link > .link { position:absolute;top:-40px;left:20px; } </style> </head> <body> <a href="link1.html" class="link"> <span class="link">リンク名１</span> <img src="./img/0_off.png" /> </a> <br /> <a href="link2.html" class="link"> <span class="link">リンク名2</span> <img src="./img/1_off.png" /> </a> <br /> <a href="link3.html" class="link"> <span class="link">リンク名3</span> <img src="./img/2_off.png" /> </a> </body> </html>

質問者

お礼 2012/01/28 12:59

ありがとうございます。無事に画像の切り替わりができました。感謝感謝です^^ .link > imgのほうはできませんでしたが、たぶん私がhtml4.0を使ってるからだと勝手に解釈しました。

その他の回答 (3)

LancerVII
ベストアンサー率51% (1060/2054)

2012/01/26 09:00 回答No.3

こんにちは。情報ありがとうございました。まず、rollover.jsを同時に使用していると私の挙げたサンプルは動かないと思います。 rollover.jsを利用するのであれば違ったカスタマイズが必要になると思います。 >で、今回質問させていただいたのが、リンク文字および枠画像の両方とも >カーソルを合わせているときにはimage_on.pngに切り替えることが >できるのかということです。画像部分とリンク部分両方で切り替われば良いのですね。 HTMLを拝見いたしました。細かい間違いもいくつかありますが、 <a href="リンク先(1)" class="クラス名" >　　　 <img src ="../../枠画像(1)url" class="rollover"></a>　//リンク枠画像(1) <a href="リンク先(1)" class="クラス名">リンク名(1)</a>　 aタグを二つにわけている理由は何かありますか？またどのようなCSSで枠の中心へ配置していますか。以下のようにまとめると簡単なロジックで動作させることが可能ですがいかがでしょうか。・※start～※endは必ず必要です。画像パスは書き換えてください。rollover.jsは使っていません。動作はaタグのlinkクラスが付与されている中にある画像を切り替える動作です。なんらかの都合でaタグをわけなくてはいけない等あるのであれば、ソースを全てご提示下さい。 (リンク先やアドレスは伏せて貰って良いですが、class名やid等は出来る限り伏せないで下さい) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascriptでリンクとロールオーバー</title> ※start <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('a.link').mouseover ( function() { $(this).find('img').attr ( 'src', './img/on.png' ); }).mouseout ( function() { $(this).find('img').attr ( 'src', './img/off.png' ); }); }); </script> ※end <style type="text/css"> img { border:0 } .link { position:relative; } .link > .link { position:absolute;top:-40px;left:20px; } .mouse { width:100px; height:60px; padding:10px; background:url(./img/off.png) no-repeat; } .hover { background:url(./img/on.png) no-repeat; } </style> </head> <body> <a href="link1.html" class="link"> <span class="link">リンク名１</span> <img src="./img/off.png" /> </a> <br /> <a href="link2.html" class="link"> <span class="link">リンク名2</span> <img src="./img/off.png" /> </a> </body> </html>

質問者

お礼 2012/01/26 20:31

LancerVIIさん、回答ありがとうございます。　提示していただいたhtmlを試させて頂いた所文字でも枠画像でも、ロールオーバーすることができました。　ありがとうございます。　ただ、１つだけ問題なのが、枠画像(1)offも枠画像(2)offも枠画像(1)_onに切り替わってしまいます。それぞれの番号の_onに変えることはできますか？　＞細かい間違いもいくつかありますが　そんなにあるのですか・・・・もっと勉強します。　＞aタグを二つにわけている理由は何かありますか？　　またどのようなCSSで枠の中心へ配置していますか？　　自分の考え（思い違いだと思いますが）　　<a href="link1.html" class="link"> 　　<span class="link">リンク名１</span> 　　<img src="./img/off.png" /> 　　　　このような場合、リンク文字の後ろに画像がきて　　重ねることができなかったので、２つに分けて、　　それぞれCSSで位置を決めています。　　基本的にCSSは{position:absolute; top:200px; left:250px; } でリンク文字とリンク画像を絶対位置にして重ねています。　　でも、LancerVIIさんのhtmlは　　ちゃんと重なってますね。　　　<a href="link1.html">リンク名１ <img src="./img/off.png" /> 　　の場合にリンク文字と画像を重ねる方法を　　教えていただいてよろしいでしょうか？　　タイトルとは関係のない質問なので、　　LancerVIIさんに対して失礼だと思いますが、　　お願いできないでしょうか？　　　　　

LancerVII
ベストアンサー率51% (1060/2054)

2012/01/25 21:36 回答No.2

こんにちは。そのまま全部コピーしたのであれば動くはずですが、サイズ等はこのサンプル用になっていますのでうまく見えないかもしれません。一部を抜き出して自分のhtmlに入れたのであれば抜けがあるのかもしれません。入れたいソースを見せて貰えればもっと的確なアドバイスが出来るかもしれません。

質問者

お礼 2012/01/25 23:57

こんばんわ。すいません。ソースはこんな感じです。 <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <script type="text/javascript" src="../../rollover.js" charset="utf-8"></script> <head> </head> <body> <a href="リンク先(1)" class="クラス名" >　　　 <img src ="../../枠画像(1)url" class="rollover"></a>　//リンク枠画像(1) <a href="リンク先(1)" class="クラス名">リンク名(1)</a>　 //リンク文字(1)（枠画像(1)の中心に位置する） <a href="リンク先(2)" class="クラス名" >　　　 <img src ="../../枠画像(2)url" class="rollover"></a>　//リンク枠画像(2) <a href="リンク先(2)" class="クラス名">リンク名(2)</a> //リンク文字（枠画像(2)の中心に位置する） </body> </html> ここにあるrollover.jsは http://css-eblog.com/javascript-link/rollover-javascript.html こちらにあるサイトで、image.pngの画像にカーソルを合わせると image_on.pngのように(name_on)の画像に切り替えるjavascriptです。現状ですが、上記のhtmlの場合、枠画像にカーソルを合わせると、 image_on.pngに切り替わりますが、枠画像の中心にあるリンク文字にカーソルを合わせると、image.pngに戻ってしまいます。で、今回質問させていただいたのが、リンク文字および枠画像の両方ともカーソルを合わせているときにはimage_on.pngに切り替えることができるのかということです。この説明で分っていただけるでしょうか？長文ですが、よろしくお願いします。

LancerVII
ベストアンサー率51% (1060/2054)

2012/01/25 14:03 回答No.1

こんにちは。 jQueryというものを利用して実装してみました。恐らくこんな感じだと思いますが違っていたらすいません。 <div class="mouse">にoff.pngを設定します。その中にあるaタグに対してカーソルが来た場合に一つ上に対してhoverクラスを追加する処理を設定します。 hoverクラスはon.pngを背景画像にします。 aタグよりカーソルが外れた場合はhoverクラスを削除します。上記のような動きです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascriptでリンクとロールオーバー</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('.mouse > a').mouseover ( function() { $(this).parent().addClass ( 'hover' ); }).mouseout ( function() { $(this).parent().removeClass ( 'hover' ); }) }); </script> <style type="text/css"> .mouse { width:100px; height:60px; padding:10px; background:url(./img/off.png) no-repeat; } .hover { background:url(./img/on.png) no-repeat; } </style> </head> <body> <div class="mouse"> <a href="#">リンク文字</a> </div> <div class="mouse"> <a href="#">リンク文字</a> </div> <div class="mouse"> <a href="#">リンク文字</a> </div> <div class="mouse"> <a href="#">リンク文字</a> </div> </body> </html>

質問者

お礼 2012/01/25 19:38

早速の回答ありがとうございます。　javascript初心者なので、LancerVIIさんのプログラムを理解できませんでした。すいません。一応動かしてみたいと思って、htmlにコピーさせて頂いて動作させてみたのですが、うまくいきませんでした。　上記のプログラムで、変更させるところはmouseの所の画像アドレスとhoverの所の画像アドレスだけでよろしいでしょうか？

javascriptでリンクとロールオーバー