How to make a clickable header image, with different "hot spots"? (19 posts)

  1. livinginstereo
    Posted 10 years ago #

    I've gotten so much help on this forum. Thanks to everyone.

    Here's my latest issue: I want to make the image in my header clickable, as in linkable to my home page or to a different page on site. But I don't want to make the entire jpeg clickable, only part of it. I think this is called a "hot spot" and I've been able to do that in Dreamweaer html, but have no idea how to add that to WordPress.

    I'd actually like to make two different hot spots on the same jpg to send visitors to different locations, depending on the page.

    Can anyone help with this? Do I need to add something to the CSS file? What do I add, and where? My site is: http://livinginstereo.com

  2. moshu
    Posted 10 years ago #

    This is not a WP question.
    You should seek help on a specialized forum.

  3. livinginstereo
    Posted 10 years ago #

    OK, sorry. But I saw threads inquiring about how to insert Flash headers into a WP based site, and I think my question is along the same lines.

  4. moshu
    Posted 10 years ago #

    Probably I didn't see those. I don't think we should cater responses and solutions for anything else than strictly WP related questions.
    Basic HTML, basic CSS and basic image manipulation should be the responsiblity of the blog owner to learn.

    I know many people don't agree with this - but I still stand firmly on this position.

  5. livinginstereo
    Posted 10 years ago #

    Ok thanks again, Moshu. But maybe there's some confusion about my question. I know how to create a hotspottable jpg on my own. I just don't know how or where to insert that code into my WP-powered site. Maybe that isn't a WP question, but it seems like one to me.

  6. Kafkaesqui

    Posted 10 years ago #

    "Maybe that isn't a WP question, but it seems like one to me."

    Only in the sense you have to place the map element in a template with the image. Other than that it is straightforward HTML.

  7. livinginstereo
    Posted 10 years ago #

    <i>Only in the sense you have to place the map element in a template with the image.</i>

    Which is exactly my question. How or rather where do I place that code in my header template? Currently my code for the header.jpg in my header.php looks like this:

    #header { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/headersoundsville.gif") no-repeat bottom center; }

  8. Kahil
    Posted 10 years ago #

    easy moshu... his site is running wordpress and he is asking how to do this within wordpress. telling him to go elsewhere is not cool. I don't know why, but lately you have been rather rude to members here. hopefully that changes.

    as for your question livinginstereo, maybe you can use a whole image as a background image for your header and then use pieces of the whole background image. by that i mean crop out the places you want the hotspots to be and make a separate image. it would then sit on top of the background image, but just that one section would be clickable to your hotspot and it would look like a whole image to a viewer. I hope I am making sense when I am explaining it...lol... like on my site, my header has a background image, but i also have another image on top of it with my custom graphic... lol...this is making sense in my head....sorry if its confusing...

    thank you

  9. Kafkaesqui

    Posted 10 years ago #

    livinginstereo, the thing is background images can not contain image map hotspots. You would have to do something like the following to provide pseudo mapping of the image:


    Or add the image into your template as an inline image (i.e. <img>), and not as a div background.

  10. livinginstereo
    Posted 10 years ago #

    Interesting solution. Your site looks great, by the way, kahil! Would you mind posting your header.php code where the two overlaid jpgs are? That might help me! Thanks.

  11. livinginstereo
    Posted 10 years ago #

    Thanks, Kafkaesqui. I'll take a look at that link and see if it helps.

  12. livinginstereo
    Posted 10 years ago #

    Actually, the header on your site is very close to what I want to do, Kafkaesqui. I assume it has a clickable jpg overlaid on a background image? I would just need to add two different clickable jpgs over a background image. Would it be obnoxious to ask for the relevant code for your header.php? If so, no sweat, and I'll try to model what I'm doing based on your site. Thanks again!

  13. vkaryl
    Posted 10 years ago #

    The pseudo image-map setup (done only with css) works even with a background image. See here: http://www.cssplay.co.uk/menu/mantis.html; and here: http://www.cssplay.co.uk/menu/imap.html.

    Stu has several other similar menus. He doesn't give you a really detailed "here's how you do this" but does provide enough info so you can figure it out.

  14. Kahil
    Posted 10 years ago #

    well... my site is a mod off of the wp-andreas09 theme... for the background image it calls different css files depending on the color theme used...

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/<?php echo "" . get_settings( 'wp_andreas09_ImageColour' ) . ".css"; ?>" type="text/css" media="screen" />

    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>



    <div id="container">

    <img src="/wp-content/images/header.jpg" />

    <?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>

  15. Kafkaesqui

    Posted 10 years ago #

    livinginstereo, my header has one background image (upper right corner), which is not a link. The logo at left is one of your regular old linked <img> tags.

  16. livinginstereo
    Posted 10 years ago #

    OK, thanks everyone for all that info. I appreciate being pointed in the right direction or directions :) I'll get to work on it now!

  17. monkeypup
    Posted 10 years ago #

    Amen. Moshu and some others have a tendency on this board to be rather snarky. This is a pet peeve of mine. Most folks that come to support boards (including this one) are, more or less, at the lower end of knowledge and skill. I know that I was a year or so ago when I started asking for help here. So, sometimes a person might ask a question that could or should be asked elsewhere, but you know what? Don't answer it! And also, don't make a comment! There are people on these boards (as evidenced by this thread) that ARE willing to help. Maybe I'll get reamed for saying so, but to heck with it. Now that I am a little more knowledgeable about WP, I try to comb the boards and answer what I can. It's not much, but I do it because people helped me back when I was new to it all. And I still had to wade through sarcasm and snarky links to searches I SHOULD have done. Whew. Rant over. Help people if you can, or say nothing. That's my opinion.

  18. livinginstereo
    Posted 10 years ago #

    Just an update: I added image mapping to my header.php, and it seems to work great! I kept the background image at the top, and then just added the following code to the bottom of my template:

    <div id="header">
    <img src="http://www.livinginstereo.com/wp-content/themes/stylish_blue_modern/images/livinginstereomain.gif" width="874" height="130" border="0" usemap="#Map">
    <map name="Map">


    Thanks to everyone who helped out with this!

  19. kimberlyrox
    Posted 9 years ago #

    Hello all.

    I have a question that IS this question, only different. I have an image that needs to be the header, yet needs to have 8 clickable links inside, and to make it even more difficult, I need to be able to change the color of the "button" if you are on that page. i.e. if I am on page one, then the button for page one is a different background (now I can make this button a jpg if I need to)and the rest of the buttons have thier orginal look.

    I am VERY VERY new to this WHOLE CSS/HTML scene. If anyone can help me, it would be MUCH appreciated.

    Thank you!

Topic Closed

This topic has been closed to new replies.

About this Topic