Results 1 to 8 of 8
  1. #1
    Join Date
    Jan 2007
    Posts
    14
    Plugin Contributions
    0

    Default ImageMap Explanation

    I have read through every post I can find on this site about creating an ImageMap for the header image, and I just cant seem to figure this out. I cant seem to find a post that really follows this through to a resolve.

    Is there anyone out there that would be willing/able to do a step by step 'How to' detailed explanation on how to incorporate an image map into the header?

    Great appreciation in advance to any/everyone willing to help.

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: ImageMap Explanation

    Here is only a sample of what and how this can be accomplished and this is placed where you want this - tpl_header.php or possibly tpl_main_page.php if you want this outside of the header area
    Code:
    <div id="navigation">
    
    	<!-- Begin Search --><div id="search">
    	<div id="searchbox"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
    	<!-- End Search --></div>
    
    	<!-- begin top navigation -->
    	<div id="navMain">
    	<a href="index.php"><img src="includes/templates/floor/images/spacer.gif" alt="Home Page" width="96" height="44" border="0" /></a>
    <a href="index.php?main_page=login"><img src="includes/templates/floor/images/spacer.gif" alt="My Account" width="114" height="44" border="0" /></a>
    <a href="index.php?main_page=logoff"><img src="includes/templates/floor/images/spacer.gif" alt="Log Out of My Account" width="89" height="44" border="0" /></a><a href="index.php?main_page=shopping_cart"><img src="includes/templates/floor/images/spacer.gif" alt="Shopping Cart" width="131" height="44" border="0" /></a>
    <a href="index.php?main_page=checkout_shipping"><img src="includes/templates/floor/images/spacer.gif" alt="Checkout Now" width="106" height="44" border="0" /></a>
    	<!-- end top nav --></div>
    
    <!-- end navigation wrapper --></div>
    This is where the hot image is part of the design and spacer.gif is a trans image placed over it
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Jan 2007
    Posts
    14
    Plugin Contributions
    0

    Default Re: ImageMap Explanation

    Kobra,

    Great appreciation for the reply. I used the code you suggested, and I see that the links are in the header now, and working, but what I is to have my header image contain some graphical links that will link to the appropriate place using imagemap coordinates.

    My imagemap coordinates on my header graphic are as follows:

    <area shape="rect" alt="" coords="259,127,355,157" href="index.php?main_page=login">
    <area shape="rect" alt="" coords="375,127,481,157" href="index.php?main_page=account">
    <area shape="rect" alt="" coords="492,127,607,158" href="index.php?main_page=contact_us">
    <area shape="rect" alt="" coords="623,125,714,156" href="index.php?main_page=site_map">
    <area shape="rect" alt="" coords="724,126,795,159" href="index.php?main_page=shippinginfo">

    I just want these coordinates in my header to be active links. Any suggestions?

    Again, thanks for the generous help.

  4. #4
    Join Date
    Jan 2007
    Posts
    14
    Plugin Contributions
    0

    Default Re: ImageMap Explanation

    OK. I think I am getting closer to a solution, but still have a few questions.

    Using the code the very gracious Kobra gave in the earlier post, I can get the the links to show up in the header area. The problem I am having now is that the height that I define for the 'spacer.gif' is pushing the header image down by that same amount. The links appear over the background color, not over the logo header image.

    <a href="index.php"><img src="includes/templates/TEST/images/spacer.gif" alt="Home Page" width="230" height="60" border="0" /></a>

    In that example, it would push down my logo image in the header by 60px.

    My question is how do I get the transparent 'spacer.gif' sit on top of the existing logo header image?

    My graphical links on the logo header image are in the lower right hand corner. Can I set the links in the header in such a way that they are only over the portion of the header image that has the graphical links (in the lower right hand corner)?

  5. #5
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: ImageMap Explanation

    My graphical links on the logo header image are in the lower right hand corner.
    Are these link areas part of the header image or separate images?

    What I posted actually creates an inline set of transparent images with a href attached that can be located over a "background image"
    Zen-Venom Get Bitten

  6. #6
    Join Date
    Jan 2007
    Posts
    14
    Plugin Contributions
    0

    Default Re: ImageMap Explanation

    OK. Think I got this functioning pretty much the way I want it, but I think the code is a little wacky and I was hoping that someone might point out the error of my way.

    I found an older post (December 2005) that pointed me in this direction, but seems that some things have changed since then. It did take a little reckless tweaking, but I got it working (I think).

    I created an imagemap to make the links in my header image functional. In order to do that, I did the following:

    Found this original text in tpl.header.php:

    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

    ...and changed it to this:

    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT, 'name="logo" usemap="#logo"') . '</a>'; ?><map name="logo"><?php echo HEADER_LOGO_IMAGEMAP; ?></map></div>

    Then in header.php, I added:

    define('HEADER_LOGO_IMAGEMAP', '<area shape="rect" alt="" coords="254,121,330,164" href="index.php?main_page=login">
    <area shape="rect" alt="" coords="331,121,452,164" href="index.php?main_page=account">
    <area shape="rect" alt="" coords="455,121,590,166" href="index.php?main_page=products_new">
    <area shape="rect" alt="" coords="594,121,683,166" href="index.php?main_page=shippinginfo">
    <area shape="rect" alt="" coords="687,121,799,165" href="index.php?main_page=contact_us">');

    Seems to be working the way that I want it too finally, but someone told me the code was not validating correctly.

    Anyone tell me what I need to do to tighten this up?

    Thanks again.

  7. #7
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,755
    Plugin Contributions
    9

    Default Re: ImageMap Explanation

    Part is the php close tags order
    Code:
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT, 'name="logo" usemap="#logo"') . '</a>'; ?><map name="logo"><?php echo HEADER_LOGO_IMAGEMAP; ?></map></div>
    Pretty sure that it should be last like:
    Code:
    HEADER_LOGO_IMAGEMAP; </map></div> ?>
    and may be others ??

    You can check validation at http://validator.w3.org for yourself
    Zen-Venom Get Bitten

  8. #8
    Join Date
    Apr 2007
    Posts
    22
    Plugin Contributions
    0

    Default Re: ImageMap Explanation

    I'm trying this to enable my image map, but I'm getting php errors. Is this code right?......(obviously if I'm getting errors, it's not...)

    So what's wrong with the code? I can't put my site up till I get the image map working!

    Help!!!

 

 

Similar Threads

  1. ImageMap in the logo...?
    By LloydDobbler in forum Templates, Stylesheets, Page Layout
    Replies: 7
    Last Post: 8 Jan 2009, 01:22 AM
  2. Logo ImageMap
    By DeniseF in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Aug 2008, 03:00 AM
  3. No subcatecory links - use my imagemap
    By bbkidsdad in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 11 May 2008, 07:57 PM
  4. Imagemap in logo
    By bellagraysboutique in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 27 Oct 2007, 05:20 PM
  5. I'm so lost and so tired. Imagemap... please help...
    By Vood in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 30 Sep 2007, 01:14 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg