To Imagemap or Not to Imagemap
To Imagemap or Not to Imagemap
Sometimes it's actually easier and more practical not to use
an imagemap, but instead break the image up and put it in a Table with a border,
cellpadding, and cellspacing set to 0.
Example #1
| Regular Client-Side Imagemap: |
|
Example #2
<table border="0" cellpadding="0" cellspacing="0">
<TR>
<TD ROWSPAN=1 COLSPAN=1 WIDTH=98 HEIGHT=40>
<A HREF="/Quadzilla/">
<IMG SRC = "../images/imap/Image2_1x1.jpg"
WIDTH = 98
HEIGHT = 40
BORDER = 0
alt = "Quadzilla Home"></A></TD>
<TD ROWSPAN=1 COLSPAN=1 WIDTH=88 HEIGHT=40>
<A HREF="/Quadzilla/Tables/">
<IMG SRC = "../images/imap/Image2_1x2.jpg"
WIDTH = 88
HEIGHT = 40
BORDER = 0
alt = "Table Tutorial"></A></TD>
<TD ROWSPAN=1 COLSPAN=1 WIDTH=84 HEIGHT=40>
<A HREF="/Quadzilla/StyleSheets/">
<IMG SRC = "../images/imap/Image2_1x3.jpg"
WIDTH = 84
HEIGHT = 40
BORDER = 0
alt = "StyleSheets"></A></TD>
<TD ROWSPAN=1 COLSPAN=1 WIDTH=88 HEIGHT=40>
<A HREF="/Quadzilla/Tag_Ref/">
<IMG SRC = "../images/imap/Image2_1x4.jpg"
WIDTH = 88
HEIGHT = 40
BORDER = 0
alt = "Tag Reference"></A></TD>
<TD ROWSPAN=1 COLSPAN=1 WIDTH=102 HEIGHT=40>
<A HREF="/Quadzilla/Cookies/">
<IMG SRC = "../images/imap/Image2_1x5.jpg"
WIDTH = 102
HEIGHT = 40
BORDER = 0
alt = "Cookies"></A></TD>
</TR>
</TABLE>
This Table has the images within a separated Table for easy
viewing:
The source is the same except for:
<table border="1"
cellpadding="2">
You may also want to try it without a table:
<IMG SRC="../images/imap/Image2.jpg"
WIDTH = 460
HEIGHT = 40
BORDER = 0
USEMAP = "#Image2">
<MAP NAME="Image2">
<AREA SHAPE=rect
COORDS="0,0,98,40"
HREF="/Quadzilla/"
alt="Quadzilla Home">
<AREA SHAPE=rect
COORDS="96,0,188,40"
HREF="/Quadzilla/Tables/"
alt="Table Tutorial">
<AREA SHAPE=rect
COORDS="186,0,274,40"
HREF="/Quadzilla/StyleSheets/"
alt="Style Sheets">
<AREA SHAPE=rect
COORDS="272,0,360,40"
HREF="/Quadzilla/Tag_Ref/"
alt="Tag Reference">
<AREA SHAPE=rect
COORDS="358,0,460,40"
HREF="/Quadzilla/Cookies/"
alt="Cookie Tutorial">
</MAP>
|
