لقد استخدمت وقت فراغي لكتابة مثال على تصفح صورة واحدة عندما كنت أتعلم JavaScript:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd html 4.0 transitional // en">
<html>
<head>
<title> معرض الصور </title>
<meta name = "generator" content = "editPlus">
<meta name = "المؤلف" content = "">
<meta name = "الكلمات الرئيسية" content = "">
</head>
<script language = "javaScript">
وظائف العرض (الذي) {
var source = thatpic.getAttribute ("HREF") ؛ // احصل على قيمة السمة HREF للعنصر الذي تم النقر عليه حاليًا
var leacholder = document.getElementById ("leacholder") ؛ // احصل على الهدف
leactolder.setattribute ("SRC" ، Source) ؛ // قم بتعيين السمة الهدف SRC لتغيير الصورة
var text = thatpic.getAttribute ("title") ؛ // احصل على قيمة عنوان السمة للعنصر الذي تم النقر عليه حاليًا
var description = document.getElementById ("الوصف") ؛
الوصف. firstchild.nodevalue = text ؛ // تعيين عنوان عنصر النقر إلى <p>
// أو الوصف.
}
</script>
<body>
<h1> معرض صور JavaScript </h1>
<ul>
<li>
<a href = "الصور/الألعاب النارية
</li>
<li>
<a href = "images/coffee.jpg" onClick = "showpic (this) ؛ return false ؛"> picture 2 </a>
</li>
<li>
<a href = "images/rose.jpg" onClick = "showpic (this) ؛ return false ؛"> pic three </a>
</li>
<li>
<a href = "الصور/bigben.jpg" onClick = "showpic (this) ؛ return false ؛"> الصورة 4 </a>
</li>
</ul>
<img id = "placeholder" src = "Images /placeholder.gif" />
<p id = "description"> حدد الصورة. </p>
</body>
</html>
يلاحظ:
يجب أن نولي اهتمامًا لإضافة الأحداث إلى العلامة <a> </a> لتجنب جعلها تؤدي القفزات.
الحل: تُرجع الوظيفة كاذبة ؛ يعتقد الحدث أنه لم يتم النقر على الرابط.
إذا كانت قيمة HREF هي JavaScript: void (0) ؛ كما يمكن أن لا القفز.