Interactive map not working
Permalink
I have created an interactive map in Dreamweaver with Spry tootips. Works fine on all browsers but when I paste the html and link the css and js it breaks.
What is the best way to load it onto a page?
I have linked the css and js via the Extra Header Content panel.
[CODE]
<img src="Bradbury-Map.png" usemap="map">
<map name="map">
<area shape="rect" coords="204,135,219,150" href="#" alt="canada" id="sprytrigger1">
<area shape="rect" coords="204,162,219,177" href="#" alt="virginia" id="sprytrigger3">
<area shape="rect" coords="201,201,217,217" href="#" alt="jamaica" id="sprytrigger4">
<area shape="rect" coords="162,189,178,204" href="#" alt="mexico" id="sprytrigger5">
<area shape="rect" coords="244,305,258,318" href="#" alt="uruguay" id="sprytrigger6">
<area shape="rect" coords="234,318,248,331" href="#" alt="argentina" id="sprytrigger7">
<area shape="rect" coords="230,219,246,235" href="#" alt="trinidad" id="sprytrigger8">
<area shape="rect" coords="507,197,523,213" href="#" alt="india" id="sprytrigger9">
<area shape="rect" coords="405,157,421,172" href="#" alt="turkey" id="sprytrigger10">
<area shape="rect" coords="572,168,587,182" href="#" alt="china" id="sprytrigger11">
<area shape="rect" coords="632,290,649,306" href="#" alt="australia" id="sprytrigger12">
<area shape="rect" coords="678,315,695,331" href="#" alt="nz" id="sprytrigger13">
<area shape="rect" coords="345,122,360,137" href="#" alt="uk" id="sprytrigger14">
<area shape="rect" coords="344,152,359,166" href="#" alt="spain" id="sprytrigger15">
<area shape="rect" coords="420,115,435,130" href="#" alt="russia" id="sprytrigger16">
<area shape="rect" coords="174,155,185,167" href="#" alt="midwest1">
<area shape="rect" coords="174,167,186,178" href="#" alt="midwest2">
<area shape="rect" coords="163,163,175,175" href="#" alt="Midwest3">
<area shape="rect" coords="159,149,172,161" href="#" alt="Midwest4">
<area shape="rect" coords="150,161,162,172" href="#">
</map>
<div class="tooltipContent" id="sprytooltip16"><strong>Bradbury Russia</strong><br>Moscow, Russia</div>
<div class="tooltipContent" id="sprytooltip15"><strong>Athader</strong><br>San Sebastian, Spain</div>
<div class="tooltipContent" id="sprytooltip14"><strong>Bradbury International UK Ltd</strong><br>West Midlands, England</div>
<div class="tooltipContent" id="sprytooltip13"><strong>Hayes International</strong><br>Rotorua, New Zealand</div>
<div class="tooltipContent" id="sprytooltip12"><strong>Bradbury Group Australia</strong><br>
Kingston, Queensland, Australia</div>
<div class="tooltipContent" id="sprytooltip11"><strong>Bradbury Machinery (Shanghai) Co Ltd</strong><br>
Shanghai, China</div>
<div class="tooltipContent" id="sprytooltip10"><strong>Jimmy Unsal</strong><br>
Istanbul, Turkey</div>
<div class="tooltipContent" id="sprytooltip9"><strong>Bradbury India</strong><br>
Kolkata, India</div>
<div class="tooltipContent" id="sprytooltip8"><strong>Thomas And Sons Ltd</strong><br>Trinidad</div>
<div class="tooltipContent" id="sprytooltip7"><strong>Jose Biedma & Assoc</strong><br>Buenos Aires, Argentina</div>
<div class="tooltipContent" id="sprytooltip6"><strong>Iso-Tecnica</strong><br>
Montevideo, Uruguay</div>
<div class="tooltipContent" id="sprytooltip5"><strong>Bradbury</strong><br>Monterrey, Mexico</div>
<div class="tooltipContent" id="sprytooltip4"><strong>Estac Industrial Agencies Ltd</strong><br>Jamaica</div>
<div class="tooltipContent" id="sprytooltip3"><strong>Alliance Machine & Engraving llc</strong><br>Ashland, Virginia, USA</div>
<div class="tooltipContent" id="sprytooltip1"><strong>Metform International Ltd</strong><br>Mississauga, Ontario, Canada</div>
<script type="text/javascript">
<!--
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
var sprytooltip3 = new Spry.Widget.Tooltip("sprytooltip3", "#sprytrigger3");
var sprytooltip4 = new Spry.Widget.Tooltip("sprytooltip4", "#sprytrigger4");
var sprytooltip5 = new Spry.Widget.Tooltip("sprytooltip5", "#sprytrigger5");
var sprytooltip6 = new Spry.Widget.Tooltip("sprytooltip6", "#sprytrigger6");
var sprytooltip7 = new Spry.Widget.Tooltip("sprytooltip7", "#sprytrigger7");
var sprytooltip8 = new Spry.Widget.Tooltip("sprytooltip8", "#sprytrigger8");
var sprytooltip9 = new Spry.Widget.Tooltip("sprytooltip9", "#sprytrigger9");
var sprytooltip10 = new Spry.Widget.Tooltip("sprytooltip10", "#sprytrigger10");
var sprytooltip11 = new Spry.Widget.Tooltip("sprytooltip11", "#sprytrigger11");
var sprytooltip12 = new Spry.Widget.Tooltip("sprytooltip12", "#sprytrigger12");
var sprytooltip13 = new Spry.Widget.Tooltip("sprytooltip13", "#sprytrigger13");
var sprytooltip14 = new Spry.Widget.Tooltip("sprytooltip14", "#sprytrigger14");
var sprytooltip15 = new Spry.Widget.Tooltip("sprytooltip15", "#sprytrigger15");
var sprytooltip16 = new Spry.Widget.Tooltip("sprytooltip16", "#sprytrigger16");
//-->
</script>
[CODE]
What is the best way to load it onto a page?
I have linked the css and js via the Extra Header Content panel.
[CODE]
<img src="Bradbury-Map.png" usemap="map">
<map name="map">
<area shape="rect" coords="204,135,219,150" href="#" alt="canada" id="sprytrigger1">
<area shape="rect" coords="204,162,219,177" href="#" alt="virginia" id="sprytrigger3">
<area shape="rect" coords="201,201,217,217" href="#" alt="jamaica" id="sprytrigger4">
<area shape="rect" coords="162,189,178,204" href="#" alt="mexico" id="sprytrigger5">
<area shape="rect" coords="244,305,258,318" href="#" alt="uruguay" id="sprytrigger6">
<area shape="rect" coords="234,318,248,331" href="#" alt="argentina" id="sprytrigger7">
<area shape="rect" coords="230,219,246,235" href="#" alt="trinidad" id="sprytrigger8">
<area shape="rect" coords="507,197,523,213" href="#" alt="india" id="sprytrigger9">
<area shape="rect" coords="405,157,421,172" href="#" alt="turkey" id="sprytrigger10">
<area shape="rect" coords="572,168,587,182" href="#" alt="china" id="sprytrigger11">
<area shape="rect" coords="632,290,649,306" href="#" alt="australia" id="sprytrigger12">
<area shape="rect" coords="678,315,695,331" href="#" alt="nz" id="sprytrigger13">
<area shape="rect" coords="345,122,360,137" href="#" alt="uk" id="sprytrigger14">
<area shape="rect" coords="344,152,359,166" href="#" alt="spain" id="sprytrigger15">
<area shape="rect" coords="420,115,435,130" href="#" alt="russia" id="sprytrigger16">
<area shape="rect" coords="174,155,185,167" href="#" alt="midwest1">
<area shape="rect" coords="174,167,186,178" href="#" alt="midwest2">
<area shape="rect" coords="163,163,175,175" href="#" alt="Midwest3">
<area shape="rect" coords="159,149,172,161" href="#" alt="Midwest4">
<area shape="rect" coords="150,161,162,172" href="#">
</map>
<div class="tooltipContent" id="sprytooltip16"><strong>Bradbury Russia</strong><br>Moscow, Russia</div>
<div class="tooltipContent" id="sprytooltip15"><strong>Athader</strong><br>San Sebastian, Spain</div>
<div class="tooltipContent" id="sprytooltip14"><strong>Bradbury International UK Ltd</strong><br>West Midlands, England</div>
<div class="tooltipContent" id="sprytooltip13"><strong>Hayes International</strong><br>Rotorua, New Zealand</div>
<div class="tooltipContent" id="sprytooltip12"><strong>Bradbury Group Australia</strong><br>
Kingston, Queensland, Australia</div>
<div class="tooltipContent" id="sprytooltip11"><strong>Bradbury Machinery (Shanghai) Co Ltd</strong><br>
Shanghai, China</div>
<div class="tooltipContent" id="sprytooltip10"><strong>Jimmy Unsal</strong><br>
Istanbul, Turkey</div>
<div class="tooltipContent" id="sprytooltip9"><strong>Bradbury India</strong><br>
Kolkata, India</div>
<div class="tooltipContent" id="sprytooltip8"><strong>Thomas And Sons Ltd</strong><br>Trinidad</div>
<div class="tooltipContent" id="sprytooltip7"><strong>Jose Biedma & Assoc</strong><br>Buenos Aires, Argentina</div>
<div class="tooltipContent" id="sprytooltip6"><strong>Iso-Tecnica</strong><br>
Montevideo, Uruguay</div>
<div class="tooltipContent" id="sprytooltip5"><strong>Bradbury</strong><br>Monterrey, Mexico</div>
<div class="tooltipContent" id="sprytooltip4"><strong>Estac Industrial Agencies Ltd</strong><br>Jamaica</div>
<div class="tooltipContent" id="sprytooltip3"><strong>Alliance Machine & Engraving llc</strong><br>Ashland, Virginia, USA</div>
<div class="tooltipContent" id="sprytooltip1"><strong>Metform International Ltd</strong><br>Mississauga, Ontario, Canada</div>
<script type="text/javascript">
<!--
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
var sprytooltip3 = new Spry.Widget.Tooltip("sprytooltip3", "#sprytrigger3");
var sprytooltip4 = new Spry.Widget.Tooltip("sprytooltip4", "#sprytrigger4");
var sprytooltip5 = new Spry.Widget.Tooltip("sprytooltip5", "#sprytrigger5");
var sprytooltip6 = new Spry.Widget.Tooltip("sprytooltip6", "#sprytrigger6");
var sprytooltip7 = new Spry.Widget.Tooltip("sprytooltip7", "#sprytrigger7");
var sprytooltip8 = new Spry.Widget.Tooltip("sprytooltip8", "#sprytrigger8");
var sprytooltip9 = new Spry.Widget.Tooltip("sprytooltip9", "#sprytrigger9");
var sprytooltip10 = new Spry.Widget.Tooltip("sprytooltip10", "#sprytrigger10");
var sprytooltip11 = new Spry.Widget.Tooltip("sprytooltip11", "#sprytrigger11");
var sprytooltip12 = new Spry.Widget.Tooltip("sprytooltip12", "#sprytrigger12");
var sprytooltip13 = new Spry.Widget.Tooltip("sprytooltip13", "#sprytrigger13");
var sprytooltip14 = new Spry.Widget.Tooltip("sprytooltip14", "#sprytrigger14");
var sprytooltip15 = new Spry.Widget.Tooltip("sprytooltip15", "#sprytrigger15");
var sprytooltip16 = new Spry.Widget.Tooltip("sprytooltip16", "#sprytrigger16");
//-->
</script>
[CODE]
![planist1](/files/avatars/67854.jpg)
Where is the .png file located?
Where is the .png file located?
Where is the .png file located?
Yeah. Corrected that path to images/Bradbury-Map.png but the rollovers still don't work. Is this a problem with the javascript?
Out of curiosity, what was the solution? Was the page not loading the jscript?