عندما تنزلق الماوس فوق الصورة ، ستظهر معاينة الصورة الكبيرة ، وستكون هناك نص تمهيدي أسفل الصورة الكبيرة.
نسخة الكود كما يلي:
أقل
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/>
<title> </title>
<type type = "text/css">
.AA {
العرض: 88 بكسل ؛
الارتفاع: 100px ؛
}
</style>
<script type = "text/javaScript" src = "scripts/jQuery-1.7.1.js"> </script>
<script type = "text/javaScript">
$ (function () {
var x = 10 ؛
var y = 20 ؛
$ ("A.Tooltip"). mouseover (وظيفة (e) {
this.mytitle = this.title ؛
this.title = "" ؛
var imgtitle = this.mytitle؟
var tooltip = "<div id = 'tooltip'> <img src = '" + this.href + "' alt = 'Product Perfect Picture'/>" + imgtitle + "</div>" ؛ > العناصر
$ ("الجسم"). إلحاق (Tooltip) ؛
$ ("#Tooltip")
.CSS ({
"TOP": (E.pagey + y) + "PX" ،
"اليسار": (E.Pagex + X) + "PX"
}). show ("Fast") ؛
}). mouseout (function () {
this.title = this.mytitle ؛
$ ("#Tooltip"). إزالة () ؛
}). mousemove (وظيفة (e) {
$ ("#Tooltip")
.CSS ({
"TOP": (E.pagey + y) + "PX" ،
"اليسار": (E.Pagex + X) + "PX"
}) ؛
}) ؛
})
</script>
</head>
<body>
<form id = "form1" runat = "server">
<viv>
<a href = "image/4.jpg" class = "tooltip" title = "shoes"> <img src = "image/4.jpg"/> </a>
<a href = "image/5.jpg" class = "tooltip" title = "gloves"> <img src = "image/5.jpg"/> </a>
<a href = "image/6.jpg" class = "tooltip" title = "skirt"> <img src = "image/6.jpg"/> </a>
<a href = "image/7.jpg" class = "tooltip" title = "bag"> <img src = "image/7.jpg"/> </a>
</div>
</form>
</body>
</html>