Need help with Dreamweaver Spry Tooltips.
Apr 17, 2012 2:30 PM
Hello, all. First off I gotta say that I am new to this so PLEASE go easy on me here. 
Okay, I created some Spry tootips on an image in Dream weaver. Everything worked well in the live view, everything came out as I hoped. But when I uploaded everything the tooltips are on the screen but don't pop up the way(s) they are supposed to. I did not create the site in Dreamwever, I simply created the image map in Fireworks, and imporetd the HTML into Dreamweaver.
Here is the page:
http://thealamedapirates.org/index.php?option=com_content&view=article &id=56&Itemid=81
And here is the code on the page: THANK YOU!!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eqp2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS5 Dreamweaver CS5 target. Created Sun Apr 15 15:01:50 GMT-0700 (Pacific Daylight Time) 2012-->
<script src="http://thealamedapirates.org/SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="http://thealamedapirates.org/SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff">
<img name="Eqp2" src="http://thealamedapirates.org/content/Eqp/Eqp2.png" width="302" height="504" border="0" id="Eqp2" usemap="#m_Eqp2" alt="" />
<map name="m_Eqp2" id="m_Eqp2">
<area shape="poly" coords="72,81,124,79,127,114,204,114,206,79,260,79,260,148,73,148,72, 81" href="javascript:;" alt="Shoulder Pads" id="sprytrigger3" title="Shoulder Pads" />
<area shape="rect" coords="0,448,73,505" href="javascript:;" alt="Cleats" id="sprytrigger6" title="Cleats" />
<area shape="rect" coords="73,287,212,397" href="javascript:;" alt="Leg Pads" id="sprytrigger5" title="Leg Pads" />
<area shape="rect" coords="95,236,212,287" href="javascript:;" alt="Girdle" id="sprytrigger4" title="Girdle" />
<area shape="rect" coords="138,80,195,110" href="javascript:;" alt="Mouth Piece" id="sprytrigger2" title="Mouth Piece" />
<area shape="rect" coords="119,3,212,82" href="javascript:;" alt="Helmet" id="sprytrigger1" title="Helmet" />
</map>
<div class="tooltipContent" id="sprytooltip6"><br />
<img src="../../EQP Images/molded2.jpg" width="63" height="68" alt="Cleats" longdesc="http://thealamedapirates.org/content/Eqp/parts/molded2.jpg" /> <img src="../../EQP Images/screw-cleats.jpg" width="63" height="67" alt="Screw-Ins" longdesc="http://thealamedapirates.org/content/Eqp/parts/screws.jpg" /><br />
Cleats:<br />
They can be molded or screw-in bottoms.<br />
No metal tip cleats allowed. Make<br />
sure they are laced, and tied all the way up!
</div>
<div class="tooltipContent" id="sprytooltip5"><br />
<img src="../../EQP Images/legpads.jpg" width="70" height="72" alt="Leg Pads" longdesc="http://thealamedapirates.org/content/Eqp/parts/legpads.jpg" /><br />
Leg pads:<br />
2 Hip pads, 1 tail bone pad, 2 thigh pads, <br />
and 2 knee pads. All 7 pads must be worn at<br />
all times. </div>
<div class="tooltipContent" id="sprytooltip4">
<p><img src="../../EQP Images/girdle.jpg" width="73" height="79" alt="Girdle" longdesc="http://thealamedapirates.org/content/Eqp/parts/girdle.jpg" /><br />
Girdle: <br />
Worn under the pants. All leg pads are <br />
inserted into the girdle. </p>
</div>
<div class="tooltipContent" id="sprytooltip3">
<p><img src="../../EQP Images/ShPads.jpg" width="119" height="103" alt="Should Pads" longdesc="http://thealamedapirates.org/content/Eqp/parts/ShPads.jpg" /><br />
Shoulder Pads.</p>
</div>
<div class="tooltipContent" id="sprytooltip2">
<p><img src="../../EQP Images/Mpiece.jpg" alt="mouth piece" width="102" height="55" align="textop" /><br />
Mouth Piece:<br />
Can be any color except white and<br />
clear. <br />
Must be in at all times. </p>
</div>
<div class="tooltipContent" id="sprytooltip1">
<p> </p>
<p>Helmet and Chinstrap:<br />
Must be on and buckled up at all <br />
times. </p>
</div>
<script type="text/javascript">
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1", {useEffect:"fade", showDelay:500, hideDelay:200});
var sprytooltip2 = new Spry.Widget.Tooltip("sprytooltip2", "#sprytrigger2", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip3 = new Spry.Widget.Tooltip("sprytooltip3", "#sprytrigger3", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip4 = new Spry.Widget.Tooltip("sprytooltip4", "#sprytrigger4", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip5 = new Spry.Widget.Tooltip("sprytooltip5", "#sprytrigger5", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip6 = new Spry.Widget.Tooltip("sprytooltip6", "#sprytrigger6", {showDelay:500, hideDelay:200, useEffect:"fade"});
</script>
</body>
</html>
