Based on jquery
$(function(){ varx = 10; vary = 20; $("A.tooltip"). MouseOver (function(e) { This. MyTitle = This. title; This. title = ""; vartooltip = "<div id= ' tooltip ' > This. href + "' alt= ' product preview map '/><\/div>";//Creating div elements$ ("Body"). Append (tooltip);//append it to the document$ ("#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" }); });})</script><Body> <ul> <Li><ahref= "Images/apple_1_bigger.jpg"class= "tooltip"title= "Apple IPod"><imgsrc= "Images/apple_1.jpg"alt= "Apple IPod" /></a></Li> <Li><ahref= "Images/apple_2_bigger.jpg"class= "tooltip"title= "Apple iPod Nano"><imgsrc= "Images/apple_2.jpg"alt= "Apple iPod Nano"/></a></Li> <Li><ahref= "Images/apple_3_bigger.jpg"class= "tooltip"title= "Apple IPhone"><imgsrc= "Images/apple_3.jpg"alt= "Apple IPhone"/></a></Li> <Li><ahref= "Images/apple_4_bigger.jpg"class= "tooltip"title= "Apple Mac"><imgsrc= "Images/apple_4.jpg"alt= "Apple Mac"/></a></Li> </ul></Body>
Picture omitted.
JS control picture hint (mouse over display large picture)