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

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: ตงฟางปุ๊ป้าย ที่ 10 ธันวาคม 2012, 13:06:19

หัวข้อ: คำสั่งHTMLรูปภาพทำไงครับ เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน2รู
เริ่มหัวข้อโดย: ตงฟางปุ๊ป้าย ที่ 10 ธันวาคม 2012, 13:06:19

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

ขอบคุณครับ :wanwan017:

หัวข้อ: Re: คำสั่งHTMLรูปภาพทำไงครับ เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน2รู
เริ่มหัวข้อโดย: MapTwoZa ที่ 10 ธันวาคม 2012, 13:17:13

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

หัวข้อ: Re: คำสั่งHTMLรูปภาพทำไงครับ เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน2รู
เริ่มหัวข้อโดย: newbie-pro ที่ 10 ธันวาคม 2012, 13:19:02

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

หัวข้อ: Re: คำสั่งHTMLรูปภาพทำไงครับ เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน2รู
เริ่มหัวข้อโดย: Maxio ที่ 10 ธันวาคม 2012, 13:22:14

ใช้ แท็ก 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;}

หัวข้อ: Re: คำสั่งHTMLรูปภาพทำไงครับ เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน2รู
เริ่มหัวข้อโดย: ตงฟางปุ๊ป้าย ที่ 10 ธันวาคม 2012, 13:33:33

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

หัวข้อ: Re: คำสั่งHTMLรูปภาพทำไงครับ เวลาเอาเม้าส์ชี้แล้วให้รูปเปลี่ยนเป็นรูปอื่นสลับกัน2รู
เริ่มหัวข้อโดย: bomie ที่ 10 ธันวาคม 2012, 14:35:21

ภาพที่จะแสดงใช้ 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')
})
});

SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com