如何在鼠標懸停上更改圖片？

-3

我想知道是否有任何方法可以在JavaScript，PHP或HTML（或CSS）上的mouseover上更改圖片。我這樣做是一個'喜歡'按鈕，並將需要兩個不同的URL來從數據庫的不同反應（雖然我會排序）。在此先感謝。如何在鼠標懸停上更改圖片？

來源

2014-04-03 JThistle

是的，你需要改變src屬性如果圖像 – juvian

@juvian你會怎麼做，在上述任何語言嗎？ – JThistle

你甚至嘗試谷歌這個？ – Arbitur

基本的JavaScript：

<img src="image_1.png" alt="Image" onmouseover="javascript:this.src='image_2.png';" onmouseout="javascript:this.src='image_1.png';" />

來源

2014-04-03 17:22:37 SauriolJf

小調：'javascript：'在事件處理程序的開始處是不必要的 - 它只需要'href'屬性 – freefaller

謝謝！這很好。 – JThistle

下面是一個使用JavaScript的香草方式：

HTML：

<img id="tychus" src='http://img1.wikia.nocookie.net/__cb20080516020746/starcraft/images/4/4e/TychusFindlay_SC2_CineTrailer3.jpg' height="200" width="400"/>

的JavaScript：

var pic = document.getElementById('tychus'); 
pic.addEventListener('mouseover',function() {  this.setAttribute('src','http://fc00.deviantart.net/fs18/f/2007/155/f/1/Queen_of_Blades_by_OmeN2501.jpg'); 
}); 
pic.addEventListener('mouseout',function() { 
    this.setAttribute('src','http://img1.wikia.nocookie.net/__cb20080516020746/starcraft/images/4/4e/TychusFindlay_SC2_CineTrailer3.jpg'); 
});

這適用於鼠標懸停和鼠標移出。

here is an example fiddle

來源

2014-04-03 17:30:22 13ruce1337

「簡單」？這顯然是我以前沒有意識到的這個詞的奇怪用法（版權Douglas Adams）。 'addEventListener'不支持跨瀏覽器（例如IE8或IE9兼容模式） – freefaller

@freefaller很好的瞭解。我想我對簡單的定義並不簡單。 – 13ruce1337

他們都做同樣的工作，第一個更簡單。 – JThistle

如何在鼠標懸停上更改圖片？

回答

相關問題