<script language="javascript">
function ChangeImage (ImageName,FileName) {
document[ImageName].src = FileName;}
</script>
<center><A HREF="main.htm"
onMouseover="ChangeImage ('Image1','pic1.gif')"
onMouseout="ChangeImage ('Image1','pic2.gif')">
<IMG SRC="pic2.gif" NAME="Image1"></A></CENTER>
ภาพที่จะแสดงใช้ src ภาพที่จะเปลี่ยนใช้ data-other-src
ก๊อปจาก http://stackoverflow.com/quest…-the-image-source-using-jquery
<img data-other-src="big-zebra.jpg" src="small-cat.jpg">
<img data-other-src="huge-elephant.jpg" src="white-mouse.jpg">
<img data-other-src="friendly-bear.jpg" src="penguin.jpg">
$('img').bind('mouseenter mouseleave', function() {
$(this).attr({
src: $(this).attr('data-other-src')
, 'data-other-src': $(this).attr('src')
})
});
<div class="pic">
<a href="#"></a>
</div>
CSS
.pic a {
background-image: url('pic1.png');
}
.pic a:hover {
background-image: url('pic2.png);
}
ถ้าแบบว่า ใช้ภาพเดิม แต่เปลี่ยนแค่ความคมชัดความโปร่งใส อันนี้เห็นนิยมกัน ก็ใช้ opacity
HTML
<img class="logo" src="pic1.png" />
CSS
img.logo:hover { opacity:0.7;}
<img
id="targetImage"
src="src1"
onmouseover="document.getElementById("targetImage").src='src2' "
onmouseout="document.getElementById("targetImage").src='src1' "
>
หรือ
HTML
<img src="image1.jpg" border="0"
onmouseover="this.src='image2.jpg';"
onmouseout="this.src='image1.jpg';"
/>