Log in

View Full Version : CSS image maps



Johnnymushio
03-27-2011, 11:52 PM
I followed this tutorial

http://css.flepstudio.org/en/css-tutorials/image-map-in-css.html

here on my page

http://japantown.awardspace.com/divdesign.shtml

but as you can see, nothing is linked on the header on my page.

what did i do wrong?

html

<div id="header">
<a href="http://japantown.awardspace.com/" id="home"></a>
<a href="#default" id="main" class="menu"></a>
<a href="#default" id="forum" class="menu"></a>
<a href="#default" id="language" class="menu"></a>
<a href="#default" id="culture" class="menu"></a>
<a href="#default" id="omake" class="menu"></a>
</div>

css

#header {
background-image: url('header.gif');
background-repeat: no-repeat;
height: 150px;
width: 900px;
margin-left: 25px;
margin-right: 25px;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
}
#imagemap a {
display: block;
position: absolute;
}
#imagemap a.menu {
height: 25px;
width: 173px;
top: 79px;
}
#imagemap a#home {
height: 71px;
width: 871px;
top: 7px;
left: 7px;
}
#imagemap a#main {
left: 8px;
}
#imagemap a#forum {
left: 182px;
}
#imagemap a#language {
left: 356px;
}
#imagemap a#culture {
left: 530px;
}
#imagemap a#omake {
left: 704px;
}

dang i wish there was a delete thread option, haha

replace "imagemap" with "header"