Hi Flynn -

Another quick question tonight. I'm used to being able to create graphics with multiple clickable links, using the HTML feature that allows you to define hotzones and their reference links. Is this possible in WordPress? If so, is it also possible to specify this in the Header graphic? By the way, I'm using a single graphic for the Header rather than rotating multiple images.

Eric

To be able to account for both fixed and fluid layouts Atahualpa uses the header image as background image in both cases. Image maps are not possible with background images as far as I know.

If you use a FIXED width, you could include a regular image either by messing with bfa_header_config.php, or, easier, include the image above or below the whole default header area, by putting the image into header.php, around line 877-883:

PHP Code:

<!-- Header -->
<td id="header" colspan="<?php echo $cols; ?>">
... image map code here ... for above the header area
<?php bfa_header_config($bfa_ata_configure_header); ?>
 ... or image map code here ... for below the header area
</td>
<!-- / Header -->

You'd probably create the image map in Dreamweaver or so but should be able to copy/paste the code into header.php

http://www.w3schools.com/TAGS/tag_map.asp

I've been working on this for quite awhile now, and nothing seems to be working. I did it exactly how you said in header.php, but for some reason it is not working. Here is my code:

<!-- Header -->
<td id="header" colspan="<?php echo $cols; ?>">
<img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="http://www.google.com" alt="Sun" />
<area shape="circle" coords="90,58,3" href="http://www.google.com" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="http://www.google.com" alt="Venus" />
</map>
<?php bfa_header_config($bfa_ata_configure_header); ?>
</td>
<!-- / Header -->



I used the same code as the example at http://www.w3schools.com/TAGS/tag_map.asp just to be clear. Not sure why this isn't working?

What is not working, what do you get?

My entire page goes blank, like there is nothing there. Is there something wrong with my code?

Hi --

I fixed the problem, now everything works great so thanks!

One thing though -- now below my header there is a gap between the image and my page menu bar (probably about 3 or 4 pixels tall), and I was wondering how to remove the gap so that they are right on top of each other?

post the url so I can see it

its at http://blog.englishteastore.com

Add the red code

<img style="display:block" usemap="#header" ...

Another, easier place to put the image map is in:
Atahualpa Theme Options -> HTML/CSS inserts -> Body top

Putting it there keeps you from messing up the code.
Also... that trick allows you to have a header image that extends past the body container
(example of this at the top of http://socialbootstrap.com)
Or a header image that is clickable only on the image, rather than across the whole banner
(example at http://vividmargin.com)

On vivid margin, that also allowed us to push the page menu bar up into the same horizontal space as the title image, without covering their hrefs under the clickable header.

And....
The (as of this writing, empty) portfolio section at vivid margin is a separate install of WP on a subdomain. Rather than creating redirect pages, we just recreated the page menu bar in a div in the same html inserts area. (Didn't even have to write it- we just copied it out of the created source-code). The CSS that controls it still works (with some tweaking).

It's a great place for all of you who want more control over the header area- I don't know why nobody mentions it as an option.

Hello:

I've tried the code above, and it works like a charm in all browsers other than IE 8.0. In that browser part of my header is being cut off, and the weird thing is that it only does this on the pages where my sidebar is showing. I have a homepage where I am hiding the sidebar, and I can see the whole header. On subsequent pages that have sidebars, my header is being cut off on the right side where the main content window would begin. Kinda weird, any thoughts? I could really use some cause this site is being launched in 24 hours and I have worked out most of my other headaches other than this one.



Thanks!

PHP Code:

<!-- Header -->
        <td id="header" colspan="<?php echo $cols; ?>">
        <img src="http://www.bowtique.com.au/wp-content/themes/atahualpa/images/header/BT_Header.gif" width="1000" height="254" border="0" usemap="#Map" />
<?php bfa_header_config($bfa_ata_configure_header); ?>
<map name="Map" id="Map">
  <area shape="circle" coords="438,99,51" href="#" />
  <area shape="circle" coords="571,98,51" href="#" /><area shape="circle" coords="704,99,53" href="#" />
<area shape="rect" coords="413,182,455,202" href="#" /><area shape="rect" coords="501,181,546,200" href="#" /><area shape="rect" coords="592,178,662,201" href="#" /><area shape="rect" coords="705,179,765,204" href="#" /><area shape="rect" coords="831,180,907,203" href="#" /></map>
</td>
        <!-- / Header -->

I noticed one other thing about my issue that I posted, if I shrink the sidebar then more of the header disappears. It appears like the main content area is overlapping the header, and hiding it, but again this is only happening in IE. I've been tearing my hair out about this, so any help would be wonderful. I don't want to lose the links in the header, just to make this go away, if there might be another solution.

Thanks....

I fixed the issue. Wow, it was something that was so silly...and staring at me, and I could not see it. I've been up for almost 20+ hours working on this site (and another) to get ready for their launches and I guess it was just eluding me. I just needed to set the colspan to account for the header to go across (2) columns (sidebar and main content). Wow. Very cool!

Hope this helps anyone else that comes across the same issue.

I want to bring this dead thread back to life just to see if anything changed in a new version of the theme. I was trying this, following the same code that worked in another site for me, but my page menu disappears. The header shows up perfectly fine, but I lose the menu. Here is the code I was using, in the header.php file.

	<!-- Header -->
        <td id="header" colspan="<?php echo $cols; ?>">
        
        <img src="http://www.thelittleslingcompany.com/images/tlsc_header.png"  border="0" usemap="#Map" />
        
<?php bfa_header_config($bfa_ata_configure_header); ?>

</td>
        <!-- / Header -->

I am using the %page-center, in ATO Style Header Area. Not sure if this is the issue, since I am not using the standard "%pages" but I would love to know if there is something else I have missed. I wish I could show this, but the site is live and I have to make my changes late at night and then revert things back.

check out this thread http://forum.bytesforall.com/showthread.php?t=5774

I might be missing something, or I might have not explained my problem correctly.

Should I be using the %logo area for my header and not the %image?

Or, can I place the img src and map information all within the ATO area mentioned in that thread? Hmm, I never knew that. Will that work for the %image, like it does for that person and the %logo area?

Sorry just trying to clarify as I read the thread you referenced but it talked about adding a logo into the blog and I am trying to add a whole header, make it clickable (which I know how to do) and have it not remove my page menu bar at the same time.

Thanks. I really do appreciate your assistance as always!

there are two seperate areas in teh header (actually there are more but let's talk about %logo and %image) %image controls weither Atahualpa will create an area that will show the image(s) that is in the images/header folder. If you use %image you can also have the blog title and tagline float over the image.

The %logo is for displaying your logo, the blog/tag lines and/or the rss feeds. You can use eithor or both.

If you want to use an image source and map pick one, or have two maps and use bot or toss them both out and do it like the other thread talks. It's your choice.

I personally like the idea of doing it like the other thread because you don't have to change any code and it's stored as an option

I am working to ad multiple href links into the header image. I think I have this worked out except for to lines about 10 px each that are showing above and below my image.
Is this because of a style or class issue? I added the code in ATA->Header Area-> Configure Header Area the url for viewing is: http://www.thaddeusfonck.com/GenWood/

%bar1
<p>
<img src="http://thaddeusfonck.com/GenWood/wp-content/themes/atahualpa/images/header/GWHeaderPadded10.jpg" width="806" height="136" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="10,0,175,30" href="http://www.thaddeusfonck.com/GenWood/">
<area shape="rect" coords="10,36,175,65" href="http://www.thaddeusfonck.com/GenWood/about">
<area shape="rect" coords="10,71,175,101" href="http://www.thaddeusfonck.com/GenWood/photo-gallery">
<area shape="rect" coords="10,107,175,136" href="http://www.thaddeusfonck.com/GenWood/contact-us">
  </map>
</p>
%bar2

Every miss the forest because of the trees.
Found my error.
<p>
That was it, staring me in the face.