Header Foreground Image Hot-spot?

[HamzehAlsalhi]

Hi, I have a logo I uploaded to the header foreground image but its really clunky because the whole image including the transparent box is a link. Id like to know how I could go about making a hot-spot on a certain part of the image or perhaps how to not use transparent pixels as a hot-spot.

[sayontan]

This is not possible through the theme options (I will be surprised if more than 2-3 themes allow this). You can look at http://www.cssplay.co.uk/articles/imagemap/index.html to see if you can set up something of this sort. The header image is stored in the "#header img" CSS tag, so you might want to use the "Custom Styles" option to configure this using the method outlined in the link.

Just out of curiosity, though, why not trim out the transparent pixels and simply leave in the main image?

[HamzehAlsalhi]

Hey thank you for the quick response, thats actually quite a good idea, even though i want the hot-spot on a circular button a square wouldn't be to far of, but because the image would be so small I would have to be able to position it with much more accuracy on the header. Could that be done easier then making a hot-spot? position it precisely i mean, down to the pixel.

Heres the link to the site so you can better see what I'm talking about, I'm aiming for that circle to be the hot-spot.

http://www.indiebit.net/

[sayontan]

Your image is 553x88 pixels, out of which about 150px on the left and 25 px at the top can be cropped out safely in a tool like Photoshop / Fireworks / Gimp. Making the circle alone a hot spot is a whole different matter, not easily achieved without massive amounts of CSS.

[HamzehAlsalhi]

right but if i make the image just a small one containing only the circle then wont the circle be centered in the header?

[sayontan]

Yes, it will

[HamzehAlsalhi]

yeah so what im asking is, is there a way to then adjust the position of that image if so how.

[sayontan]

You already have that in place, I guess. When you go to your "Header Customization" section scroll to the option that says "Blog Title / Header Alignment" and select "Center".

[HamzehAlsalhi]

the reason its in place now is because the image was made big enough to be able to place the circle there, but if i made the image only a small box containing only the circle i would need to be able to position it with much more precision. my question is how would I do that.

[sayontan]

Not sure I understand you. Why don't you create the image first and set the setting to "Center" as I described above? Then I can tell you how to position it better without changing your code.