Tip: You can modify some of the code before running
Hot single picture pops up multiple hints of effect <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title> hotspot single picture pop-up effect of multiple prompts </title> <meta http-equiv= "Content-type" content= "text/html;charset=gb2312" > <!--Add the following code to <pead> and </pead >--> <style type= "Text/css" > Body{font-size:12px;color: #303030;} a{color: #303030;} a:hover{color: Black;} Img{display:none} dl#officemap{margin:0;padding:0;background:transparent URL (yun_qi_img/chinamap.jpg) top left No-repeat;height:395px;width:483px;position:relative;} Dt{margin:0;padding:0;position:absolute;font-size:12px;display:none;} Dd{margin:0;padding:0;position:absolute; font-size:12px;} DD#MONITORDEF{TOP:111PX;LEFT:84PX} dd#monitordef a{position:absolute;width:34px;height:17px;text-decoration: none;} Dd#monitordef a span{display:none;} dd#monitordef a:hover{position:absolute;background:transparent URL (yun_qi_img/chinamap.jpg) -84px-506px no-repeat;top:0px;left:0px;} Dd#monitordef a:hover span{display:block;text-indent:0;vertical-align:top;color: #000; Background-color: #F4F4F4; position:absolute;border:1px solid #ff00ff; top:100%;margin:0;padding:5px;width:220px;} dd#phonedef{top:143px;left:185px;} dd#phonedef a{position:absolute;width:34px;height:17px;text-decoration:none;} Dd#phonedef a span{display:none} dd#phonedef a:hover{background:transparent url (yun_qi_img/chinamap.jpg) -185px- 538px No-repeat;} Dd#phonedef a:hover span{display:block;text-indent:0;vertical-align:top;color: #000; Background-color: #F4F4F4; position:absolute;border:1px solid #BCBCBC; bottom:100%;margin:0;padding:5px;width:140px;} DD#CASEDEF{TOP:179PX;LEFT:157PX} dd#casedef A{position:absolute;width:34px;height:17px;text-decoration:none} DD #caseDef a span{display:none;} dd#casedef a:hover{background:transparent url (yun_qi_img/chinamap.jpg) -157px-574px No-repeat;} Dd#casedef a:hover span{display:block;text-indent:0;verticAl-align:top;color: #000; Background-color: #F4F4F4;p osition:absolute;border:1px solid #BCBCBC; top:100%;margin:0; padding:5px;width:280px;} DD#NOTEBOOKDEF{TOP:173PX;LEFT:243PX} dd#notebookdef a{position:absolute;width:34px;height:17px;text-decoration: none;} Dd#notebookdef a span{display:none} dd#notebookdef a:hover{background:transparent URL (yun_qi_img/chinamap.jpg)- 243px-568px No-repeat;} Dd#notebookdef a:hover span{display:block;text-indent:0;vertical-align:top;color: #000; Background-color: #F4F4F4; position:absolute;border:1px solid #BCBCBC; top:100%;margin:0;padding:5px;width:200px;} dd#floppydef{top:139px;left:260px} dd#floppydef A{position:absolute;width:42px;height:17px;text-decoration:none ;} Dd#floppydef a span{display:none} dd#floppydef a:hover{background:transparent url (yun_qi_img/chinamap.jpg) -260px- 534px No-repeat;} Dd#floppydef a:hover span{display:block;text-indent:0;vertical-align:top;color: #000; Background-color: #F4F4F4; position:absolute;border:1px solid #BCBCBC; top:100%; left:1px;margin:0;padding:5px;width:140px;} DD#DEPENDENTDEF{TOP:215PX;LEFT:75PX} dd#dependentdef a{position:absolute;width:34px;height:17px;text-decoration : none; Dd#dependentdef a span{display:none} dd#dependentdef a:hover{background:transparent URL (yun_qi_img/chinamap.jpg)- 75px-610px No-repeat;} Dd#dependentdef a:hover span{display:block;text-indent:0;vertical-align:top;color: #000; Background-color: #F4F4F4; position:absolute;border:1px solid #BCBCBC; top:100%;left:1px;margin:0;padding:5px;width:140px;} </style> <script type= "Text/javascript" > Function addtriggers () {if (document.getElementById | | document.c Reatetextnode) {//Retrieve all <dt>s in the "Officemap" def. List DDS = document.getElementById ("Officemap") . getElementsByTagName ("DD"); ADD mouseover/mouseout events for (i = 0; i < dds.length; i++) {dds[i].onmouseover = function () {Switchit (thi s); }; Dds[i].onmouseout = function () {switchit (this); }}//Hides/displaYs text within a <dd> related to calling <dt> function Switchit (obj) {//Test to make sure previoussibling is not whitespace! var item = obj.previoussibling; while (Item.nodetype!= 1) {item = item.previoussibling; } if (Item.style.display = = "Block") {Item.style.display = "none"; Return }//Style accordingly Item.style.color = "BLACK"; Item.style.fontWeight = "bold"; Item.style.top = "275px"; Item.style.display = "block"; }//Disabled for example window.onload = Addtriggers; </script> </pead> <body> <!--Add the following code between <body> and </body>--> <div id= "Ex" > < DL id= "Officemap" > <dt id= "Monitor" > Desktop </br> When do you think he'll ring? </dt> <dd id= "Monitordef" ><span> This is a 17-inch desktop computer price is 3000 yuan. </span></dd> <dt id= "Phone" > Tel </dt> <dd id= "Phonedef" ><span> when do you think he'll ring? </span></dd> <dt id= "case" >PC host </dt> <dd id= "Casedef" ><span> mainChassis, quite large, seize the busy, eloquent, to the bottom! </span></dd> <dt id= "Notebook" > Portable </dt> <dd id= "Notebookdef" ><span> recently I bought a portable, Spent a lot of money. </span></dd> <dt id= "floppy" > Floppy drive </dt> <dd id= "floppydef" ><span> floppy disk drive, very beautiful. </span></dd> <dt id= "dependent" > Inventive </dt> <dd id= "Dependentdef" ><span> dominate, Unique. </span></dd> </dl> </div> </body> </ptml>
Tip: You can modify some of the code before running
