คำสั่งHTMLรูปภาพทำไงครับ เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน2รู

[ตงฟางปุ๊ป้าย]

ขอสอบถามเซียนHTMLหน่อยครับ
คำสั่งHTMLรูปภาพทำไงครับ  เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน(2รูป)  และเมื่อคลิกแล้วให้LinkไปURLอื่นๆได้ด้วย   เขียนยังไงครับ

ขอบคุณครับ   

[MapTwoZa]

<img
id="targetImage"
src="src1"
onmouseover="document.getElementById("targetImage").src='src2' "
onmouseout="document.getElementById("targetImage").src='src1' "
>
ประมาณนี้

[newbie-pro]

ทำใน ดรีมแล้วเอามาวางเลยครับ ง่ายดี

[Maxio]

ใช้ แท็ก a ช่วย แล้วใช้ background-image เอาประมาณนี้มั้งครับ

HTML

โค้ด เลือก ขยาย


<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;}


[ตงฟางปุ๊ป้าย]

ขอบคุณมากครับ... +1คอมเม้นดี   เดี๋ยวไปลองดูก่อน   

[bomie]

 ภาพที่จะแสดงใช้ src ภาพที่จะเปลี่ยนใช้ data-other-src

ก๊อปจาก http://stackoverflow.com/questions/540349/change-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')
    })
});