The below statement is along with an example on the Shadowbox web site that shows 3 images of Hong Kong that pop up in Shadowbox when clicking on the regions in the big image.

"Shadowbox supports client-side image maps through the use of area tags."

The documentation related to client and server side image maps is far over my experience level at this time.

Does anyone have any experience with these image maps with Shadowbox in Drupal.

I'm able to create a node (page) and display the big image, click on my rectangular areas, and so on. My images pop up as they should by clicking on the rectangular regions but the do not pop up in Shadowbox. In a very ugly fashion they just pop up in the top left hand corner of my browser.

My code somewhat looks like the below (this will be non-functional)

Only local images are allowed.




Up to now my experience with Shadowbox has been relative simple and has always included plugging rel="shadowbox" into my source.
No mention of Shadowbox or use of rel="shadowbox" in the above code.

Likely I need to plug some additional code in elsewhere or need some guidance if I do need to use rel="shadowbox" in my above example but I'm not sure what and where.

Thanks Much,

Comments

john54’s picture

john54 commented

Below is what I meant to be in the original when I said "My code (source in node (page)) somewhat looks like the below (this will be non-functional)"

<div id="imagemap">
                <img height="300" width="700" class="border" usemap="#imagemap" alt="Image Map" src="/imagemap.png">
                <map name="imagemap" id="imagemap">
                    <area alt="" href="gallery/gibbscam.png" coords="100,100,200,200" shape="rect">
                    <area alt="" href="gallery/ncgcam.png" coords="300,100,400,200" shape="rect">
                    <area alt="" href="gallery/sigmanest.png" coords="500,100,600,200" shape="rect">
                </map>
            </div>
john54’s picture

john54 commented

Please note that everything else in my Drupal/Shadowbox installation with the exception of image maps seems to work perfectly.
Based on doing some searching and ending back on the Shadowbox website I sort of understand the statement on the shadowbox website that says:

The simplest way to set up Shadowbox is to include the JavaScript and CSS files in the of your document (web page) and then call Shadowbox.init, like this:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

I think the combination of Drupal and the Shadowbox module does some of this for you.

Near the top of the page of Shadowbox.js web page that contains all the samples (including the image map) the following is included in the source. 

<!-- this section is the only one needed to run Shadowbox -->
<link rel="stylesheet" type="text/css" href="source/shadowbox.css">
<script type="text/javascript" src="source/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    language: 'en',
    players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});

Though there is some code in my Drupal html output that mentions and resembles what's above this is whatever the Drupal/Shadowbox module by default has put there.

Am I missing something in a template (assuming so) that drives my html output that will not allow Image Maps to work ??
I have a feeling if I find this that I also from that point on will eliminate or perhaps simplify some of my manual markups.

Thanks Much

nicholas.alipaz’s picture

nicholas.alipaz commented
Status: Active » Fixed

you will need to initialize shadowbox on the area tags:

<script type="text/javascript">
Shadowbox.init();
 
window.onload = function() {
    Shadowbox.setup(document.getElementById("imagemap").getElementsByTagName("area"));
}
</script>

Really you can add in the window.onload part anywhere. So your imagemap could be:

<div id="imagemap">
                <img height="300" width="700" class="border" usemap="#imagemap" alt="Image Map" src="/imagemap.png">
                <map name="imagemap" id="imagemap">
                    <area alt="" href="gallery/gibbscam.png" coords="100,100,200,200" shape="rect">
                    <area alt="" href="gallery/ncgcam.png" coords="300,100,400,200" shape="rect">
                    <area alt="" href="gallery/sigmanest.png" coords="500,100,600,200" shape="rect">
                </map>
            </div>
<script type="text/javascript">
window.onload = function() {
    Shadowbox.setup(document.getElementById("imagemap").getElementsByTagName("area"));
}
</script>

But please note that it is only valid to have 1 instance of the id imagemap. Your code has 2!

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.