Page 1 of 1

image map in header.tpl

Posted: Wed Dec 05, 2012 10:08 pm
by ecustomwheelscom
Hi,

I am trying to update my header with the banner below. I believe i need to do this in the header.tpl file and put some code in there for a image map. Could someone show me how to do this?
I am using version 1541
Here is what I had when it was at oscommerce.

Code: Select all

    <td valign="top" align="center">
<table border="0" width="775" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
  <tr>
    <td valign="top" align="center">

<table border="0" width="780" cellspacing="0" cellpadding="0" height="74">
  <tr class="header">
    <td height="74" valign="top" class="logo_hd"><img src="top.jpg" usemap="#Map" border="0" height="235" width="780" />
      <map name="Map" id="Map">
        <area shape="rect" coords="702,202,773,232" href="/livehelp/lv.php" target=LVV />
        <area shape="rect" coords="12,204,160,232" href="http://ecustomwheels.com/index.php?Category=3" />
        <area shape="rect" coords="332,204,524,232" href="http://ecustomwheels.com/index.php?Category=2" />
        <area shape="rect" coords="525,204,575,232" href="http://ecustomwheels.com/index.php?Category=1" />
        <area shape="rect" coords="380,2,505,37" href="http://ecustomwheels.com/my-account" />
        <area shape="rect" coords="512,3,662,37" href="http://ecustomwheels.com/shopping-cart" />
        <area shape="rect" coords="667,2,778,37" href="http://www.ecustomwheels.com/login" />
        <area shape="rect" coords="579,202,697,232" href="http://www.ecustomwheels.com/brands" />
        <area href="http://www.ecustomwheels.com?Category=0" shape="rect" coords="6,30,60,60" />
        <area href="http://www.ecustomwheels.com/contact-us" shape="rect" coords="66,30,139,61" />
      </map></td>
    </tr>
</table>


Im not sure where to put it.
Thanks for any help.

Re: image map in header.tpl

Posted: Wed Dec 05, 2012 10:47 pm
by kv-3
You can either use the opencart default banner functionality with the default slider module (or any other appropriate module) or add it to the common/header.tpl file in your theme folder.

In first case you would have to add the banner in System->Design->Banners first and then add it in Extensions->Modules->Slideshow->Edit to the Content Top in Home.

Second case is probably more difficult for you if you don't know basics of HTML, but still it is easy. You just would have to add a <div> in the header with your banner inside - probably after the category listing if it is a default theme.

But it has to be just banner, not banner with categories and bunch of links like in your example (otherwise that's going to create many problems for you in the future).

Re: image map in header.tpl

Posted: Wed Dec 05, 2012 11:47 pm
by ecustomwheelscom
Thanks for the info.
Could someone help me with the html? If not where could I go to pay someone to do something small like this?

Thnaks

Re: image map in header.tpl

Posted: Thu Dec 06, 2012 10:28 pm
by ecustomwheelscom
Can anyone help?