« »

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).

Label: HotspotAnimator: highlight any image-zones by moving your cursor over textlinks

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

pic191.jpg

Copy All x2

<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 border
var maxborderwidth=5

// color of the animated border
var border_color="red"

// speed of the marker-animation. A higher value will slow down the animation
var speed=100

// do not edit the variables below
var preloadimgurl=new Image()
preloadimgurl.src=imgurl
var clipleft,clipright,cliptop,clipbottom,x_marker,y_marker,tableheight,tablewidth,timer,contentmarker
var borderwidth=0
var step=1
var marker_is_on=false
var isloaded=false

function initiate() {
	if(document.all) {
		yourimage.innerHTML="<img src="+imgurl+">"
		document.all.yourimage.style.posLeft=x_imgposition
		document.all.yourimage.style.posTop=y_imgposition	
		isloaded=true
	}
	if(document.layers) {
		document.yourimage.document.write("<img src="+imgurl+">")
		document.yourimage.document.close()
		document.yourimage.left=x_imgposition
		document.yourimage.top=y_imgposition
		isloaded=true
	}
}

function setmarkerto(clpleft,clptop,clpright,clpbottom) {
    marker_is_on=true
	clipleft=eval(clpleft)
	clipright=eval(clpright)
	cliptop=eval(clptop)
	clipbottom=eval(clpbottom)
	tablewidth=clipright-clipleft
	tableheight=clipbottom-cliptop
	x_marker=eval(x_imgposition)+eval(clipleft)
	y_marker=eval(y_imgposition)+eval(cliptop)	
	if(document.all && isloaded) {
		document.all.marker.style.posLeft=x_marker
		document.all.marker.style.posTop=y_marker	
		animatemarker()
	}
	if(document.layers && isloaded) {
		document.marker.left=x_marker
		document.marker.top=y_marker
		animatemarker()
	}
}

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
	-->

Copy All x2

<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
	-->