Phiên bản đầy đủ: jsB@nk » Liên kết » Liên kết tạo ô chỉ điểm
URL: https://www.javascriptbank.com/hotspotanimator.html
Khi rê con trỏ chuột vào các liên kết thì trên ảnh sẽ xuất hiện những ô vuông động đậy chỉ dẫn cho từng vị trí tương ứng với liên kết.
Phiên bản đầy đủ: jsB@nk » Liên kết » Liên kết tạo ô chỉ điểm
URL: https://www.javascriptbank.com/hotspotanimator.html
<SCRIPT language=javaScript><!-- Beginning of JavaScript -// HotspotAnimator// url of your image var imgurl="../image/pic191.jpg"// horizontal position of the image (distance to the left margin of the window, pixels)var x_imgposition=5// vertical position of the image (distance to the top margin of the window, pixels)var y_imgposition=5// maximum width of the animated bordervar maxborderwidth=5// color of the animated bordervar border_color="red"// speed of the marker-animation. A higher value will slow down the animationvar speed=100// do not edit the variables belowvar preloadimgurl=new Image()preloadimgurl.src=imgurlvar clipleft,clipright,cliptop,clipbottom,x_marker,y_marker,tableheight,tablewidth,timer,contentmarkervar borderwidth=0var step=1var marker_is_on=falsevar isloaded=falsefunction initiate() {if(document.all) {yourimage.innerHTML="<img src="+imgurl+">"document.all.yourimage.style.posLeft=x_imgpositiondocument.all.yourimage.style.posTop=y_imgpositionisloaded=true}if(document.layers) {document.yourimage.document.write("<img src="+imgurl+">")document.yourimage.document.close()document.yourimage.left=x_imgpositiondocument.yourimage.top=y_imgpositionisloaded=true}}function setmarkerto(clpleft,clptop,clpright,clpbottom) { marker_is_on=trueclipleft=eval(clpleft)clipright=eval(clpright)cliptop=eval(clptop)clipbottom=eval(clpbottom)tablewidth=clipright-cliplefttableheight=clipbottom-cliptopx_marker=eval(x_imgposition)+eval(clipleft)y_marker=eval(y_imgposition)+eval(cliptop)if(document.all && isloaded) {document.all.marker.style.posLeft=x_markerdocument.all.marker.style.posTop=y_markeranimatemarker()}if(document.layers && isloaded) {document.marker.left=x_markerdocument.marker.top=y_markeranimatemarker()}}function animatemarker() { if (marker_is_on) { getcontentmarker() borderwidth+=step if (borderwidth>maxborderwidth) {step=step*(-1)} else if (borderwidth<0) {borderwidth=step=step*(-1)} if(document.all) { marker.innerHTML=contentmarker document.all.marker.style.visibility="visible" timer=setTimeout("animatemarker()",speed) } if(document.layers) { document.marker.document.write(contentmarker) document.marker.document.close() document.marker.visibility="visible" timer=setTimeout("animatemarker()",speed) } } else { clearTimeout(timer) }}function hidemarker() { marker_is_on=false if (document.all) { document.all.marker.style.visibility="hidden" } if (document.layers) { document.marker.visibility="hidden" }}function getcontentmarker() {contentmarker="<table cellpadding=0 cellspacing=0 width="+tablewidth+" height="+tableheight+" border="+borderwidth+" bordercolor="+border_color+"><tr><td> </td></tr></table>"}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><DIV id=yourimage style="LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV><DIV id=marker style="LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV><DIV id=testlinks style="POSITION: absolute; TOP: 10px; float: right; width: 100%; text-align: right;"> <a onmouseout="hidemarker()" onmouseover="setmarkerto(10,200,190,260)" href="http://JavaScriptBank.com"><FONT color=#008800 face=Verdana size=3>legs</FONT></a> | <a onmouseout="hidemarker()" onmouseover="setmarkerto(380,2,550,150)" href="http://JavaScriptBank.com"><FONT color=#008800 face=Verdana size=3>head</FONT></a> | <a onmouseout="hidemarker()" onmouseover="setmarkerto(300,80,350,150)" href="http://JavaScriptBank.com"><FONT color=#008800 face=Verdana size=3>right hand</FONT></a> | <a onmouseout="hidemarker()" onmouseover="setmarkerto(420,250,500,350)" href="http://JavaScriptBank.com"><FONT color=#008800 face=Verdana size=3>left hand</FONT></a> | <FONT color=#008800 face=Verdana size=3>"</FONT><a onmouseout="hidemarker()" onmouseover="setmarkerto(230,200,330,300)" href="http://JavaScriptBank.com"><FONT color=#008800 face=Verdana size=3>mountains"</FONT></a></B></FONT></LI></UL></DIV><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/image/pic191.jpg