Когда мышь скользит по изображению, появится большое изображение предварительного просмотра, и под большим изображением будет вступительный текст.
Кода -копия выглядит следующим образом:
< %@ Page language = "c#" autoeventwireup = "true" codefile = "Emffem Effect.
<! 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>
<стиль типа = "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 (function (e) {
this.mytitle = this.title;
this.title = "";
var imgtitle = this.mytitle?
var Tooltip = "<div ID = 'Tooltip'> <img src = '" + this.href + "' alt = 'product price'/>" + imgtitle + "</div>"; > Элементы
$ ("Body"). Append (подсказка);
$ ("#Tooltip")
.css ({
"Top": (e.pagey + y) + "px",
"слева": (e.pagex + x) + "px"
}). Show ("Fast");
}). Mouseout (function () {
this.title = this.mytitle;
$ ("#Tooltip"). Удалить (); // Удалить
}). MouseMove (function (e) {
$ ("#Tooltip")
.css ({
"Top": (e.pagey + y) + "px",
"слева": (e.pagex + x) + "px"
});
});
})
</script>
</head>
<тело>
<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 = "kilk"> <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>