In General: This example adds a dymamic label feature to the standard image only rollover method and generally demonstrates the use of the onmousover event of a linked image (or image map) to dynamically reset the source of one or more inline images.

<a href="big.gif"
    onmouseover="swap_image(this.href,'big')"
    onclick="return false">

Do note that many such rollover effects previously achieved with JavaScript are now standard CSS behaviors and better accomplished through style statements.

That said, many derivative effects based on the rollover's dynamic replacement method make excellent application controls and can be readily extended to support, among other things, slideshow and thumbnail gallery applications.

 

 

Getting Started: The source rollover.js includes: a core function named swap_image() that dynamically resets the value of the source of a named inline image; as well as a utility function named preload() that preloads alternative images in the browser.

Both functions can either be cut-n-pasted into the head of the document hosting the rollover event(s) or accessed in a javascript source file .js via a set of <script> tags

<script type='text/javascript' src='rollover.js'></script>

<script type='text/javascript'>
<!--
function swap_image(name,source) {
    document.images[name].src=source;
    var argv=swap_image.arguments;
    if(argv[2] && argv[3] && document.getElementById) {
        element=document.getElementById(argv[2]);
        element.innerHTML=argv[3];
        }
    }
-->
</script>

swap_image: In General

swap_image() is called, for purposes of a rollover, as the onmousover and/or onmouseout events of an otherwise standard inline HTML anchor link enclosing the image to be rolled over:

<a href="#"
    onmouseover="swap_image('name','source')"
    onmouseout="swap_image('name','source')">
    <IMG src="images/image.gif" name="name" />
</a>

swap_image() can also be called to dynamically replace (rollover) the source of a second, remote, inline document image as either the onmousover, onmouseout or onclick events of an otherwise standard inline HTML anchor link:

<a href="#"
    onclick="swap_image('name_2','source')">
    <IMG src="images/image.gif" name="name_1" />
</a>

<IMG src="images/image2.gif" name="name_2" />

swap_image() takes two required parameters (name and source) and two optional parameters (id and text):

swap_image(name,source[,id,text]);

swap_image: Required Arguments

swap_image() takes two required parameters: name and source, where name is the HTML NAME of an inline document image; and source is a URI specifying the location of an alternative file to be assigned to the image's source.

Here is how a pair of old school rollover buttons (named "button1" and "button2") would call swap_image() using name and souce onmouseover and again onmouseout.

<p>
<a href="example1.html"
    onmouseover="swap_image('button1','images/button1_on.gif')"
    onmouseout="swap_image('button1','images/button1_off.gif')">
    <IMG src="images/button1_off.gif" name="button1" />
</a>

<a href="example2.html"
    onmouseover="swap_image('button2','images/button2_on.gif')"
    onmouseout="swap_image('button2','images/button2_off.gif')">
    <IMG src="images/button2_off.gif" name="button2" />
</a>

  

Note that because in this (highly depricated) example the images are rolling themselves over, name in this case is the HTML NAME of the image targeting swap_image() (or "button1" and "button2" respectively)

Here on the other hand is how a three thumbnails would call swap_image() using name and souce to reset the source of a third larger image named "big" (i.e. a remote rollover):

<p>
<a href="big/slide1.gif"
    onmouseover="swap_image('big',this.href)"
    onclick="return false">
    <IMG src="thumbs/slide1.gif" />
</a>

<a href="big/slide2.gif"
    onmouseover="swap_image('big',this.href)"
    onclick="return false">
    <IMG src="thumbs/slide2.gif" />
</a>

<a href="big/slide3.gif"
    onmouseover="swap_image('big',this.href)"
    onclick="return false">
    <IMG src="thumbs/slide3.gif" />
</a>


<p><IMG src="big/blank.gif" name="big" />

Note that in this example the alternative sources for "big" are now stored in the HREF attributes of the anchor links (this.href). This method leaves working links for non-javascript enabled browsers and makes the code a little more modular

swap_image: Optional Arguments

swap_image() accepts two optional parameters: id and text, where: id is the inline HTML ID of a page element designated to receive a label associated with the image; and text is a text label to be diplayed in the named element.

swap_image(name,source[,id,text]);

Or to give a specific example, here is the image named "big" again, this time followed by a paragraph designated to a recieve a dynamic text label and assigned the HTML ID "label"

<p align=center><IMG src="big/slide1.gif" name="big" /></p>
<p align=center id="label"> </p>

And here is how the three thumbnails would reset both the source of the image "big" as well as the contents of the pargraph "label".

<p>
<a href="big/slide1.gif"
    title="Slide 1"
    onmouseover="swap_image('big',this.href,'label',this.title);"
    onclick="return false">
    <IMG src="thumbs/slide1.gif" />
</a>

<a href="big/slide2.gif"
    title="Slide 2"
    onmouseover="swap_image('big',this.href,'label',this.title);"
    onclick="return false">
    <IMG src="thumbs/slide2.gif" />
</a>

<a href="big/slide3.gif"
    title="Slide 3"
    onmouseover="swap_image('big',this.href,'label',this.title);"
    onclick="return false">
    <IMG src="thumbs/slide3.gif" />
</a>

Note this time the replacement sources are stored in anchor link HREF properties (this.href) and the alternative contents for "label" are stored in the anchor link TITLE properties (this.title). And here is what it might look like:

Slide 1

swap_image: onClick

In the examples so far, swap_image() has been called as an onmouseover (or onmouseout) event. swap_image(), however, can also be called as the HREF property of anchor link, as an onclick event handler or even by another script:

<a href="javascript:swap_image('name','source')">

<a href="#" onclick="swap_image('name','source')">

Onclick behaviors are more appropriate for e.g. a thumbnail gallery than onmouseover events, and here is how the first thumbnail link from the last example might be revised to implement that approach:

<a href="big/slide1.gif"
    title="Slide 1"
    onclick="swap_image('big',this.href,'label',this.title);return false">
    <IMG src="thumbs/slide1.gif" />
</a>

TarpTent on the C & O