คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<tite> แท็บใช้การแปลงรูปภาพ IMG </title>
<style type = "text/css">
#Main {ความสูง: 420px;
#ศีรษะ {{
ความกว้าง: 400px;
ความสูง: 52px;
โพสท่า: สัมบูรณ์;
ซ้าย: 10px;
ด้านบน: -12px;
พื้นหลังสี: สีเขียว;
-
#head li {float: ซ้าย;
#เนื้อหา {
ความกว้าง: 400px;
ความสูง: 350px;
พื้นหลังสี:#fc6;
TEXT-ALIGN: CENTER;
โพสท่า: สัมบูรณ์;
ด้านบน: 36px;
ซ้าย: 10px;
-
</style>
</head>
<body>
<div id = "main">
<div id = "head">
<ul>
<li id = "tab1" onMouseOver = "แสดง (1)" style = "พื้นหลังสี: #fff"> รูปภาพ 1 </li>
<li id = "tab2" onMouseOver = "แสดง (2)"> รูปภาพ 2 </li>
<li id = "tab3" onMouseOver = "แสดง (3)"> รูปภาพ 3 </li>
<li id = "tab4" onMouseOver = "แสดง (4)"> รูปภาพ 4 </li>
</ul>
</div>
<div id = "เนื้อหา">
<p id = "p1"> <img src = "รูปภาพ 0"/> </p>
<p id = "p2" style = "จอแสดงผล: ไม่มี;"> <img src = "รูปภาพ 1"> </p>
<p id = "p3" style = "จอแสดงผล: ไม่มี;"> <img src = "รูปภาพ 2"/> </p>
<p id = "p4" style = "แสดง: ไม่มี;"> <img src = "รูปภาพ 3"/> </p>
</div>
</div>
</body>
<script>
ฟังก์ชั่นแสดง (n) {
สำหรับ (var i = 1; i <= 4; i ++) {
document.getElementById ("tab"+i) .style.backgroundColor = 'Green';
document.getElementById ("p"+i) .style.display = 'ไม่มี';
// แสดงการควบคุมเนื้อหาที่ซ่อนอยู่ของเนื้อหาไม่ควรซ่อนไว้
-
document.getElementById ("tab"+n) .style.backgroundColor = 'White';
document.getElementById ("p"+n) .style.display = 'block';
// เมื่อบล็อกสามารถแสดงที่ซ่อนอยู่ได้
-
</script>
</html>