Cuando el mouse se deslice sobre la imagen, aparecerá la imagen previa grande, y habrá texto introductorio debajo de la imagen grande.
La copia del código es la siguiente:
< %@ Page lenguaje = "c#" autoeventwireUp = "true" codeFile = "Efecto de solicitud de imagen.aspx.cs" herede = "Efecto indicativo de imagen" %>
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "servidor">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> </title>
<style type = "text/css">
.Automóvil club británico{
Ancho: 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 (función (e) {
this.mytitle = this.title;
this.title = "";
var imgtitle = this.ytitle?
var tooltip = "<div id = 'tooltip'> <img src = '" + this.href + "' alt = 'Product Preview Picture'/>" + imgtitle + "</div>"; > Elementos
$ ("Body"). Append (ToolTip);
$ ("#tooltip")
.css ({
"Top": (E.Pagey + Y) + "PX",
"Izquierda": (E.Pagex + x) + "PX"
}). Show ("rápido");
}). MouseOut (function () {
this.title = this.mytitle;
$ ("#tooltip"). remove ();
}). mouseMove (función (e) {
$ ("#tooltip")
.css ({
"Top": (E.Pagey + Y) + "PX",
"Izquierda": (E.Pagex + x) + "PX"
});
});
})
</script>
</ablo>
<Body>
<Form ID = "form1" runat = "servidor">
<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>