I have created an image map for the banner for a site but don't know how to get the bits of the image etc to upload to the theme.

OK I don't know what I'm doing ... I need to make the email part of the banner on smcsolar.co.uk open up an email programme ... I tried creating an image map but now have 6 bits of image and a HTML page and no idea what to do with them!

I tried adding the following to the Overlay Header Image box in the hope I could maybe make it transparent but still clickable but it doesn't show at all:

<div id="email_link">
<a href="mailto:info@smcsolar.co.uk">Email us now</a>
</div>

Could someone please help me work out how to add a link to the far right of the banner so when people click on the email address they can send an email?

Thanks

I would NOT use the built in image, I would add a new widget area to the 'Configure Header Area' then add a text widget to the new widget area and put your code in it.

Ah thats a good idea ... how can I position the widget so it's roughly where the email bit on the banner is though?

Just use separate hyperlinked images and position with CSS.

or, edit your image and cut out the email portion. Put just the your image in the 'atahualpa/images/header' folder. Now add your code to the "Image overlay' option

<div id="email_link">
<a href="mailto:info@smcsolar.co.uk">Email us now</a>
</div>

but change the 'v' to an <img...> that points to the little email section you cut out of the image and then position it with CSS

Really struggling to get this to work. The original banner is there but I've done a second version where I've cut out the area with the email and phone number, uploaded that graphic (email.png) to wp-content/my-images and then put the following code in the Overlay Header area (I kept the format exactly as the example on there, just changed the details)

<div id="header_image_sociable">
<ul>
<li><a href="mailto:theemailaddress@iwanttouse.co.uk">
<img src="/wp-content/my-images/email.png" alt="Email" /></a></li>
</ul>
</div>

And in CSS Inserts I added the following (as in the sample, so I could see where the image appeared and play around with it to get the image position right)

#header_image_sociable {position: absolute; right:40px; top: 20px;}
#header_image_sociable ul {list-style-type: none;}

But the image doesn't appear at all. (Please note that the banner on display now has the email/phone bit on there - because I can' leave it on display without - but the code above should ahve added a second identical graphic somewhere!)

so. teh 'Overlay Header Image' code will over lay the Atahualpa Header Image - the image that gets put there when you use the '%image' in the 'Configure Header Area' option.

So...what do you have in that option?

I have:

<img src="http://www.smconsult.co.uk/wp-content/themes/atahualpa/images/header/header.png" width="100%" /> <div id="mycatmenu">%cat-center</div> %bar1 <div id="mypagemenu">%page-center</div>

Why aren't you using the %image? And why are you wrapping the %cat and %pages in div's? They will be automatIcally wrapped in div's

Image is in <> because I needed it to resize with the page - and this very forum told me to do that! [Note: the resizing is when you make the browser window smaller - changing screen resolution is another thing entirely. JD]

Using divs for menu to make sure the bar stretches across the entire page - again something i read to do on this forum! - but actually the menu now has more items on it so I've deleted the <div>

However, I've just deleted the code round the image and magically the banner seems to be staying the right size now on whatever resolution, so I'm not sure what was going on there - and the overlay is working. Thanks!