JavaScript Hotspot Animator: highlight image-zones by moving your cursor over textlinks

» home
» contact
» terms of use

FREE SCRIPTS

» new
» text
» image
» utility
» background
» animation
» date/time

FREE ONLINE TOOLS

» code generators
» text animator
» drawing animator
» color animator
» slideshow factory
» javascript speed test

FREE BASIC SNIPLETS

» alert box
» image: multi-rollover
» pop-up: centering
» more

FREE'N'CRAZY

» realtime death counter
» eyeQ
» fun ticker

RECOMMENDED LINKS

» www.dynamicdrive.com
» www.hotscripts.com

Hotspot Animator:
Highlight image-zones by moving your cursor over textlinks
Mark any zone on your images in a dynamic way with this free JavaScript. Just move your mouse over a textlink in order to trigger the marker-animation. The animation requires no images! Each rectangle can be set to an individual size. Easy configuration of color and speed. Transparency effect for Internet Explorer and Firefox. Browsers: Internet Explorer 5x/6x/7x/8x, Firefox 3x/4x, Opera 7x/8x/9x/10x, Google Chrome 3x/4x

Test it

Move your mouse over the links below:

legs

head

right hand

left hand

mountain

Install it

Step 1: Open your webpage. Paste the following code anywhere between the </body>-tag and </body>-tag:

// CREDITS:
// HotspotAnimator Peter Gehrig 
// Copyright (c) 2010 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.fabulant.com

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where the scrips will be running.

// url of your image 
var imgurl="testimage82.jpg"

// width of picture
var picture_width=200

// height of picture
var picture_height=250

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

// transparency. Low value means high transparency
var transparency_value=50

// do not edit the variables below
var x_imgposition=0
var y_imgposition=0
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 transparency_valueFF=transparency_value/100
var marker_is_on=false
var isloaded=false

function initiate() {
	yourimage.innerHTML="<img src="+imgurl+">"
	document.getElementById('yourimage').style.posLeft=x_imgposition
	document.getElementById('yourimage').style.posTop=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(isloaded) {
		document.getElementById('marker').style.left=x_marker
		document.getElementById('marker').style.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)}
		marker.innerHTML=contentmarker
        document.getElementById('marker').style.visibility="visible"
		timer=setTimeout("animatemarker()",speed)
   }
   else {
        clearTimeout(timer)
   }
}

function hidemarker() {
    marker_is_on=false
    document.getElementById('marker').style.visibility="hidden"
}

function getcontentmarker() {
		contentmarker="<table cellpadding=0 cellspacing=0 width="+tablewidth+" height="+tableheight+" border="+borderwidth+" bordercolor="+border_color+"><tr><td> </td></tr></table>"	
}

document.write('<div id="roof" style="position:relative;width'+picture_width+'px; height:'+picture_height+'px">')
document.write('<div id="yourimage" style="position:absolute;left:0px;top:0px;width'+picture_width+'px; height:'+picture_height+'px"></div>')
document.write('<div id="marker" style="position:absolute;left:0px;top:0px;-moz-opacity:'+transparency_valueFF+';filter:alpha(opacity='+transparency_value+');)"></div>')
document.write('</div>')

window.onload=initiate
// - End of JavaScript - -->
</script>

Step 2: Go to the top of the script and configure the url and size of your image as well as color, speed and transparency of the animation.

Step 3: Add the links to your website, see sample below.

RED: The red values show the coordinates of the animated rectangle (x,y,x,y). How can you find out the position of the animated rectangle? Good trick: use your imagemap-tool! Bad trick: do it with trial-and-error method!