Help a n00bie-image mapping background in css

[B17]

Hi everyone,
ive been learning css (a little) and am pretty stuck with making an image map for my navigation on a background image.
please see the attachment – id like all the words clickable and the blog button.

Ive tried making an image map in dreamweaver but it wont let me create it on the background image.

Ive also thought of other ways to try and make this simple using tables and slicing but thats not really the route i want to go down – am no expert so would love your suggestions on how it can be done.

Here is the css if it needs to be known
(most is from the transparancy tutorial on here):

Code:

{ margin: 0; padding: 0; }

body
{ font-size: 100%; font-family: Arial, sans-serif; background: url(images/bck.jpg); }
.floatLeft
{ float: left; }
.floatRight
{ float: right; }
.clear
{ clear: both; }
.layoutCenter
{ margin: 0 auto; }
.textCenter
{ text-align: center; }
.textRight
{ text-align: right; }
.textLeft
{ text-align: left; }
.hide
{ display: none; }
.show
{ display: block; }
.invisible
{ visibility: hidden; }

img, div { behavior: url(iepngfix.htc) }
div
{ padding: 20px; }

div#page-wrap
{ width: 520px; margin: 150px auto; }

div#mainContent
{ width: 560px; height:200px; float: left; margin: auto; padding: 25px;

background: url(images/transpBlack50.png);

color: white; line-height: 1.3 }

h1
{
color: white;}

[img]http://img148.imageshack.us/img148/6651/bcklm5.th.jpg[/img]

[Frodo64]

It’s my first respond to a problem :D ;) . I had the same problem, here is the example: http://www.frankmanno.com/ideas/css-imagemap/

[chazzwick]

i would say, slice each thing you want to be a link out of the original background image. Then place them in your web page using absolute positioning:

Code:

img#home {position:absolute; top:x; left:y;}

or something like that, and then wrap each image in an <a> tag

Code:

[B17]

"Frodo64" wrote:

It’s my first respond to a problem :D ;) . I had the same problem, here is the example: http://www.frankmanno.com/ideas/css-imagemap/

thanks for the link, its a little bit complicated for me lol.

[B17]

"chazzwick" wrote:

i would say, slice each thing you want to be a link out of the original background image. Then place them in your web page using absolute positioning:

Code:

img#home {position:absolute; top:x; left:y;}

or something like that, and then wrap each image in an <a> tag

Code:

thats great, ive managed to slice and use absolute positioning, however my transparent png file and text wont go over the image now.
I know its definetly behind the image but no matter what i do, it wouldnt show up.

Would love some suggestions

thanks for your help

[Author]

Posts