SK Backend | JavaScript Basics

Source/Downloads

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="SwapImage(this.href,'big')"
    onclick="return false">

Do note that many such rollover effects previously achieved with JavaScript are now standard CSS properties 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.

<head>
<script type='text/javascript'>
<!--
/* --------------------------------- */
/*     SOPHIAKNOWS: JAVASCRIPT       */
/* --------------------------------- */
/*         IMAGE ROLLOVER            */
/* --------------------------------- */
/*  Created:  1999-01-15             */
/*  Issued:   1999-01-15             */
/*  Modified: 2005-02-17             */
/*  Copyright (c) 2001-2005          */
/*  Tony Pisarra, SophiaKnows        */
/* --------------------------------- */
/* --------------------------------- */

/*
function SwapImage(s,n) {
    document.images[n].src=s;
    var argv=SwapImage.arguments;
    if(argv[2] && argv[3] && document.getElementById) {
        element=document.getElementById(argv[3]);
        element.innerHTML=argv[2];
        }
    }

-->
</script>
</head>
<! INITIALIZE IMAGE & LABEL ONLOAD-->
<body>


<img src ="images/worldmap.gif"
width ="188" height ="100"
alt="World Map"
usemap ="#worldmap" 
border="0" />

<map id ="worldmap" name="worldmap">
<area shape ="rect" coords ="0,0,70,48"
  href ="images/na2ap.gif"
  onmouseover="SwapImage(this.href,'big',this.title)"
  onclick="return false"
  title="North America"  />

<area shape ="rect" coords ="33,49,65,90"
  href ="images/sa2ap.gif"
  onmouseover="SwapImage(this.href,'big',this.title)"
  onclick="return false"
  title="South America" />

<area shape ="poly" coords ="77,38,102,39,113,52,98,80,89,55,76,47"
  href ="images/af2ap.gif"
  onmouseover="SwapImage(this.href,'big',this.title)"
  onclick="return false"
  title="Africa" />

<area shape ="rect" coords ="82,10,106,35"
  href ="images/eu2ap.gif"
  onmouseover="SwapImage(this.href,'big',this.title)"
  onclick="return false"
  title="Europe" />

<area shape ="rect" coords ="115,11,157,51"
  href ="images/as2ap.gif"
  onmouseover="SwapImage(this.href,'big',this.title)"
  onclick="return false"
  title="Asia" />

<area shape ="circle" coords ="160,74,14"
  href ="images/au2ap.gif"
  onmouseover="SwapImage(this.href,'big',this.title)"
  onclick="return false"
  title="Oceana" />
</map>
<p id="big"> </p>
<p><img src="images/blank.gif" name=big>

</body>

Getting Started:

Here is the only required javascript in the source of the file, a function named SwapImage() that dynamically resets the value of the source of a named inline image to a newly designated file:

SwapImage() accepts two required parameters (name and source) and two optional parameters (id and text):

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

name and source

SwapImage() 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 SwapImage() on mouseover and again on mouseout:

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

<br/>

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

And here is how a pair of thumbnails would call SwapImage() to reset the source of a third larger image named "big" (i.e. a remote rollover):

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

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


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

Note that the alternative source(s) for "big" are now stored in the HREF attributes of the anchor links. This leaves working links for non-javascript enabled browsers and allows the use of the foreshortened syntax this.href

id and text

SwapImage() accepts two additional, optional parameters: id and text, where: id is the 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.

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

Or to give a specific example, here is the image named "big" again, this time followed by a paragraph with the ID "label"

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

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

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


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