»

EnglishFrenchVietnamese

Print - HotspotAnimator: highlight any image-zones by moving your cursor over textlinks - JavaScriptBank.com

Full version: jsB@nk » Link » HotspotAnimator: highlight any image-zones by moving your cursor over textlinks
URL: https://www.javascriptbank.com/hotspotanimator.html

New power-tool to mark any zone within your images in a dynamic way. Just move your mouse over a textlink in order to trigger this cute marker-animation. Each animation can be set to an individual size. Easy configuration (width of animated rectancle, color of animated rectangle, speed of animation).

Full version: jsB@nk » Link » HotspotAnimator: highlight any image-zones by moving your cursor over textlinks
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>&nbsp;</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>&quot;</FONT><a onmouseout="hidemarker()" onmouseover="setmarkerto(230,200,330,300)" href="http://JavaScriptBank.com"><FONT   color=#008800 face=Verdana size=3>mountains&quot;</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