[javascript]
Disjointed Imagemap
Disjointed Imagemaps are very popular because they allow the designer to be creative
with their imagery and still allow for navigation. For example, roll your mouse pointer over the three
buttons below:
Although the effect is similar to the simple Rollover script, this script uses an imagemap instead of individual buttons for people who prefer to work with one simgle image instead of placing multiple images on a page. So here is how it's done...
First, cut and paste the following script in-between the <head> and </head> tags of your page:
the images are represented by the numbers in square brackets [ ] - use of these numbers is explained further on.
Let's take it stage by stage. Remember the golden rule when when coding imagemap rollovers.
REMEMBER! ALL YOUR POPUP IMAGES MUST BE THE SAME SIZE AS YOUR 'holderimage.gif'.
The way the rollover effect works is that the 'holderimage.gif' is displayed while the function is not in use. This can be a transparent image or a default graphic, the same size as all you popup images, which prevents a blank square with the little red 'x' in the corner, from being displayed. This 'holderimage.gif' sits in the holder until a mouse is run over an area of the imagemap. At this point, the holder drops the 'holderimage.gif' and replaces it with the chosen image for that particular area.
This is the line of code that positions the holder on the page:
In this case, I have created my own holderimage which displays when the rollover is not in use but you can also use a transparent gif image if you prefer. Remember, ALL your images MUST BE THE SAME SIZE or the function will not display correctly. This line of code should be placed where you want the popup images to appear on your page. In this instance, I wanted them to appear to the right of the text and image above and created a class in my style sheet [img.djmapholder] to make the holder image float to the right of the page.
The next stage is to code for your images to appear when the appropriate area is hovered over with the mouse. First create your imagemap and position it on your page. Look at this line of code:
The first part of this line is outlining the first area of your imagemap (shape and coords). After that comes the href that you want this specific area to link to when clicked. If you do not wish to link to another page or URL, simply add "javascript:;" to your href which will cause the current page to stay in focus. If you are linking to another page or site, you may want to specify a target window - I find that using _blank is great for opening pages to external sites as it means your site is always in the users browser albeit it underneath. If you open other sites in the same window, the user may not return to your site. After the target attribute comes the alt"" where you can put a brief description of the area.
Now we get to the important part! Onmouseover and onmouseout. This peice of code is telling the page to change the 'holder' (holderimage.gif - which has already been defined in the img tag earlier which positioned the holder on the page) to '01' (largeimage01.gif - see pics [01] in the script above) when the mouse is placed over the relative area AND THEN TO CHANGE the 'holder' back to pic[04] (holderimage.gif) when the mouse is taken away from the relative area.
So, creating imagemap rollovers is just a question of adding the mouseover and mouseout functions to your imagemap code as shown above. For each area's line of code, you use exactly the same mouseover code but change the image number in the mousover brackets to correspond with the image in your script in your header. i.e., for my second area of my imagemap (rose button):
onMouseOver="changer('holder',01)
BECOMES
onMouseOver="changer('holder',02)
WHILST
onMouseOut="changer('holder',04)
remains the same in each line.
This is a simple and easy to apply piece of JavaScript that can create an effective display function on any web page. Interactive sites are popular as it creates something for the viewer to become involved with. If kept clean and simple, functions like this can enhance your site when used appropriately.