마우스가 그림 위로 미끄러지면 미리보기 큰 이미지가 나타나고 큰 이미지 아래에 소개 텍스트가 나타납니다.
코드 사본은 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codefile = "이미지 프롬프트 효과 .aspx.cs"상속 = "이미지 프롬프트 효과" %>
<! 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>
<스타일 유형 = "텍스트/CSS">
.aa {
너비 : 88px;
높이 : 100px;
}
</스타일>
<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"). 마우스 오버 (function (e) {
this.mytitle = this.title;
this.title = "";
var imgtitle = this.mytitle?
var tooltip = "<div id = 'tooltip'> <img src = ' + this.href +"'allt = 'product preview picture'/> " + imgtitle +"</div> "; > 요소
$ ( "body"). Append (Tooltip);
$ ( "#툴팁")
.CSS ({
"상단": (E.Pagey + Y) + "PX",
"왼쪽": (e.pagex + x) + "px"
}). show ( "FAST"); // X 및 Y 좌표 및 디스플레이
}). 마우스 아웃 (function () {
this.title = this.mytitle;
$ ( "#툴팁"). remove ();
}). MouseMove (function (e) {
$ ( "#툴팁")
.CSS ({
"상단": (E.Pagey + Y) + "PX",
"왼쪽": (e.pagex + x) + "px"
});
});
})
</스크립트>
</head>
<body>
<form id = "form1"runat = "Server">
<div>
<a href = "image/4.jpg"class = "툴팁"제목 = "신발"> <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 = "툴팁"제목 = "bag"> <img src = "image/7.jpg"/> </a>
</div>
</form>
</body>
</html>