How to make a clickable header image, with different “hot spots”?

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

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.

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.

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.

“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.

<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; }

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

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:

https://archivist.incutio.com/viewlist/css-discuss/40401

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

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.

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

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!

The pseudo image-map setup (done only with css) works even with a background image. See here: https://www.cssplay.co.uk/menu/mantis.html; and here: https://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.

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(); ?>

</head>

<body>

<div id=”container”>

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

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

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.

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!