Forgot?

Image Map Not Working

Reply Topic
Link to this post 09 Mar 12

I have been working on this for days and cannot make it work. Please help.

I'm trying to use an image map on the ninja shadowbox image to allow a pdf download.

I've entered the map id "walkpop" (without the quotes) in the ninja shadowbox module in the space provided.

The link to the actual page is here:
http://www.hesonline.com/index.php?option=com_content&view=article&id=257

The code for the article is here (my coordinates do not match up to the lower part of the image at the moment -- I'm just trying to get it to work anywhere on the image so it should be clickable anywhere in the upper left 400x400px square as you can see from the code, but the map id is not loaded at all):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head><link rel="stylesheet" type="text/css" href="/templates/hes/css/marketpage.css">
</head>

<div>
<map name="Walkpop" id="walkpop">
<area shape="rect" coords="0,0,400,400" href="/images/products/order_forms/walktober.pdf" alt="Download Order Form" border="0" style="border:none; outline:none;" />
</map></div>
<div class="walkincentivespop" style="width: 236px; float: right;" class="noprintspp" >{loadposition positionSPP1}

<a href="/images/products/online_campaigns/walktober/walk-incentives-big-download.jpg" rel="shadowbox">
</a>

</div>
</html>

Link to this post 10 Mar 12

Hi Shawn123,

Thanks for the provided info, always helpful.

Some first issues that I've noticed:

- make sure the name attribute for the image map tag is equal to the ID you have to fill out in Ninja Shadowbox.

Like so:

Ninja Shadowbox's Image Map ID = walkpop

<map name="walkpop" id="walkpop">

The image you use as a clickable image map must hold the attribute usemap="#walkpop" within the specific image tags, like so:

<img src="path/to/image" usemap="#walkpop" />

Looking at your comment:

I've entered the map id "walkpop" (without the quotes) in the ninja shadowbox module in the space provided.

and looking at your code (also live):

<map id="walkpop" name="Walkpop">

Notice the difference in the name attribute!
Just try to keep the name and ID the same just to avoid issues.

Looking at the link you've provided I noticed there was no image loaded, I'm not sure if this was intentional or if you meant that this is a part of your issue.
Inspecting your page, I couldn't find any reference to a clickable image map. Everything else was there but the image you use for the image map needs to be loaded in order to make everything work.

Also, at the end, as far as I know it is not possible to open a PDF file within the Ninja Shadowbox popup window.

Try to set up the image map correctly first.
From there we can go on and see what the problem exactly could be.

I hope this helps.
Let us know how it goes.

Kind regards,
John


Forums Joomla Extension Support Ninja Shadowbox & Ninja ShadowPanel Image Map Not Working