How To Add Image Map Below Header In CSS?

  • ringling9 · Member ·

    How Would I add an image map below my header as a navigation bar? I could do it with HTMl but is there a way with CSS? My blog is ringling9.wordpress.com

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    You can put it into a text widget (the HTML) and then use positioning in the CSS to move that particular text widget up and into the location you want the image map.

  • ringling9 · Member ·

    How do I position the widget in CSS?

  • thesacredpath · Member ·

    You have to target the specific text widget by ID and declare position:absolute; and then use the top: XXpx; and left: XXpx; declarations to position it where you want it.

    This is just an example. You will have to get the correct text widget ID number and use that.

    #container {
position:relative;
}

#text-397064160 {
position:absolute;
left:250px;
top 500px;
}

    The position relative in #container means that when you use position absolute in a child selector, it will retain its position within that parent element instead of in relation to the browser window.

    The left and top values above are nothing more than placeholders. You will have to play with the values to get it positioned where you want it. You will most likely have to reposition other page elements to make room for the image map/text widget.

  • ringling9 · Member ·

    Wow, Do you know how I could get the text widget ID?

  • thesacredpath · Member ·

    You have to put the text widget into the sidebar and then look at the source code, find it and then the ID will be listed right there.

  • ringling9 · Member ·

    This works! But, not all of the links show up. Only two of them do, I don’t know why this is happening. I have six different links on the picture, and I used http://www.image-maps.com/.

    This is the code:

    <div style=”text-align:center;width:904px;margin-left:auto;margin-right:auto;”>
    ””
    <map id=”_Image-Maps_8201105092115349″ name=”Image-Maps_8201105092115349″>
    <area shape=”rect” coords=”21,35,176,102″ href=”http://www.clubpenguin.com” alt=”” title=”” />
    <area shape=”rect” coords=”217,14,305,52″ href=”http://www.ringling9.wordpress.com” alt=”” title=”” />
    <area shape=”rect” coords=”317,12,409,50″ href=”http://ringling9.wordpress.com/cheats/” alt=”” title=”” />
    <area shape=”rect” coords=”424,12,532,50″ href=”http://ringling9.wordpress.com/blogroll/” alt=”” title=”” />
    <area shape=”rect” coords=”543,10,651,48″ href=”http://ringling9.wordpress.com/banners/” alt=”” title=”” />
    <area shape=”poly” coords=”779,103,741,100,728,85,728,58,740,47,780,46,832,46,863,50,866,70,866,89,857,100,833,102,805,103,” href=”http://play.clubpenguin.com/index.php?lang=en” alt=”” title=”” />
    <area shape=”rect” coords=”902,115,904,117″ href=”http://www.image-maps.com/index.php?aff=mapped_users_8201105092115349″ alt=”Image Map” title=”Image Map” />
    </map>
    </div>

  • thesacredpath · Member ·

    Give this a try. This works fine in Firebug on your site and all the image maps work. Remove the “ignore this” line of text at the top before doing the below or it will affect the positioning.

    #container {
position: relative;
}

#text-397064162 {
height: 117px;
left: 0;
padding: 0;
position: absolute;
top: 265px;
width: 905px;
}

    Oh, and by the way, THIS will get your site deleted or suspended. There is NO advertising at wordpress.COM.

    Adspace
    -Available Space-
    -Available Space-
    -Available Space-
    -Available Space-
    -Available Space-

  • ringling9 · Member ·

    Thanks! So I really can’t put other club penguin banners in the sidebar? I’ll have to get rid of that!!

  • thesacredpath · Member ·

    You need to talk with staff directly on that. If you are getting any sort of compensation for putting the club penguin banners up on your site, it could be a problem. If you are just trading banners with other penguins then it probably isn’t a problem and you just need to change the wording. Right now with “adspace” and “available space” there, it leads one directly to thoughts of paid advertising.

  • ringling9 · Member ·

    Yeah, i will delete that tomorrow(I’m in bed now), and try the code. Hopefully it will work! So, if I remove the “ignore this”, will the links show up, or will that not have any effect on the links unless I put your code in?

  • thesacredpath · Member ·

    No, getting rid of the “ignore this” is just so that things align correctly with the numbers I have in the code. When I moved it up using Firebug and into position, all the links were showing up just fine.

    Also, I forgot one part above. You will have to add the following as well to move the content down and make room for the image map.

    .pagewrapper {
padding-top: 117px;
}
  • ringling9 · Member ·

    Thanks! I’ll do all this tomorrow after school and tell you what happens!

  • ringling9 · Member ·

    This works! Thanks so much! Also, can you help me with one other thing? I need to add a Background Pic to the post footer. Where is says comments and filed in: blah blah. How do I put a picture so it continues throughout the whole footer?

  • thesacredpath · Member ·

    Great, glad that worked. The stuff below the posts is in .postinfo so just make yourself a background image and then declared the background there. Make it 500px wide and then whatever height you want and then set the height of .postinfo to match the height of the image.

    .postinfo {
background: url("URL of image") no-repeat scroll 0 0 transparent;
height: XXpx;
}
  • ringling9 · Member ·

    Thanks! You are a HUGE help!

  • thesacredpath · Member ·

    You are welcome.

  • ringling9 · Member ·

    When I make an image map and put it in the text widget, it strips out the mouse over links. Is there a different way to do this so the mouseover Picture will stay?

  • thesacredpath · Member ·

    “mouseover” is not supported here. The links to the map regions should stay active though.

    Add Code to Your Site

  • ringling9 · Member ·

    Is there anywhere i could put the image map in WordPress.com where mouseover is supported? Or mouseover isn’t supported at all in WordPress.COM?

1 2
  • The topic ‘How To Add Image Map Below Header In CSS?’ is closed to new replies.