Lindsay0385
04-21-2011, 03:22 AM
Hello!
I cannot seem to get my image map working. I copied the code from another site that I built and just changed the boxes to link to the correct locations in my new image; but, it isn't working. I'm so confused! What am I doing wrong?
Any help would be appreciated!
Lindsay
<html>
<head>
<title>Welcome to!</title>
<style type="text/css">
A:link
{ text-decoration: underline; color:#f04155; }
A:visited
{ text-decoration: underline; color:#f04155; }
A:active
{ text-decoration: underline; color:#f04155; }
A:hover
{ text-decoration: underline; color:#f04155;}
body
{
font-family: Arial;
color: #f04155;
font-weight: normal;
font-size: 12pt; }
</style>
</head>
<body>
<body bgcolor="#fffce3">
<body background="background.gif">
<div style="position: absolute; top:10; left:10; z-index:1>
<MAP NAME="menumap">
<AREA
HREF="index.html" ALT="Home" TITLE="Home" TARGET="frame1"
SHAPE=RECT COORDS="318,23,474,68">
<AREA
HREF="about.html" ALT="About" TITLE="About" TARGET="frame1"
SHAPE=RECT COORDS="480,23,636,68">
<AREA
HREF="gallery.html" ALT="Gallery" TITLE="Gallery" TARGET="frame1"
SHAPE=RECT COORDS="318,75,474,120">
<AREA
HREF="contact.html" ALT="Contact" TITLE="Contact" TARGET="frame1"
SHAPE=RECT COORDS="480,75,636,120">
</MAP>
<IMG SRC="menutest.gif"
ALT="Menu Map" BORDER=0
USEMAP="#menumap">
</div>
<div id=layer1 name="frame1" style="position:absolute; top:140; left:10; width:1000; height:450;
z-index:2; padding:5px; border: #f04155 3px solid; background-color:#fffce3; overflow:auto;">
Welcome to...!
<br><br>
TEXT HERE
</div>
</body>
</html>
My Image:
http://img.photobucket.com/albums/v146/Rubik/menutest.gif
I cannot seem to get my image map working. I copied the code from another site that I built and just changed the boxes to link to the correct locations in my new image; but, it isn't working. I'm so confused! What am I doing wrong?
Any help would be appreciated!
Lindsay
<html>
<head>
<title>Welcome to!</title>
<style type="text/css">
A:link
{ text-decoration: underline; color:#f04155; }
A:visited
{ text-decoration: underline; color:#f04155; }
A:active
{ text-decoration: underline; color:#f04155; }
A:hover
{ text-decoration: underline; color:#f04155;}
body
{
font-family: Arial;
color: #f04155;
font-weight: normal;
font-size: 12pt; }
</style>
</head>
<body>
<body bgcolor="#fffce3">
<body background="background.gif">
<div style="position: absolute; top:10; left:10; z-index:1>
<MAP NAME="menumap">
<AREA
HREF="index.html" ALT="Home" TITLE="Home" TARGET="frame1"
SHAPE=RECT COORDS="318,23,474,68">
<AREA
HREF="about.html" ALT="About" TITLE="About" TARGET="frame1"
SHAPE=RECT COORDS="480,23,636,68">
<AREA
HREF="gallery.html" ALT="Gallery" TITLE="Gallery" TARGET="frame1"
SHAPE=RECT COORDS="318,75,474,120">
<AREA
HREF="contact.html" ALT="Contact" TITLE="Contact" TARGET="frame1"
SHAPE=RECT COORDS="480,75,636,120">
</MAP>
<IMG SRC="menutest.gif"
ALT="Menu Map" BORDER=0
USEMAP="#menumap">
</div>
<div id=layer1 name="frame1" style="position:absolute; top:140; left:10; width:1000; height:450;
z-index:2; padding:5px; border: #f04155 3px solid; background-color:#fffce3; overflow:auto;">
Welcome to...!
<br><br>
TEXT HERE
</div>
</body>
</html>
My Image:
http://img.photobucket.com/albums/v146/Rubik/menutest.gif