SERVICES : WEB DESIGN : GRAPHICS : Image Maps Image maps (sometimes called Interfaces*) are images which are divided into sections to enable several individual links to be attached to them. There are two common ways of doing this, both of which are explained below.   Example 1: Maps & Hotspots The example above is a single image which has been divided up into five link areas by inserting a 'map code' into the HTML source. This includes giving exact co-ordinates of where each link should be placed on the image, and adding a separate link url to each area. These areas are called 'Hotspots' When you open the web page containing this Image Map, your browser will 'read' and understand the html code, and display it correctly.   Example 2: Diced Image Maps: This second example looks the same as before, but this time the image has been diced into several parts and the link urls have been attached to individual images. The function of the map is identical to example 1, but you may have noticed that this one has an additional feature: when you move your mouse over the right-hand-side links, the images change. (See Example 3 below for the extra effect on Link 5)   Example 3: How it's Done: Example 3 shows all the images used to create the mouseover or rollover effect in example 2. The effect is created by making 2 similar images for the parts you wish to have change, and then adding some Java Script code to the html source to tell browsers to 'swap' the images over 'on mouseover.' A 3-stage effect can be created by making a third image in yet another colour, and adding a little more Java Script This means that the image will change when you initially mouseover it, and again when you actually click on it. (See example 2, Link 5)   Summary: Almost any image can be turned into an Image Map, and Groovy Lizard uses many of them in a variety of ways, particularly to create an eye-catching effects on splash (or entrance) pages. A few examples of Groovy Lizard Image Maps can be found here: Digital Business Funny Business Chat Lines Inner Turmoil   * The term Interface actually refers to a design which fills the whole page and usually consists of or includes an Image Map.     Back     Graphics & Design Copyright ©Groovy Lizard™ Ltd. 2002. All Rights Reserved.