JavaScript random image | rollovers | plugins
Navigational Devices
This example will show you how to make one rollover. Feel free to copy the scripts which are behind the rollovers above from the file cvaventure.js. These are more detailed than what follows. The first function is the one which preloads all the dynamic images. Here is the code for one pair of images:
if (document.images) {
If the effect is to work correctly, each pair of images must be identical except for the colour of the text.
To achieve this it is imperative to use a powerful image editor such as The Gimp, Photoshop or Paintshop Pro.
var home_on = new Image(); home_on.src = "home_on.jpg"; var home_off = new Image(); home_off.src = "home_off.jpg"; } The next step is to prepare functions which will perform the actions needed during onMouseOver and onMouseOut events. These two functions take a string, such as 'home', and add the ending '_on.src' or '_off.src' as necessary, to load either the first or the second of the two images preloaded above.
function imageOn(imagex) {
The onMouseOver and onMouseOut events are calls to the above two functions. In order to ensure that the present page
always remains red, this function accepts the name of the present page and checks for it, before writing out the
relevant HTML.
if (document.images) { ion = eval(imagex + "_on.src"); document[imagex].src = ion; } } function imageOff(imagex) { if (document.images) { iof = eval(imagex+"_off.src"); document[imagex].src = iof; } }
function Navigation(present); {
Finally, the script which needs to be included in each page is as simple as follows:
if (present=='home') {document.write('<img src="home_on.jpg" width="156" height="18" border="0">');} else {document.write('<a href="sommaire.html" onMouseOver="imageOn(\'home\');" onMouseOut="imageOff(\'home\');"> <img name="home" src="home_off.jpg" width="156" height="18" border="0"></a>');} }
<script>Navigation('home');</script>
|