<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> .mouseOver { cursor: hand; border: 1px solid red; } </style> <title></title> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> var imgPaths = ["http://img4.cache.netease.com/sports/2011/2/14/2011021405120433a90.jpg", "http://img3.cache.netease.com/sports/2011/2/14/2011021407333047e73.jpg"]; $(function () { $("#showImg").attr("src", imgPaths[0]); var top; var left; var width; var height; top = $("#showImg").offset().top; left = $("#showImg").offset().left; width = $("#showImg").width(); height = $("#showImg").height(); $("#popDiv").css({ position: "absolute", top: top + height - $("#popDiv").height(), left: left + width - $("#popDiv").width(), padding: "1px" }); $("#popDiv span").hover(function () { $(this).addClass("mouseOver"); }, function () { $(this).removeClass("mouseOver") } ).click(function () { $("#showImg").attr("src", imgPaths[eval($(this).text()) - 1]); }); }); </script> </head> <body> <div> <img id="showImg" alt="" height="400" width="300" src="" /> </div> <div id="popDiv" style=" 300px; height: 20px; text-align: right"> <span>1</span> <span>2</span> </div> </body> </html>