Quando o mouse deslizar sobre a imagem, a imagem grande de visualização aparecerá e haverá texto introdutório abaixo da imagem grande.
A cópia do código é a seguinte:
< %@ Página de página = "c#" autoeventwireup = "true" codefile = "imagem e efeito de prompt.aspx.cs" herits = "imagem do prompt de imagem" %>
<! 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 {
Largura: 88px;
Altura: 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 (função (e) {
this.mytitle = this.title;
this.title = "";
var imgtitle = this.mytitle? "<br/>" + this.mytitle: "";
var Tooltip = "<div id = 'Tooltip'> <img src = '" + this.href + "' alt = 'visualização do produto Imagem'/>" + imgtitle + "</div>"; > Elementos
$ ("Body"). Appender (ToolTip);
$ ("#ToolTip")
.css ({
"top": (e.pagey + y) + "px",
"Esquerda": (e.pagex + x) + "px"
}). Mostrar ("Fast");
}). MouseOut (function () {
this.title = this.mytitle;
$ ("#ToolTip"). Remover ();
}). mousemove (função (e) {
$ ("#ToolTip")
.css ({
"top": (e.pagey + y) + "px",
"Esquerda": (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 = "luvas"> <img src = "image/5.jpg"/> </a>
<a href = "image/6.jpg" class = "tooltip" title = "saia"> <img src = "image/6.jpg"/> </a>
<a href = "image/7.jpg" class = "Tooltip" title = "Bag"> <img src = "image/7.jpg"/> </a>
</div>
</morm>
</body>
</html>