Mouse over the preview of the large image prompt effect

2020-03-30 02:09:28
OfStack

When the mouse over the picture, the picture will appear a preview of the large picture, the large picture will also have the introduction text.

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile=" Picture prompt effect .aspx.cs" Inherits=" Picture prompt 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> 
<style type ="text/css" > 
.aa{ 
width:88px; 
height :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 ? "<br/>" + this.myTitle : ""; 
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt=' Product preview '/>" + imgTitle + "</div>"; //Create <Div> The element
$("body").append(tooltip); //Append it to the text
$("#tooltip") 
.css({ 
"top": (e.pageY + y) + "px", 
"left": (e.pageX + x) + "px" 

}).show("fast"); //Set the x and y coordinates, and display them
}).mouseout(function () { 
this.title = this.myTitle; 
$("#tooltip").remove(); // remove  
}).mousemove(function (e) { 
$("#tooltip") 
.css({ 
"top": (e.pageY + y) + "px", 
"left": (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" alt=" shoes " class="aa"/> </a> 
<a href ="image/5.jpg" class ="tooltip" title =" gloves "><img src="image/5.jpg" alt=" gloves " class="aa"/> </a> 
<a href ="image/6.jpg" class ="tooltip" title =" The skirt "><img src="image/6.jpg" alt=" The skirt " class="aa"/> </a> 
<a href ="image/7.jpg" class ="tooltip" title =" bag "><img src="image/7.jpg" alt=" bag " class="aa"/> </a> 

</div> 
</form> 
</body> 
</html>

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201402/201402261542162.gif? 2014126154230 ">