Image Map in Header Area Text Widget Problem

[DJinc]

Hello,

I've been looking through the threads on how to use an image map in the header area. Basically, I've understood the steps as follows:

1) Place your header as the header background

2) Place a transparent 100x100 .png square as the header foreground

3) Place a text widget in the header widget area

4) Go to http://www.image-maps.com and map out your image

5) Paste the HTML code into the text widget in the header area

I've followed these steps, but when I paste the HTML code into the text widget in the header area it messes up my site.

Here is the code:

Code: Select all

<div style="text-align:center; width:2000px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_7201206291755334" src="http://images.donjuaninc.com/12-06-26-Header.jpg" usemap="#Image-Maps_7201206291755334" border="0" width="2000" height="170" alt="" />
<map id="_Image-Maps_7201206291755334" name="Image-Maps_7201206291755334">
<area shape="rect" coords="1177,39,1258,61" href="www.donjuaninc.com/free-newsletter-signup" alt="Free newsletter" title="Free newsletter"    />
<area shape="rect" coords="1316,39,1397,61" href="www.donjuaninc.com/modern-mans-guide-to-lifestyle-dating-and-relationships" alt="Modern Mans Guide" title="Modern Mans Guide"    />
<area shape="rect" coords="1455,39,1536,61" href="www.donjuaninc.com/free-consultation" alt="Click Here for Free Session" title="Click Here for Free Session"    />
<area shape="poly" coords="992,156,995,1,319,1,323,168," href="www.donjuaninc.com" alt="Home" title="Home"   />
</map>
</div>

http://www.donjuaninc.com

Before pasting HTML code:



After pasting HTML code:




The code works in terms of making the desired areas clickable, but it makes my header move down and to the left. How can I make the header stay in the same spot but still keep the functionality from the code?

Thanks in advance!

[Colin]

Is your image really 2000px wide? I doubt it. I suspect that this is what is causing your issue.

[DJinc]

Yes - 2000 px wide by 170 px high. I had it set to 1440 px but it looked bad on desktop monitors displaying higher resolutions. At 2000 px the white of the header extends from edge to edge on all but the highest of resolutions.

You think reducing it to 1440 px and remapping would solve the issue?

In the code, I played around with the width a bit. At 1665 px the image is almost centered again, but that big gap still exists between the top nav bar and the header.

EDIT: Here is the part of code I was messing around with

Code: Select all

<div style="text-align:center; width:2000px; margin-left:auto; margin-right:auto;">

[drake]

You don't need that 100x100px png. It was tailored for the site for which I give that solution and for the version of theme in use at that time.

If you wish that your logo to be clickabile, can map a link to the homepage over the name of the site in the image map. So, use your image as it, at 2000px, but don't use in foreground of the site that png and set Blog Title / Header Image to be hidden at Suffusion Option -> Other Graphical Element -> Header.

Let the widget in place, even it still look bad, we can help you to align it by CSS if we have something to align...

[DJinc]

You don't need that 100x100px png. It was tailored for the site for which I give that solution and for the version of theme in use at that time.

If you wish that your logo to be clickabile, can map a link to the homepage over the name of the site in the image map. So, use your image as it, at 2000px, but don't use in foreground of the site that png and set Blog Title / Header Image to be hidden at Suffusion Option -> Other Graphical Element -> Header.

Let the widget in place, even it still look bad, we can help you to align it by CSS if we have something to align...

I went to foreground image and changed it to text. Then went to Suffusion Option -> Other Graphical Element -> Header and changed the Blog Title / Header image to hidden. Made sure description and subheader alignment is hidden. Also under skinning turned blog title / header hover decoration to hidden.

I tried repasting the code after I did this, and it still does the exact same thing as in the second photo. Any ideas?

[drake]

If you don't respect the last line of my post, I can't have any idea and I can't help you, just because I don't have nothing to align.

[DJinc]

Sorry Drake, I didn't understand what you meant at first. You wanted me to leave it misaligned so you can view the code while it's in that state.

Interestingly, without any code pasted into the text widget in the header, it still has issues. I think this means it might be the text widget itself. See what I mean:



The grey line between the header and the top navbar gets thicker, and a grey line appears at the bottom.

I have pasted the code back in and left it misaligned so you can see the code and tell me if there's a way to fix it. Thank you again for all of your help.

-Ryan

[drake]

Add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles:

Code: Select all

#header {display:none;}
#header-widgets {float:left;margin-left:-323px;}

If you crop your image right before the picture from the left side you don't need to define that negative margin, by floating left your widget will came aligned at the left of screen.
You can make the image exactly at the width of header, then use the background of header-widgets for taking all the space of any screen. In my above definition for #header-widgets you need to add width:100%;

[DJinc]

You're the man Drake. Thanks for all your help, my site looks great now.