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

解決済

質問者：trip-trip-trip
質問日時：2012/01/24 21:30
回答数：4件

少し、質問させてください。

　今、javascriptを使って、ロールオーバーする枠画像（リンク付）を作りました。
その枠画像の中にリンク（文字）を入れ、リンク文字にカーソルを合わせると
ロールオーバー処理後の枠画像に切り替わるようにしたいのですが
そういったことは可能でしょうか？

　ちなみに色々サイトを調べてみたところ、そのような場合
初めから、枠画像の中に文字を入れてロールオーバー
させていました。
　私はそうではなしに、上記の方法でやりたいと思っているのですが、
お力を貸してください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： LancerVII
回答日時：2012/01/27 09:48

こんにちは。

>細かい間違いもいくつかありますが
いや、そんなってわけでもないです。
<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-transitio …
<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>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
無事に画像の切り替わりができました。
感謝感謝です^^

.link > imgのほうはできませんでしたが、
たぶん私がhtml4.0を使ってるからだと
勝手に解釈しました。

通報する

お礼日時：2012/01/28 12:59

No.3

回答者： LancerVII
回答日時：2012/01/26 09:00

こんにちは。

情報ありがとうございました。
まず、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-transitio …
<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>

- 0
- 件

通報する

この回答へのお礼

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さんに対して失礼だと思いますが、
　　お願いできないでしょうか？
　　　　
　

通報する

お礼日時：2012/01/26 20:31

No.2

回答者： LancerVII
回答日時：2012/01/25 21:36

こんにちは。

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

入れたいソースを見せて貰えればもっと的確なアドバイスが出来るかもしれません。

- 0
- 件

通報する

この回答へのお礼

こんばんわ。すいません。
ソースはこんな感じです。

<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-ja …
こちらにあるサイトで、image.pngの画像にカーソルを合わせると
image_on.pngのように(name_on)の画像に切り替えるjavascriptです。

現状ですが、上記のhtmlの場合、枠画像にカーソルを合わせると、
image_on.pngに切り替わりますが、枠画像の中心にあるリンク文字に
カーソルを合わせると、image.pngに戻ってしまいます。

で、今回質問させていただいたのが、リンク文字および枠画像の両方とも
カーソルを合わせているときにはimage_on.pngに切り替えることが
できるのかということです。

この説明で分っていただけるでしょうか？
長文ですが、よろしくお願いします。

通報する

お礼日時：2012/01/25 23:57

No.1

回答者： LancerVII
回答日時：2012/01/25 14:03

こんにちは。

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-transitio …
<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>

- 0
- 件

通報する

この回答へのお礼

早速の回答ありがとうございます。

　javascript初心者なので、LancerVIIさんの
プログラムを理解できませんでした。すいません。
一応動かしてみたいと思って、htmlにコピーさせて頂いて
動作させてみたのですが、うまくいきませんでした。

　上記のプログラムで、変更させるところはmouseの所の
画像アドレスとhoverの所の画像アドレスだけでよろしいでしょうか？

通報する

お礼日時：2012/01/25 19:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！