Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] Is it possible to have multiple clickable links in the Header or other graph


  #1  
Old Feb 3, 2009, 02:21 AM
Eric Bobrow
 
70 posts · Jan 2009
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
  #2  
Old Feb 3, 2009, 05:41 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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
  #3  
Old Jun 11, 2009, 10:48 AM
tim5046
 
19 posts · Jun 2009
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?
  #4  
Old Jun 12, 2009, 06:37 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
What is not working, what do you get?
  #5  
Old Jun 22, 2009, 08:24 AM
tim5046
 
19 posts · Jun 2009
My entire page goes blank, like there is nothing there. Is there something wrong with my code?
  #6  
Old Jun 22, 2009, 11:59 AM
tim5046
 
19 posts · Jun 2009
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?
  #7  
Old Jun 23, 2009, 08:27 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
post the url so I can see it
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Jun 24, 2009, 07:19 AM
tim5046
 
19 posts · Jun 2009
its at http://blog.englishteastore.com
  #9  
Old Jun 24, 2009, 11:07 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
Add the red code

<img style="display:block" usemap="#header" ...
  #10  
Old Jul 9, 2009, 02:51 PM
Adam
 
10 posts · Jul 2009
Boston, MA
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.
  #11  
Old Aug 10, 2009, 08:04 PM
Masselyn
 
91 posts · Jan 2009
So. California
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 -->
  #12  
Old Aug 11, 2009, 05:37 AM
Masselyn
 
91 posts · Jan 2009
So. California
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....
  #13  
Old Aug 11, 2009, 06:23 AM
Masselyn
 
91 posts · Jan 2009
So. California


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.
  #14  
Old Feb 8, 2010, 08:38 PM
Masselyn
 
91 posts · Jan 2009
So. California
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.

HTML Code:
	<!-- 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.
  #15  
Old Feb 9, 2010, 05:48 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
check out this thread http://forum.bytesforall.com/showthread.php?t=5774
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Feb 9, 2010, 09:36 AM
Masselyn
 
91 posts · Jan 2009
So. California
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!
  #17  
Old Feb 9, 2010, 09:59 AM
juggledad's Avatar
juggledad
 
23,597 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #18  
Old Mar 24, 2010, 04:27 PM
ThaddeusB1's Avatar
ThaddeusB1
 
26 posts · Jul 2009
Lincoln Nebraska
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/

HTML Code:
%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
  #19  
Old Mar 31, 2010, 05:00 PM
ThaddeusB1's Avatar
ThaddeusB1
 
26 posts · Jul 2009
Lincoln Nebraska
Every miss the forest because of the trees.
Found my error.
<p>
That was it, staring me in the face.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Multiple Categories, Multiple versions of Altahualpa Jaguwar Atahualpa 3 Wordpress theme 16 Apr 27, 2010 09:55 AM
[...] on excerpts - can they be made clickable links? HalfWayThere Excerpts, Read more, Pagination 10 Jun 28, 2009 03:36 AM
Trying to insert multiple clickable images above my Logo whatsmytruth Header configuration & styling 1 May 1, 2009 01:07 PM
Custom Header - Inserting HTML table and links over header. hotsauce Header configuration & styling 2 Apr 9, 2009 06:56 AM
All supplied graphics disappeared. Huge thanks from a Newbie for your help. tpatpa Atahualpa 3 Wordpress theme 2 Feb 28, 2009 12:46 PM


All times are GMT -6. The time now is 07:55 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.