Two Advanced JS Effects

Moving beyond the basic JS effect takes only minor modifications to the basic script. By now you should have a good idea how to implement the scripts, so I'll just show you the code here and point you to an example to look at.

Dual Onmouseover Effect

First up we have the dual onmouseover effect - hovering over one graphic changes not only that graphic, but another graphic somewhere else on the page. Before examining the code, take a look at a live example of it. I used this script to change the screen of the computer to give the user an idea of what the section contains.

Part 1 of the code: As before, insert this in the HEAD area of your web code, and add any extra instances of toc as you need it.

<script language="JavaScript">
if (document.images)
{
   toc1on = new Image(151,45);
   toc1on.src = "button2_whatistelehealth.gif";
   toc1off = new Image(151,45);
   toc1off.src = "button1_whatistelehealth.gif";
   toc1ad = new Image(95,79);
   toc1ad.src = "unit_centrescreen1.gif";
}

function img_act(imgName)
{
   if (document.images)
   {
       imgOn = eval(imgName + "on.src");
       document [imgName].src = imgOn;
       document["holder"].src = eval(imgName + "ad.src");
   }
}

function img_inact(imgName)
{
   if (document.images)
   {
       imgOff = eval(imgName + "off.src");
       document [imgName].src = imgOff;
       document["holder"].src = "images/unit_centrescreen.gif";
   }
}
</script>

Part 2 of the code: Just like the previous script, make sure each link and graphic has the onmouseover code, and the name="toc#". The buttons in this example have two states: off and on.

<a href="whatis.htm" onmouseover="img_act('toc1')" onmouseout="img_inact('toc1')">
<img src="buttons/button1_whatistelehealth.gif" border="0" name="toc1" WIDTH="151" HEIGHT="45">
</a>

Part 3 of the code: This is the important part. The "holder" image is the one that changes. In the case of this example, it's the centre portion of the screen. The initial graphic is a white GIF (a "blank screen") and each instance of the toc changes the graphic.

<img src="images/unit_centrescreen.gif" name="holder" WIDTH="95" HEIGHT="79">

The best way to learn is by seeing JavaScript in action at the Telehealth Solutions web site and playing with the code.

Image Switch Onmouseover

Next we have the image switch onmouseover effect - hovering over one graphic changes another graphic somewhere else on the page. This script is slightly simpler to implement than the dual onmouseover, and can be implemented faster. Before examining the code, take a look at a live example of it. In this case, I wanted to add a little "jazz" to the site. The effect doesn't add to the navigation in any way, but it does reinforce the theme of the site: digital photography.

Part 1 of the code: As before, insert this in the HEAD area of your web code, and add any extra instances of toc as you need it.

<script language="JavaScript">
if (document.images)
{
   toc1ad = new Image(78,90);
   toc1ad.src = "images/camera2.jpg";

   toc2ad = new Image(78,90);
   toc2ad.src = "images/camera1.jpg";
}

function img_act(imgName)
{
   if (document.images)
   {
       document["holder"].src = eval(imgName + "ad.src");
   }
}

function img_inact(imgName)
{
   if (document.images)
   {
       document["holder"].src = "images/camera1.jpg";
   }
}

</script>

Part 2 of the code: Just like the previous script, make sure each link and graphic has the onmouseover code, and the name="toc#". The graphics don't actually change states - it just triggers the change in Part 3.

<a href="about.htm" target="_self" onmouseover="img_act('toc1'); return true;" onmouseout="img_inact('toc1')">
<img src="images/1.jpg" name="toc1" alt="About the Company" border="0" WIDTH="145" HEIGHT="65">
</a>

Part 3 of the code: This is the important part. The "holder" image is the one that changes. In the case of this example, it's the graphic at the top of the screen.

<img src="images/camera1.jpg" name="holder" alt="Picture This Digital Photography, based in Calgary, Alberta, Canada" WIDTH="78" HEIGHT="90">

The best way to learn is by seeing JavaScript in action at the Picture This web site and playing with the code.

And there you have it - three JavaScript effects that will add some class and excitement to your web sites - all at no cost. Remember to send Scott a thank you note if you use the code on your site! Coming up in Part 3 of this series: combining Ulead SmartSaver Pro's slicing feature, the JavaScript's mentioned here, animated GIFs made with Ulead's GIF Animator and GIF-X for a whole new level of "WOW!".