Ketika mouse meluncur di atas gambar, pratinjau gambar besar akan muncul, dan akan ada teks pengantar di bawah gambar besar.
Salinan kode adalah sebagai berikut:
< %@ Page language = "c#" autoeventwireup = "true" codefile = "gambar prompt efek.aspx.cs" mewariskan = "efek prompt gambar" %>
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "konten tipe" content = "text/html; charset = utf-8"/>
<title> </title>
<type style = "text/css">
.A A{
Lebar: 88px;
Tinggi: 100px;
}
</tyle>
<script type = "text/javascript" src = "Scripts/jQuery-1.7.1.js"> </ptript>
<type skrip = "Teks/JavaScript">
$ (function () {
var x = 10;
var y = 20;
$ ("a.tooltip"). mouseover (fungsi (e) {
this.mytitle = this.title;
this.title = "";
var imgtitle = this.mytitle? "<br/>" + this.mytitle: "";
var tooltip = "<div id = 'tooltip'> <img src = '" + this.href + "' alt = 'Product Preview Picture'/>" + imgtitle + "</div>"; > Elemen
$ ("Body"). Tambahkan (tooltip);
$ ("#tooltip")
.css ({
"Top": (e.pagey + y) + "px",
"Kiri": (E.Pagex + x) + "PX"
}). Show ("Fast");
}). mouseout (function () {
this.title = this.mytitle;
$ ("#Tooltip"). Ramping ();
}). mouseMove (function (e) {
$ ("#tooltip")
.css ({
"Top": (e.pagey + y) + "px",
"Kiri": (E.Pagex + x) + "PX"
});
});
})
</script>
</head>
<body>
<Form id = "Form1" runat = "server">
<div>
<a href = "gambar/4.jpg" class = "tooltip" title = "shoes"> <img src = "gambar/4.jpg"/> </a>
<a href = "gambar/5.jpg" class = "tooltip" title = "Gloves"> <img src = "gambar/5.jpg"/> </a>
<a href = "gambar/6.jpg" class = "tooltip" title = "rok"> <img src = "gambar/6.jpg"/> </a>
<a href = "gambar/7.jpg" class = "tooltip" title = "bag"> <img src = "gambar/7.jpg"/> </a>
</div>
</form>
</body>
</html>