クリックしたときのボタンの画像を変更し、クリックを離したときに元に戻すことを検討しています。現在、フラットなイメージを持っています。ボタンを押したように見えるように内側の影のあるイメージに変更したいのですが、マウスのクリックを離すと元のフラットなイメージに戻ります。onmouseup を試しましたが、使い方が間違っていると思います。"item"
と がクリックされたときに画像を保持したいのですが、"item2"
それは正しく機能します。ただし"item3"
、マウスを離したときに元に戻すか、クリックした直後に元に戻す必要があります。
(編集: 私は JavaScript を初めて使用しますonmouseup
。解決策である必要はありません。誰かがこれを行う関数を作成する方法を説明できれば、それは素晴らしいことです。)
JS:
var onImgStp= "images/stop.png";
var onImgPnk= "images/pink.png";
var onImgMut= "images/mute.png";
var offImg= "images/green.png";
var offImgStp= "images/stop2.png";
HTML:
<img class="item" src="images/pink.png" onclick="manage(1); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(2); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(3); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(4); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(5); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(6); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(7); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item" src="images/pink.png" onclick="manage(8); this.src = (this.src.endsWith(offImg)? onImgPnk : offImg);"/>
<img class="item2" src="images/mute.png" onclick="this.src = (this.src.endsWith(offImg)? onImgMut : offImg);"/>
<img class="item3" src="images/stop.png" onmouseup="this.src = (this.src.endsWith(offImgStp)? onImgStp : offImgStp);"/>