Lorsque la souris glisse sur l'image, la grande image de prévisualisation apparaîtra et il y aura du texte d'introduction sous la grande image.
La copie de code est la suivante:
<% @ Page Language = "C #" AutoEventWireup = "True" CodeFile = "Image Invite Effect.aspx.cs" Hérites = "Image Invite Effect"%>
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> </Title>
<style type = "text / css">
.aa {
Largeur: 88px;
hauteur: 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 (fonction (e) {
this.myTitle = this.title;
this.title = "";
var imgtitle = this.mytitle?
var toolTip = "<div id = 'toolTip'> <img src = '" + this.href + "' alt = 'Product Preview Picture' />" + imgtitle + "</ div>"; > Éléments
$ ("corps").
$ ("# info-bulle")
.css ({
"haut": (e.pagey + y) + "px",
"gauche": (e.pagex + x) + "px"
}). Show ("Fast");
}). Mouseout (function () {
this.title = this.mytitle;
$ ("# ToolTip"). Supprime ();
}). MouseMove (fonction (e) {
$ ("# info-bulle")
.css ({
"haut": (e.pagey + y) + "px",
"gauche": (e.pagex + x) + "px"
});
});
})
</cript>
</ head>
<body>
<form id = "form1" runat = "server">
<div>
<a href = "image / 4.jpg" class = "tooltip" title = "chaussures"> <img src = "image / 4.jpg" /> </a>
<a href = "image / 5.jpg" class = "tooltip" title = "gants"> <img src = "image / 5.jpg" /> </a>
<a href = "image / 6.jpg" class = "tooltip" title = "jupe"> <img src = "image / 6.jpg" /> </a>
<a href = "image / 7.jpg" class = "tooltip" title = "sac"> <img src = "image / 7.jpg" /> </a>
</div>
</ form>
</docy>
</html>