So You Want A Fake Image Map, Huh?

http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479751/So-You-Want-A-Fake-Image-Map-Huh.htm (Back to article)

See that thing over there to the left? Run your mouse over it and keep an eye on the status bar at the bottom of the browser window. It acts like an image map. If you click on the section you want, it'll work. You'll go to the page. Where the trick is, is that that thing isn't an image map. In fact..it isn't an image at all. It's six images. Stay with me here...

use these to jump around or read it all...

[Exploded View] [The Image] [Getting It All To Line Up]

Here's what that fake map above looks like in what smart people call an "exploded view."

See what I did? I took one image, cropped it into four and made each one active. Here's the code that I used to put the fake map together. The image commands are in blue. The link commands are in green:

I included the <CENTER> commands in the code because they do play a pretty big part.

The Image

You can do this one of two ways:

Create one image and cut it up.
Create a template image. Add words to the image and keep saving in a different name.

I did the first one. Either will work, but I thought it was easiest the cut the image up. Of course you'll need an image editing program to do this. I used my Paint Shop Pro. It's shareware and you can grab it here.

Once you have the images, and you are sure they will line up correctly, you simply build the map making sure the images load in order, top to bottom, left to right.

Getting It All To Line Up

This is the tricky part. You know each image is active. That means you need to use the BORDER="0" command to eliminate the blue border that would normally form. See that above? By the way, if making an image active is news to you, please read the Active Image Tutorial before attempting to roll through this one.

Tip One
Make sure all of your images are of correct width and height as to line up forming a perfect second image. It kills the entire effect without it.

Tip Two
The use of a line or smaller image that moves through the multiple images gives a greater perception the image is solid rather than a sum of parts. See the white box I have running through the image? This takes a little practice.

Tip Three
Keep all the commands tight together. If there is a space between the image and </A>, then that space will show up and will kill the effect.

Tip Four
Run it all together. If you have two images that sit next to each other on the same line, do not skip the second image's commands to the next line. That will work on some browsers. Other browsers, namely lower number version of browsers, will see your going to the next line as a space. That space will appear when the images line up and will kill the effect. Run it all together in a long line or at least butt the </A><A HREF... commands up against each other.

Tip Five
Always use an align of some kind surrounding the multiple images. Above I am using <center>. If you don't want it centered, use <P ALIGN="left"></P> or
<P ALIGN="right"></P>. It helps greatly.

Add an Image Flip

For an added interesting effect, try making each image an image flip rollover.

This is a lot of common sense. If your image is 100X100 to start and the parts you create do not then add back up to 100X100, then there's going to be trouble. Just take your time with the creation and cropping of the images and you should have no trouble with this one after a few tries.

Enjoy!

[Exploded View] [The Image] [Getting It All To Line Up]