Change Image and text with mouseover

[crood58]

Hello Everyone! I was wondering if you could help me out.

I use the joomla to run a website for a volunteer fire company that I am a member of. I want to put an interactive view of our fire trucks on line. I would like to use javascript to do this since it will be lightweight. What I want to do is have an imagemap and when the parts of the imagemap is clicked below that image will be two div's one the div will show an overall view of a compartment for example and the other will show the tools and equipment in that compartment. I know this can be done with a mouseover or mouseclick and by getElementbyId. My problem is this I don't know how to program javascript. I have been looking at W3schools website and it seems to be that some information is missing and I was wondering if there is any other good resources out there. I tried searching the net for stuff and came up with nothing.

I got this idea from another website and they have two javascripts (I have posted the code below). One is for the image and the other is the text information. It just seems to be that some of the code is built in javascript and I can't find it anywhere. I was going to insert this into joomla using jumi. I will post the script below.


If you could help it would be greatly appreciated.

Thanks,

Chris

[crood58]

Here is the script that shows the text. My problem with this is the top of the code like how do I know what to code here? I am also assuming that I could style the text using the css since html is used for the variable

<script type="text/javascript">
function showInfo(id,shtml) {
   if (document.getElementById || document.all) {
      var el = document.getElementById? document.getElementById(id): document.all[id];
      if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;
   }
}

var msg1 = '<p><font color="#CCCCCC"><em>Driver/Operator</em></font></p><p><font color="#CCCCCC">The driver operates the Squad from this seat where he can operate the emergency lights, siren, and take the engine into and out of pump gear. The seat is pneumatically adjusted with its own suspention to keep the driver as stable as possible enroute to emergencies. The driver`s primary role is to get the crew to and from an alarm safely. Once onscene, the driver may engage in numerous activites including operating the pump, staging rescue tools, and joining the crew for interior firefighting.</font></p>';
var msg2 = '<p><font color="#CCCCCC"><em>Crew</em></font><img src="graphics/therig/crewinterior.jpg" align="right"></p><p><font color="#CCCCCC">Behind the driver and officer seats are four additional seats for the remainder of the crew. Each seat is outfitted with an SCBA for easy donning and doffing inside the cab. In addition, the interior is lined with multiple tools the crew may take with them when they get off the engine. The middle area (which covers the diesel engine) is stacked with many meters and detectors for any type of hazardous materials or unknown substance call the Squad may respond to.</font></p>';
var msg3 = '<p><font color="#CCCCCC"><em>Pump Panel</em></font></p><p><font color="#CCCCCC">Once the Squad has arrived at the scene of a fire, this is where the operator will control the ability of the engine to provide water to hoselines. The engine has the ability to pump over six handlines and 1500 gallons per minute, however normal use requires only a fraction of that ability. </font></p>';
var msg4 = '<p><font color="#CCCCCC"><em>Driver`s Compartment</em></font><img src="graphics/therig/drivercomptinstruct.jpg" align="right"></p><p><font color="#CCCCCC">In this compartment are many of the tools a driver/operator would require to put the Squad into service at the scene of an emergency. In addition, this compartment provides the space to store his or her gear and an SCBA should they need one.</font></p><ul><li><font color="#CCCCCC">Hose coupling adapters</font></li><li><font color="#CCCCCC">Additional hand tools</font></li><li><font color="#CCCCCC">Extra short sections of hose</font></li><li><font color="#CCCCCC">Etc</font></li></ul>';
var msg5 = '<p><font color="#CCCCCC"><em>Rope Rescue Compartment</em></font></p><p><font color="#CCCCCC">This compartment stores all the rope the Squad carries. Used for high-angle, confined space, and technical rescues, this rescue rope is specially packed in bags for easy deployment on scene. Rescue rope is generally checked and inspected once per week and if used at an emergency, placed out of service for further inspection. All rope is pre-packed in their respective bags in a &quot;ready&quot; status with pre-tied knots and equipment so less time is spent setting up on scene.</font></p><ul><li><font color="#CCCCCC">Roof rope</font></li><li><font color="#CCCCCC">High Angle</font></li><li><font color="#CCCCCC">Tag Line</font></li><li><font color="#CCCCCC">Etc</font></li></ul> ';
var msg6 = '<p><font color="#CCCCCC"><em>Driver`s Side Rear Compartment</em></font></p><p><font color="#CCCCCC">This compartment stores a variety of equipment used by Squad 18. Two circular-type saws are kept on the bottom shelf, one specialized to cut roofs and the other specialized to cut metal bars. A CO extinguisher is also kept here along with several special rescue kits such as the man under train kit.</font></p><ul><li><font color="#CCCCCC">Tool List 1</font></li><li><font color="#CCCCCC">Tool List 2</font></li><li><font color="#CCCCCC">etc</font></li></ul> ';
var msg7 = '<p><font color="#CCCCCC"><em>Rescue Compartment</em></font></p><p><font color="#CCCCCC">This compartment stores much of the tools necessary for rescues using more specialized equipement such as air chisels, Sawzalls, Whizzers, and other smaller cutting tools.You will also see a cart shown in the bottom right of the compartment. This hand cart is used to easily deploy several pneumatic tools and offers several connections and hoselines. Other equipment stored in this compartment (including the blue suit hanging on the door) is used for confined space. Several preconnected SCBA are stored on the top shelf for this purpose. These SCBA are smaller than the normal firefighting SCBA the Squad will use. This allows them to keep a reserve air supply with them should their main line be cut off or fail in a confined space situation. </font></p><ul><li><font color="#CCCCCC">Chem Kit</font></li><li><font color="#CCCCCC">Tool Belt</font></li><li><font color="#CCCCCC">Nail gun</font></li><li><font color="#CCCCCC">etc</font></li></ul> ';
var msg8 = '<p><font color="#CCCCCC"><em>EMS Compartment</em></font></p><p><font color="#CCCCCC">Spare air bottles take up the majority of the space in this compartment. However, the rest of space is for medical supplies used by the Squad. On the left, the Automatic External Defibulator (A.E.D.) and portable suction unit are stored in a smaller compartment. Above those are Bag Valve Masks (B.V.M) of various size for non-breathing patients. Above the space air cylinders are several types of medical bags. These store everything you would expect for a medical emergency from bandages, tourniquettes, oxygen bottles and masks, glycogen, and other supplies.</font></p>';
var msg9 = '<p><font color="#CCCCCC"><em>Hydraulic Compartment </em></font></p><p><font color="#CCCCCC">This is where the all the hydraulic equipment is stored for use. Several types of cutter/spreaders (known as the Jaws of Life) are stored on the bottom. Another handcart holds a portable generator used to supply the hydraulic tools. The top shelf contains the Grip Hoists and metal cabling used for stabilization and the securing of heavy vehicles and equipment while performing a rescue.</font></p>';
</script>

Here is the script that show the image. Where I am confused here is does the if statement have to be included? Also how do I know what is built in javascript or not?

<script language="javascript1.1" type="text/javascript">
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
version = browserName.substring(0,1) + browserVer;

if (version == "N3" || version == "N4" || version == "M4" || version == "N5" ) {
        butA = new Image();
        butA.src = "graphics/therig/driverdoor.jpg";
        butB = new Image();
        butB.src = "graphics/therig/d_crewdoor.jpg";
        butC = new Image();
        butC.src = "graphics/therig/pumppanel.jpg";
        butD = new Image();
        butD.src = "graphics/therig/d_f_compartment.jpg";
        butE = new Image();
        butE.src = "graphics/therig/d_m_compartment.jpg";
        butF = new Image();
        butF.src = "graphics/therig/d_r_compartment.jpg";
        butG = new Image();
        butG.src = "graphics/therig/o_r_compartment.jpg";
        butH = new Image();
        butH.src = "graphics/therig/o_m_compartment.jpg";
      butI = new Image();
        butI.src = "graphics/therig/o_f_compartment.jpg";
        butJ = new Image();
        butJ.src = "graphics/therig/o_pumppanel.jpg";
        butK = new Image();
        butK.src = "graphics/therig/o_crewdoor.jpg";
        butL = new Image();
        butL.src = "graphics/therig/officerdoor.jpg";
      butM = new Image();
      butM.src = "graphics/therig/rear.jpg";
}
function changeImage(imgDocID0,imgObjName0) {
   if (version == "N3" || version == "N4" || version == "M4" || version == "N5" )
        document.images[imgDocID0].src = eval(imgObjName0 + ".src");
}
// -->
</script>

[crood58]

Here is the html that calls the javascript on the mouseover

<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td valign="top"><img src="graphics/therig.gif" width="115" height="25"></td>

              </tr>
              <tr>
                <td valign="top"><p class="pagetext"><font color="#CCCCCC">Squad
                    18 is 2002 Seagrave mid-ship &quot;rescue pumper&quot;. Carrying
                    500 gallons of water in the tank, this engine has been modified
                    for the purposes of the F.D.N.Y. A high-backed compartment
                    area reduces the total length of hose this apparatus may carry
                    when compared to a standard engine company. However, the reduced
                    hose-bed allows for an increased volume of compartment space
                    which the Squad uses to carry its specialized rescue equipment.</font></p>
                  </td>
              </tr>
              <tr>
                <td valign="top">&nbsp;</td>
              </tr>

              <tr>
                <td align="center" valign="top">
                  <p> <img src="graphics/therig/therig.gif" name="interactiverig" width="529" height="101" border="0" usemap="#showcompartments" id="interactiverig"></p></td>
              </tr>
            </table>
            <map name="showcompartments">
              <area shape="poly" coords="11,25,31,25" href="#">
  <area shape="poly" coords="9,24" href="#">
  <area shape="poly" coords="12,27,34,27,28,86,3,87" href="#driverdoor" onMouseOver="changeImage('closeup','butA'),showInfo('info',msg1)" >

  <area shape="poly" coords="79,26" href="#">
  <area shape="poly" coords="79,26,104,26,105,84,78,85" href="#d_crewdoor" onMouseOver="changeImage('closeup','butB'),showInfo('info',msg2)" >
  <area shape="poly" coords="116,30" href="#">
  <area shape="poly" coords="114,31,158,29,157,83,113,84" href="#pumppanel" onMouseOver="changeImage('closeup','butC'),showInfo('info',msg3)" >
  <area shape="poly" coords="196,30" href="#">
  <area shape="poly" coords="195,29,161,30,161,80,195,78" href="#d_f_compartment" onMouseOver="changeImage('closeup','butD'),showInfo('info',msg4)">
  <area shape="poly" coords="237,29" href="#">
  <area shape="poly" coords="238,30,237,53,198,54,198,30" href="#d_m_compartment" onMouseOver="changeImage('closeup','butE'),showInfo('info',msg5)">
  <area shape="poly" coords="243,30" href="#">

  <area shape="poly" coords="241,30,260,29,260,79,240,80" href="#d_r_compartment" onMouseOver="changeImage('closeup','butF'),showInfo('info',msg6)">
  <area shape="poly" coords="269,29" href="#">
  <area shape="poly" coords="269,29,302,28,302,82,268,83" href="#o_r_compartment" onMouseOver="changeImage('closeup','butG'),showInfo('info',msg7)">
  <area shape="poly" coords="306,28" href="#">
  <area shape="poly" coords="306,28,351,28,350,55,304,57" href="#o_m_compartment" onMouseOver="changeImage('closeup','butH'),showInfo('info',msg8)">
  <area shape="poly" coords="389,28" href="#">
  <area shape="poly" coords="388,28,353,28,353,82,391,82" href="#o_f_compartment" onMouseOver="changeImage('closeup','butI'),showInfo('info',msg9)">
  <area shape="poly" coords="393,29" href="#">
  <area shape="poly" coords="394,30,433,29,437,77,396,78" href="#o_pumppanel" onMouseOver="changeImage('closeup','butJ'),showInfo('info',msg10)">

  <area shape="poly" coords="439,23" href="#">
  <area shape="poly" coords="440,23,468,23,470,81,443,80" href="#o_crewdoor" onMouseOver="changeImage('closeup','butK'),showInfo('info',msg11)">
  <area shape="poly" coords="501,23" href="#">
  <area shape="poly" coords="505,24,527,21,528,81,514,79" href="#officerdoor" onMouseOver="changeImage('closeup','butL'),showInfo('info',msg12)">
</map>
            <table width="100%" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td align="left" valign="top" nowrap>&nbsp;</td>
                <td align="right" valign="top"><font color="#FFFFFF" onmouseover="changeImage('closeup','butM'),showInfo('info',msg13)">Click
                  here for a view of the rear</font></td>

              </tr>
              <tr>
                <td width="200" align="left" valign="top" nowrap><font color="#FFFFFF"><strong>Close-up</strong></font></td>
                <td width="100%" align="left" valign="top"><font color="#FFFFFF"><strong>Detail</strong></font></td>
              </tr>
              <tr>
                <td height="270" align="center" valign="top"><img src="graphics/squad18wallplaque.jpg" name="closeup" id="closeup"></td>
                <td height="350" align="left" valign="top" id="info" class="pagetext"> <p align="center">&nbsp;</p>

                  <p align="center">&nbsp;</p>
                  <p align="center">&nbsp;</p>
                  <p align="center"><font color="#CCCCCC">Hold your mouse over
                    a compartment door to view details of the interior!</font></p></td>
              </tr>
            </table>