Banner art with Imagemap

[Guest Andy C]

Hi,

I want to add a graphic to my shop, that has an embedded "hotspot" in it to take the person back to the main portal (from where the shop can be accessed)

I have the Imagemap setup in the graphic and the XML i need by using MapEdit.exe, but i dont know where to add the XML.

Which file do i need to edit? to enable the hotspot, or if there is a better way that would be great also.

Many thanks in advance

Andy. :w00t:

[roban]

Mapedit creates an html map of your image that is uploaded to the directory where your image is.

[Guest Andy C]

Hi Roban,

Thankyou for your reply,

I've got the html file, with all the references in it, and if i run that file directly from a local folder the "hotspot" works fine, but i need it 'run' when the shop it loaded so the hotspot works, this is whats confusing me?

Any more help would be much appreciated.

Cheers

Andy.

[Guest Andy C]

Hi,

I've made progress, i added the associated code to index.tpl as below:

<div id="pageSurround">

<div id="topHeader">

<align="left"><img src="http://www.scarrowshop.co.uk/skins/Scarrow/styleImages/backgrounds/topHeader.gif" alt="" usemap="#SCARROWSHOP-BANNER" style="border-style:none" />

<map id="SCARROWSHOP-BANNER" name="SCARROWSHOP-BANNER">

<area shape="rect" alt="Scarrow Web Portal" coords="773,88,882,96" href="http://www.scarrow.co.uk" title="Scarrow Web Portal" />

<area shape="default" nohref="nohref" alt="" />

</map>

</div>

<div id="sessionBox">

<div style="padding: 15px 8px 15px 15px; margin: 0px;">

{SEARCH_FORM}

{SESSION}

</div>

</div>

</div>

but, now the seach form/associated box is now shunted down over the main pages of the site.

Look here: www.scarrowshop.co.uk

I'm continuing to tinker and find out what it has suddenly done this, but any further pointers would be most useful.

Cheers

Andy

[Guest Andy C]

Hi,

sorry me again,

I've cracked the problem, if anyone else is wishing to have a graphic in your header with ImageMap hotspots you need to edit index.tpl in your skins global folder and edit the section below to look something like this:

<div id="pageSurround">

<div id="sessionBox">

<div style="padding: 5px 8px 15px 15px; margin: 0px;">

{SEARCH_FORM}

{SESSION}

</div>

</div>

<div id="topHeader">

<align="left"><img src="http://www.scarrowshop.co.uk/skins/Scarrow/styleImages/backgrounds/topHeader.gif" alt="" usemap="#SCARROWSHOP-BANNER" style="border-style:none" />

<map id="SCARROWSHOP-BANNER" name="SCARROWSHOP-BANNER">

<area shape="rect" alt="Scarrow Brothers Web Portal" coords="773,88,882,96" href="http://www.scarrow.co.uk" title="Scarrow Brothers Web Portal" />

</map>

</div>

</div>

This is for a port from the killer skin, but note the id="sessionBox", this needs to be before your image map entry other wise you search & login/register box will shunt over the main page.

you will also need to edit Layout.css and remove edit as below:

#topHeader {

text-align: left;

height: 100px;

background-image: url(../styleImages/backgrounds/topHeader.gif);

background-repeat: no-repeat;

Delete the section in red.

Credit to Roban for the change to Layout.css

I hope that makes sense, as i'm new at this and much of it was by trial and error.

Cheers