IMPORTANT: wait until the page has been loaded. Then click on a green textlink below to study the effect: legs |
head |
right hand |
left hand |
mountain
HotspotAnimator: highlight any image-zones by moving your cursor over textlinks
New power-tool to mark any zone on your images in a dynamic way. Just move your mouse over a textlink in order to trigger this cute marker-animation.
The animation is created without any images!
Each animation can be set to an individual size.
Easy configuration (width of animated rectancle, color of animated rectangle, speed of animation). Crossbrowser.
Configuration
Download the ZIP-file extract the script-file 'utilmarkbyborder.html', the testimage 'testimage82.jpg' and save them into the same folder.
Go to the script-section of the script-file (top of page) and configure the url and position of your image.
Go to the HTML-section of the script-file (below the body-tag) and configure the links triggering the marker-animations as follows:
GREEN: Moving the cursor over the link 'leg' will call the function setmarkerto(leftposition, topposition, rightposition, bottomposition)
RED: These 4 values are the position of the animated rectangle. 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!