Image Map

[kessock]

Hi all,
I am tryin to do a bit of a big task I think.
The result I want is to have an image with hotspots that create pop ups of a product.
I have dreamweaver and can do a hotspot, but am not too sure what to put into the text etc box to link to a specific product.
My catalogue has the products already, so if I have a product code of 5555 what would I need to put in each of the products?
Any ideas, and please in simple terms if possible as I am no IT programmer.
Thanks in advance.
Mark

[NormanRouxel]

Make a page using a very concise layout for these products.

Put a Fragment at the top where you'll paste the image map HTML into.

Give each product an Extended Info page that contains the add-to Cart button. Note down the Page Name (see Extended Information tab / Popup Page) of each product.

Now in your image maps AREA taglets put

href="ShowPopUp('<page name>', 500, 500)"

where <page name> is the name of the Extended Info page of that product.

[kessock]

Page

Hi Norman,
Thanks for the swift reply.
Where do i I create this page?
Sorry to sound dim just not geat at actinic due to zero knowledge of IT prior to doing my online shop.
Thanks.
Mark

[Darren B]

Normans method is probably the easiest

You could also create a new fragment layout, and style this as you want to then, use some block statements to use the last item in your new products list to populate this layout.

this is what i have done here to create a hot deals product on the front page http://www.kitesrus.co.uk/

my fragment code is

<div class="SpecialBorder">
        <h2 class="SpecialHeading"><actinic:variable Name="FragmentTitle"/></h2>
        <actinic:block type="NewProductsList" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3d%3d%20%3cactinic%3avariable%20name%3d%22ListCount%22%20%2f%3e" >

<h2><Actinic:Variable Name="ProductName"/></h2>
<span class="floatimgleft"><img src="<actinic:variable name="ProductImageFileName" />"  alt="<actinic:variable name="ProductName" />" border="0" /></span>
<a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductReference" />&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&amp;SHOP=<actinic:variable name="ShopID" /></actinic:block>"><actinic:variable name="ProductReference" /></a><br /><actinic:variable name="ProductDescription" />
 <div class="findoutfloat"><a href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductReference" />&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">&amp;SHOP=<actinic:variable name="ShopID" /></actinic:block>">
<img src="findoutmore.gif"  alt="Find Out More"  border="0" /></a> </div>
<actinic:variable name="PriceListRetail" />
</a><br>
<br>

</actinic:block>
</actinic:block>
</div>

you may also want to surround you standard new products list with a block statement to not show the last item in the list.

It would be nice to have this sort of thing under the marketing list options, then you can create these offers on your site.

I hope this helps and not confuses, i find it takes a little more work but makes it easily controllable.

[kessock]

Box

Hi,
So if I want the image to be only in a subsection and for this to be in a box to one side so the customer can use my image to find a product I must first create the box then to put the image map HMTL in the code somewhere so it appears in the box.
What is the fragment about.
Maybe this is bit too hard.
Thanks.
Mark

[leehack]

Maybe this is bit too hard.

At the moment it certainly is yes.

Have a good read of the brochure page and fragment tutorial on my site to get an idea on what is going on. You need to understand the fundamental basics and names of actinic items before you try these things, otherwise you might find yourself up the creek without the paddle.

[kessock]

On Hold

I think I will have to put this idea on hold for a while.
Thanks anyway guys.
Mark

[Darren B]

Sorry to have confused you, it was not my intention. Just offering another method, it looks harder than it is honestly

Im sure you will get there, keep going and it will all fall into place.

[NormanRouxel]

It can be as simple as this.

Use standard Actinic demo site. Go to the books page. Amend each book to have an Extended Info page (that's about 6 mouse clicks).

Then create a fragment at the top of that page. Paste the following into the Fragment Details.

!!<
<img border=0 src ="x-teapot.jpg" alt="Books" usemap ="#testmap" />
<map id="testmap" name="testmap">
<area shape="circle" coords="20,20,20" href ="javascript:ShowPopUp('info_1.html', 600, 600)" alt="Great Expectations" />
<area shape="circle" coords="50,50,20" href ="javascript:ShowPopUp('info_2.html', 600, 600)"" alt="Pride and Prejudice" />
<area shape="circle" coords="80,80,20" href ="javascript:ShowPopUp('info_3.html', 600, 600)"" alt="Far From the Madding Crowd" />
</map> 
>>!

Preview and you now have a working example. First clickable region is the spout.

[Darren B]

He shoots He Scores

GOAL!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[NormanRouxel]

And if you want an add to cart in the popup page, then see http://community.actinic.com/showthread.php?t=32642 where post #4 shows how to make this add to cart in the parent page, rather than the popup.

[kessock]

books page

Thanks for the input.
I didn't really want to go back to the beginningas my site already has 2000 products and I don't want to face inputing that lot again.
Cheers.
Mark