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 »

Need to add image map code for header image.


  #1  
Old Apr 1, 2015, 03:16 PM
bda
 
30 posts · Feb 2011
I've created an image map for my header image. It looks like this:

<map name="Header" id="Header">
<area shape="circle" coords="750,87,43" href="stjathenaeum.kohavt.org" alt="Seach our Catalog" />
<area shape="circle" coords="890,87,44" href="ask_question.htm" alt="Ask a Question" />
<area shape="rect" coords="496,44,684,68" href="mailto:inform@stjathenaeum.org" alt="Email Us" />
</map>

I created it in Dreamweaver. The image is at http://www.stjathenaeum.org\WordPres...-images/header. I don't know PHP but from reading it would appear that I have to add the code and the image source to HEADER.PHP. I created a copy of the BFA HEADER.PHP in my child theme directory and renamed it HEADER.PHP. Where do I add all this code in the PHP file?

Any help would be wonderful. This site is in development so I'm assuming that once it is moved to its final location I'll have to edit the location of header image?

Thanks.
  #2  
Old Apr 1, 2015, 04:17 PM
juggledad's Avatar
juggledad
 
23,626 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
put that code - along with the <img...> statement pointing to the image and using the 'usemap' code - in the ATO->Style & edit HEADER AREA->Configure Header Area option.

(see this link for an example of using the <map> tag)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 1, 2015, 05:44 PM
juggledad's Avatar
juggledad
 
23,626 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Do an export of your atahualpa settings and attach them to a reply

You should probably get rid of the %logo too.

oh and the src=".... needs a closing double quote.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Apr 1, 2015 at 05:54 PM.
  #4  
Old Apr 1, 2015, 06:03 PM
bda
 
30 posts · Feb 2011
I activated ATA and have attached the settings file. Will fix the other stuff.
Attached Files
File Type: txt ata-wwwstjathenaeumorg-20150402.txt (14.4 KB, 192 views)
  #5  
Old Apr 1, 2015, 06:14 PM
juggledad's Avatar
juggledad
 
23,626 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
I just imported your export and do not see the map code in the 'Configure Header Area' option.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Apr 1, 2015, 06:27 PM
bda
 
30 posts · Feb 2011
I tried one more thing. I removed %image from the Header Configure Area. I added the image map code above the %pages.

Here's what the code looks like in the Header Config Area:
<img src="http://www.stjathenaeum.org/WordPress/wp-content/ata-images/header/topbar.jpg" width="990" height="150" usemap="#topbar" border="0" />
<map name="topbar">
<area shape="circle" coords="750,87,43" href="stjathenaeum.kohavt.org" alt="Seach our Catalog" />
<area shape="circle" coords="890,87,44" href="ask_question.htm" alt="Ask a Question" />
<area shape="rect" coords="496,44,684,68" href="mailto:inform@stjathenaeum.org" alt="Email Us" />
</map>
%pages


Getting closer. Look at http://www.stjathenaeum.org/WordPress and you can see where the hotspots are if you move over the image. I tried the mailto hotspot and it works.
  #7  
Old Apr 1, 2015, 06:34 PM
bda
 
30 posts · Feb 2011
In response to your reply about not seeing anything in the Header Config. Area - I was exporting the settings from ATA theme and not the Athenaeum child theme. Copied and pasted the code in from Header Config Options in my previous post.

Have exceeded my upload quota - so that's why I just pasted the info in a post.
  #8  
Old Apr 1, 2015, 06:42 PM
bda
 
30 posts · Feb 2011
Complete and absolute success!!!! I had to refresh the page several times and then the image appeared. I also had to tweak the URLs of the links so they work for now.

Thanks for all your help - mainly pointing me finally in the right direction. I spent hours reading stuff on the Web to no avail.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
conditional header image code location jrobie23 New Versions, & Updating 5 Jun 5, 2013 04:11 PM
Replace header image with HTML Code jas001 Header configuration & styling 3 May 20, 2012 12:18 PM
Image/code between header and post symarch Header configuration & styling 1 Jun 29, 2010 09:50 AM
favicon/header image code showing instead of images...wlwmanifest.xml? cocola72 Header configuration & styling 8 Apr 8, 2010 08:34 AM
[SOLVED] Best image size and code for image in sidebars. wheresnifty Sidebars & Widgets 5 Feb 20, 2010 03:28 PM


All times are GMT -6. The time now is 08:29 AM.


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