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:
<CENTER>
<a href="http://www.htmlgoodies.com"><img src="map01.gif" align="" width="100" height="30" border="0" alt=""></a>
<a href="/tutors/master.html"><img src="map02.gif" align="" width="100" height="41" border="0" alt=""></a>
<a href="/primers"><img src="map03.gif" align="" width="100" height="29" border="0" alt=""></a>
<a href="/tutors"><img src="map04.gif" align="" width="100" height="28" border="0" alt=""></a>
<a href="/letters"><img src="map05.gif" align="" width="100" height="29" border="0" alt=""></a>
<a href="http://www.htmlgoodies.com"><img src="map06.gif" align="" width="100" height="45" border="0" alt=""></a>
</CENTER>
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]
IE 7
Firefox 2.0
