Blogger: แสดงภาพเมื่อวางเมาส์เหนือข้อความ

การแสดงภาพเมื่อวางเมาส์เหนือข้อความ (blogger show picture on mouseover with javascript)  เหมือนตัวอย่างข้างล่างสามารถทำได้ดังนี้

ตัวอย่าง

Click Here To Show Image















ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่ 'การออกแบบ > องค์ประกอบของหน้า' ขั้นตอนที่ 2. ให้เลือกเพิ่ม Gadget แบบ 'HTML/จาวาสคริปต์' ขั้นตอนที่ 3. คัดลอกโค้ดด้านล่างนี้ใส่ลงไปในช่อง 'เนื้อหา' และกดปุ่ม 'บันทึก' ก็เสร็จแล้ว

<script language="Javascript">
<!--
function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
</script>
<style type="text/css">
#Style {
 position:absolute; 
 visibility:hidden;
 border:solid 1px #CCC;
 padding:5px;
}
</style>
<a href="http://www.maxlayout.com/" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s250/maxlayout-pencil-blogger-no-image-2013.png" />
</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

อธิบายเพิ่มเติม โดยตอนนำไปใช้เองก็อย่าลืมแก้ไขที่ตั้งรูปภาพตัวอย่างซึ่งค่าเริ่มต้นเขียนไว้ว่า
https://lh4.googleusercontent.com/-ncoy138bVHE/UQkijhj47rI/AAAAAAAAFJw/tMzcZiu7Nqg/s250/maxlayout-pencil-blogger-no-image-2013.png
ให้เป็นภาพใหม่ได้ตามต้องการ

Credit: http://www.wallpaperama.com/forums/how-to-show-picture-on-mouseover-with-javascript-tutorial-t6984.html

Post Status




0 ความคิดเห็น:

แสดงความคิดเห็น