Image-map for Header Image?

• 

  longconversations · Member · Feb 11, 2011 at 9:31 am

  • Copy link
  • Add topic to favorites

  Is there any way to image-map the header image so that you can link certain areas of the header to various external sites? See for example this Bandcamp banner (longconversations.bandcamp.com) was image-mapped to llnk to Facebook, Myspace, etc.

  Thanks.

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

• 

  justjennifer · Member · Feb 11, 2011 at 11:44 am

  • Copy link

  Not on WordPress.com.

  What you can do is make a table and put it in a text widget in your blog’s sidebar with a link attached to each of those icons. (You can check out my “Social Media Map” in my blog’s sidebar to see what I mean. http://justjennifer.wordpress.com/ )

  http://en.support.wordpress.com/widgets/text-widget/

• 

  justjennifer · Member · Feb 11, 2011 at 11:49 am

  • Copy link

  And, I am sorry. I have just noticed that your post is in the CSS customization forum.

  Please take my above answer with a grain of salt and perhaps one of our extremely rare but knowledgeable CSS volunteers will be able to give you a definite answer to your question.

• 

  longconversations · Member · Feb 11, 2011 at 7:51 pm

  • Copy link

  Thanks Jennifer that’s a great solution, I’ll go with that instead.

• 

  thesacredpath · Member · Feb 11, 2011 at 8:34 pm

  • Copy link

  Image maps require either straight HTML, or a combination of HTML and CSS. HTML is not legal in CSS, so to do an actual image map would require access to the underlying theme files, and we do not have access to that.

• 

  longconversations · Member · Feb 11, 2011 at 11:57 pm

  • Copy link

  Thanks for the explanation!

• 

  thesacredpath · Member · Feb 12, 2011 at 12:29 am

  • Copy link

  You are welcome.

• 

  hallluke · Member · Feb 12, 2011 at 12:40 am

  • Copy link

  It might still be possible with the CSS upgrade by placing your image map in a text widget and then repositioning it to appear as a header.

• 

  thesacredpath · Member · Feb 12, 2011 at 12:50 am

  • Copy link

  @Luke, I thought of that, but I’m wondering if the HTML for a map will get stripped out by wordpress? I’ve never tried it so I don’t know.

• 

  hallluke · Member · Feb 12, 2011 at 11:30 am

  • Copy link

  The map tag is supported and a quick test shows that it will work fine.

• 

  longconversations · Member · Feb 12, 2011 at 7:55 pm

  • Copy link

  Oh awesome, I’ll check it out.

• 

  timethief · Member · Feb 12, 2011 at 7:57 pm

  • Copy link

  Bookmarked! :)

• 

  hallluke · Member · Feb 12, 2011 at 10:09 pm

  • Copy link

  I should have taken a look at your blog too. If you just want to move the social media image links up towards your header image you can do that with some simple CSS rather than redesigning the entire image. You can change the distance too if you like, just remember to add 28 pixels for logged in users because otherwise the admin bar will get in the way:

  #text-4 {position:absolute; top:180px;}
  body.logged-in #text-4 {top:208px;}