画像の切り替わり

質問

http://www.neospad.co.jp/
のようなボタンを押すと画像が切り替わるようには
どうしたらいいのでしょうか？

回答No.5

yyr446 · ベストアンサー

例のようにマウスを置くたびに何度も切り替わる
ようにはならないでしょうか？
=>マウスを置くたびでしたか．．．
以下のサンプルが参考になれば幸いです。

<input type="image" id="my_button" src="/image1.png" >
のボタン（画像ボタン）と
<img id="target" src="/image1.png"></img>
の画像があったとして、両方マウスを置くたびにimage2.pngに変わる
使い方
my_callback=function(data){
document.getElementById("target").setAttribute("src",data);
}
var myButton=new toggle_button(document.getElementById("my_button"),
"/image1.png","/image2.png", my_callback);
と記述できる。

toggle_buttonクラスは、
function toggle_button(elm,img1,img2,func){
this.node=elm;
this.img1=img1;
this.img2=img2;
this.callback=(function(func){
return func;
})(func);
this.toggle=function(img1,img2,func){
return function(eve){
var t=eve?eve.target:event.srcElement;
if(t.getAttribute("src")==img1){
t.setAttribute("src",img2);
func(img2);
}else{
t.setAttribute("src",img1);
func(img1);
}
}
}
this.node.onmouseover=this.toggle(this.img1,this.img2,this.callback);
this.node.onmouseout=this.toggle(this.img1,this.img2,this.callback);
}

お礼

yyr446様
すみません、ご返答が遅れまして、いただきましたソースコードありがとうございます。
出来ました。

回答No.4

yyr446

「のような」が解りません.
ご提示のサイトだと、
例えば「リビング＆キッチン」をマウスオーバーすると、
「リビング＆キッチン」自身のボタン画像に色がつき、離れると
もとに戻りますが、これの事を言ってたのですか？
　右の方のReformの下にある写真画像が切り替わるのを思ってたのですが...
そっちは基にもどりませんよねえ。
　そのラベルって何ですか？

それから、画像ファイルを切り替える方法だと、その都度ロードするの
で、表示有無の切り替えの方がようでしょう。

回答No.3

babu_baboo

そのラベルは、いまもひつようですか？

回答No.2

yyr446

失礼、ボタンでしたね。
<button onclick='javascript: document.getElementById("hoge").setAttribute("src","fuga");'>切り替え</button>

回答No.1

yyr446

「のような」が解りませんが、
単純にjavascriptで画像を切り替えるだけなら。
<img id="hoge" src="hoge">
に対して
<span onclick='javascript: document.getElementById("hoge").setAttribute("src","fuga");'>切り替え</span>
※hogeとfugaは画像のURL
まずはこれぐらいから

補足

yyr446さんありがとうございます。

示されましたスクリプトをやってみましたが、
ボタンを押して１回切り替えだけのようです。

例のようにマウスを置くたびに何度も切り替わる
ようにはならないでしょうか？
お手数掛けます。