- ベストアンサー
JavaScriptクリックした画像を変えたいです。
JavaScriptで一度画像をクリックすると画像が変わりそのご画像をクリック できないようにするにはどうしたら良いでしょうか？ A画像をクリックするとB画像に代わりB画像はクリック出来ないように なります。 どうぞよろしくお願いします。
- webschool
- お礼率70% (7/10)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでいかがでしょう。 <html> <head> <script type="text/javascript"><!-- function clickImg( img ) { var arraySrc = img.src.split( '/' ); var src = arraySrc[arraySrc.length - 1]; if( src == "a.jpg" ) { document.cookie = "click=1;"; img.src = "b.jpg"; img.style.cursor = "default"; } } function init() { if( document.cookie ) { var img = document.getElementById( "img1" ); document.getElementById( "img1" ).src = "b.jpg"; img.style.cursor = "default"; } } //--></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>
その他の回答 (2)
- oka5130
- ベストアンサー率66% (35/53)
a.jpgをクリックしたことをクッキーに書き込んでおいて、 ページが読み込まれる時にクッキーを読み込んでチェックすれば実現可能です。 a.jpgをクリックした時（onclick）に document.cookie = "click=1;" と書いてクッキーにクリックされたことを書き込んでおいて、 ページを読み込んだ時に if( document.cookie ) { // 画像のsrc属性の値をb.jpgにする } が実行されるようにしておけばとりあえず動くと思います。 「とりあえず」というのは、本来ならクッキー名が"click"の値が"1"かどうかを判定するif文を書くべきですが、 面倒なので上記のようにしました。 クッキーに他の情報も書き込んだりする場合は、きっちり書かなくてはなりません。 クッキーの読み書きについては以下のサイトをご覧下さい。 http://www016.upp.so-net.ne.jp/masuda2/js/js011.html
お礼
ご回答ありがとうございます。 この方法でできると思います。ただ試してみましたがうまくいきませんでした。 こちらの知識不足ですみませんがどのように記述すれば動くかを教えて頂けないでしょうか。 宜しくお願いします。
- xitoaki
- ベストアンサー率35% (36/101)
<img src="a.jpg" onClick="JavaScript:this.src='b.jpg';"> でしょうか。 (面倒なのでタグ内にスクリプトを記述していますが…) クリックするたびにb.jpgが呼び出されるのが嫌であれば、 条件文 if(this.src=='a.jpg') を入れればいいでしょう。 カーソルも変えたければ、 <img src="a.jpg" style="cousor:pointer;" onClick="JavaScript: if(this.src=='a.jpg') { this.src='b.jpg'; this.style.sursor=default; } "> といった感じでしょうか。 動作確認していないので、thisあたりの記述が違うかもしれませんが こんな感じでしょう。
お礼
こちらをやりたいと思っていました。 ありがとうございます！ ご質問ですがa.jpgをクリックしてb.jpgに切り替わりクリック できないようになるまでは良いのですが、 ブラウザーを更新したり他のページから戻ってくると再度a.jpgが 現れないでb.jpgのままにするにはどうしたら良いでしょうか？ つまり一度クリックした画像がブラウザーを更新してもこの画像は クリックしていますよ、ということが分るようにしたいと思います。 宜しくお願いします。
お礼
oka5130さん 出来ました！！本当にありがとうございます。 こんなに教えて頂きなんとお礼を申したらよいのか ありがとうございます。 今後勉強に精進したいと思います。 本当にありがとうございました。