マウスが写真の上にスライドすると、プレビューの大きな画像が表示され、大きな画像の下に導入テキストが表示されます。
コードコピーは次のとおりです。
<％@ page Language = "c＃" autoeventwireup = "true" codefile = "画像プロンプトEffect.aspx.cs" ensulet = "画像プロンプト効果"％>
<！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>
<style type = "text/css">
.aa {
幅：88px;
高さ：100px;
}
</style>
<script type = "text/javascript" src = "scripts/jquery-1.7.1.js"> </scrip>
<script type = "text/javascript">
$（function（）{
var x = 10;
var y = 20;
$（ "a.tooltip"）。マウスオーバー（function（e）{
this.mytitle = this.title;
this.title = "";
var imgtitle = this.mytitle？ "<br/>" + mytitle： "";
var tooltip = "<div id = 'tooltip'> <img src = '" + this.href + "' alt = 'product preview picture' + imgtitle +" </div> "; >要素
$（ "body"）。append（tooltip）;
$（ "＃tooltip"）
.css（{
「トップ」：（ e.pagey + y） + "px"、
「左」：（e.pagex + x） + "px"
}）。show（ "fast"）;
}）。mouseout（function（）{
this.title = this.mytitle;
$（ "＃tooltip"）。remove（）;
}）。mousemove（function（e）{
$（ "＃tooltip"）
.css（{
「トップ」：（ e.pagey + y） + "px"、
「左」：（e.pagex + x） + "px"
}）;
}）;
}）
</script>
</head>
<body>
<form id = "form1" runat = "server">
<div>
<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>