お蔵入り

Ads By Google

にこまる

写真の上にマウスを置いて、複数枚写真が変化する方法を教えてください。

ブログで、写真の上にマウスを乗せると写真が切り替わるというのがありますが（コレはナレッジにありました）、とあるブログで最初の写真Ａ→（オンマウスで）Ｂ→Ｃ→Ｄという風になっているのを見たことがあります。
このように変わる写真を複数枚にする方法を教えてください。
よろしくお願いします。

2007-10-29 22:03の質問

違反を報告する

ブログ画像写真オンマウス

ブログ
ブログのかわいいポータルサイト「ヤプログ！」
www.yaplog.jp/

この質問は、３０日間解決しなかったために自動的に質問が一旦閉じられました。

回答(1)

1.

2007-10-29 22:43:52

NIPO Certification Authority, Inc.

ロールオーバーの応用ですね。

まず、script直下に、

<script>
var i=0;
var file=new Array('A.jpg', 'B.jpg', 'C.jpg', 'D.jpg');
</script>

です。
次に関数を。さっきのscript内で結構です。

function change_img(){
i++;
if(i==5)i=0;
document.xxx.src=file[i];
}

xxxの部分には、画像のname属性の値が入ります。
あとは、

img src="A.jpg" name="xxx" onMouseOver="change_img();"

完璧です。

自信度 : 自信あり回答レベル : 回答

違反を報告する

Ads By Google

コメント(5)

コメントする

#1. オニキス

2007-10-30 04:20:27

>>1
×i==5
　→　i==file.length-1
×document.xxx.src
　→　document.getElementById("xxx").src
×（↑の都合タグの方も変更）
　→　<img src="A.jpg" id="xxx" onMouseOver="change_img();">

違反を報告する

#2. NIPO Certification Authority, Inc.

2007-10-30 21:43:26

>>#1
・あ、iをそうしたほうが応用が利きますね！これは落としていました。
・やはりidを使いますか。長くなるのでやめたのはまずかったでしょうか。

違反を報告する

#3. オニキス

2007-10-30 21:57:37

>>#2
＞i
応用上もそうですが、回答１のコードではfileの要素は4つなので、file[0]～[3]しか中味がないのでは？
＞id
name属性をdocument.xxxみたいに参照できるのは、IEだけなのでは？

あと、グローバルな変数名にiとかfileとかはよくないです。

違反を報告する

#4. にこまる

2007-11-16 22:16:28

>>1
ご回答ありがとうございます。
やってみたのですが、うまくできないのですが・・・
どこが間違っているのか、見ていただけませんか?

<script>
var i=0;
var file=new Array('http://image.blog.livedoor.jp/bluemoonrose/imgs/8/...', 'http://image.blog.livedoor.jp/bluemoonrose/imgs/2/...', 'http://image.blog.livedoor.jp/bluemoonrose/imgs/0/...');

function change_img(){
i++;
if(i==file.length-1)i=0;
document.getElementById("xxx").src=file[i];
}
</script>
<img src="http://image.blog.livedoor.jp/bluemoonrose/imgs/8/...; id="xxx" onMouseOver="change_img();">