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