เมื่อเมาส์เลื่อนผ่านรูปภาพภาพตัวอย่างขนาดใหญ่จะปรากฏขึ้นและจะมีข้อความเบื้องต้นใต้ภาพขนาดใหญ่
การคัดลอกรหัสมีดังนี้:
< %@ page language = "c#" autoEventWireUp = "true" codeFile = "Emage Effect.aspx.cs" สืบทอด = "Emage Prompt Effect" %>
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "เซิร์ฟเวอร์">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
<style type = "text/css">
.aa {
ความกว้าง: 88px;
ความสูง: 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? "<br/>" + this.mytitle: "";
var tooltip = "<div id = 'tooltip'> <img src = '" + this.href + "' alt = 'preview prame picture'/>" + imgtitle + "</div>"; > องค์ประกอบ
$ ("body"). ภาคผนวก (คำแนะนำเครื่องมือ);
$ ("#tooltip")
.CSS ({
"top": (e.pagey + y) + "px"
"ซ้าย": (e.pagex + x) + "px"
}). แสดง ("เร็ว");
}). 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 = "เซิร์ฟเวอร์">
<div>
<a href = "image/4.jpg" class = "tooltip" title = "รองเท้า"> <img src = "image/4.jpg"/> </a>
<a href = "image/5.jpg" class = "tooltip" title = "ถุงมือ"> <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>