Grow your CSS skills. Land your dream job.

Help a n00bie-image mapping background in css

  • B17
    # July 20, 2008 at 12:50 pm

    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]

    # July 20, 2008 at 3:32 pm

    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/

    # July 20, 2008 at 4:07 pm

    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
    # July 20, 2008 at 8:10 pm
    "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
    # July 20, 2008 at 8:13 pm
    "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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".