The hint effect of the hyperlink http://www.cnblogs.com/liubeimeng/p/5849292.html a slight modification can become the picture prompt effect.
HTML Part code:
1 <H3>Have effect:</H3>2 <ul>3 <Li><ahref= "Images/apple_1_bigger.jpg"class= "tooltip"title= "Apple IPod"><imgsrc= "Images/apple_1.jpg"alt= "Apple IPod"></a></Li>4 <Li><ahref= "Images/apple_2_bigger.jpg"class= "tooltip"title= "Apple iPod Nano"><imgsrc= "Images/apple_2.jpg"alt= "Apple iPod Nano"/></a></Li>5 <Li><ahref= "Images/apple_3_bigger.jpg"class= "tooltip"title= "Apple IPhone"><imgsrc= "Images/apple_3.jpg"alt= "Apple IPhone"/></a></Li>6 <Li><ahref= "Images/apple_4_bigger.jpg"class= "tooltip"title= "Apple Mac"><imgsrc= "Images/apple_4.jpg"alt= "Apple Mac"/></a></Li>7 </ul>8 <BR/><BR/><BR/><BR/>9 <BR/><BR/><BR/><BR/>Ten <H3>No effect:</H3> One <ul> A <Li><ahref= "Images/apple_1_bigger.jpg"title= "Apple IPod"><imgsrc= "Images/apple_1.jpg"alt= "Apple IPod" /></a></Li> - <Li><ahref= "Images/apple_2_bigger.jpg"title= "Apple iPod Nano"><imgsrc= "Images/apple_2.jpg"alt= "Apple iPod Nano"/></a></Li> - <Li><ahref= "Images/apple_3_bigger.jpg"title= "Apple IPhone"><imgsrc= "Images/apple_3.jpg"alt= "Apple IPhone"/></a></Li> the <Li><ahref= "Images/apple_4_bigger.jpg"title= "Apple Mac"><imgsrc= "Images/apple_4.jpg"alt= "Apple Mac"/></a></Li> - </ul>
jquery Code:
1//Picture tips
2(function($){3 varx = 10;4 vary = 20;5$ ("A.tooltip"). MouseOver (function(e) {6 This. MyTitle = This. title;7 This. title = "";8 vartooltip = "<div id= ' tooltip ' > This. href + "' alt= ' product preview image '/>" + imgtitle + "<\/div>";//Creating div elements9$ ("Body"). Append (tooltip);//append it to the documentTen$ ("#tooltip"). CSS ({"Top": (e.pagey+y) + "px", "Left": (e.pagex+x) + "px"}). Show ("Fast");//sets the x and Y coordinates, and displays One}). Mouseout (function(){ A This. title = This. MyTitle; -$ ("#tooltip"). Remove ();//removed from -}). MouseMove (function(e) { the$ ("#tooltip"). CSS ({"Top": (e.pagey+y) + "px", "Left": (e.pagex+x) + "px"}); - }); -}) (JQuery);
In order to be more user-friendly, but also need to add text to the text description, that is, the big picture appears below the image corresponding to the introduction.
1 This This . title; 2 this. title = ""; 3 var This this. MyTitle: "";
If title has content, the title content is displayed, and none appears empty. A ternary operator is used.
Full code:
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style type= "Text/css" >7Body{margin:0;padding:40px;background-color: #FFF; font:80% Arial, Helvetica, Sans-serif;color: #555; line-height:180 %;}8img{border:0;}9ul,li{margin:0;padding:0;}TenLi{list-style:none;float: left;display:inline;margin-right:10px;border:1px solid #AAA;} One#tooltip {position:absolute;border:1px solid #333; background-color: #F7F5D1;p adding:1px;color: #F00;d isplay:none;} A</style> - -<body> the -<ul> -<li><a href= "images/apple_1_bigger.jpg" class= "tooltip" title= "Apple IPod" ></a></li> -<li><a href= "images/apple_2_bigger.jpg" class= "tooltip" title= "Apple iPod Nano" ></a></li> +<li><a href= "images/apple_3_bigger.jpg" class= "tooltip" title= "Apple IPhone" ></a></li> -<li><a href= "images/apple_4_bigger.jpg" class= "tooltip" title= "Apple Mac" ></a></li> +</ul> A<br/><br/><br/><br/> at<br/><br/><br/><br/> - -<ul> -<li><a href= "images/apple_1_bigger.jpg" title= "Apple ipod" ></a></li> -<li><a href= "images/apple_2_bigger.jpg" title= "Apple iPod Nano" ></a></li> -<li><a href= "images/apple_3_bigger.jpg" title= "Apple IPhone" ></a></li> in<li><a href= "images/apple_4_bigger.jpg" title= "Apple Mac" ></a></li> -</ul> to<script type= "Text/javascript" src= "Js/jquery-1-8-3.js" ></script> +<script type= "Text/javascript" > -(function($){ the varx = 10; * vary = 20; $$ ("A.tooltip"). MouseOver (function(e) {Panax Notoginseng This. MyTitle = This. title; - This. title = ""; the varImgtitle = This. myTitle? "<br>" + This. MyTitle: ""; + vartooltip = "<div id= ' tooltip ' > This. href + "' alt= ' product preview image '/>" + imgtitle + "<\/div>";//Creating div elements A$ ("Body"). Append (tooltip);//append it to the document the$ ("#tooltip"). CSS ({"Top": (e.pagey+y) + "px", "Left": (e.pagex+x) + "px"}). Show ("Fast");//sets the x and Y coordinates, and displays +}). Mouseout (function(){ - This. title = This. MyTitle; $$ ("#tooltip"). Remove ();//removed from $}). MouseMove (function(e) { -$ ("#tooltip"). CSS ({"Top": (e.pagey+y) + "px", "Left": (e.pagex+x) + "px"}); - }); the }) (jQuery); -</script>Wuyi</body> theEffect:
Photo Tip effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
