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


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.
<A HREF="http://www.google.com" onMouseOut="hidemarker()" onMouseOver="setmarkerto(50, 20, 100, 90)">legs</a>

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!