Непрофессиональное введение в JAVASCRIPT
Изменение изображений по событиям, инициированных пользователем - часть 2
// ok, we have a JavaScript browser var browserOK = false; var pics;
// --> </script>
<script language="JavaScript1.1"> <!-- hide
// JavaScript 1.1 browser - oh yes! browserOK = true; pics = new Array();
// --> </script>
<script language="JavaScript"> <!-- hide
var objCount = 0; // number of (changing) images on web-page
function preload(name, first, second) {
// preload images and place them in an array
if (browserOK) { pics[objCount] = new Array(3); pics[objCount][0] = new Image(); pics[objCount][0].src = first; pics[objCount][1] = new Image(); pics[objCount][1].src = second; pics[objCount][2] = name; objCount++; } }
function on(name){ if (browserOK) { for (i = 0; i < objCount; i++) { if (document.images[pics[i][2]] != null) if (name != pics[i][2]) { // set back all other pictures document.images[pics[i][2]].src = pics[i][0].src; } else { // show the second image because cursor moves across this image document.images[pics[i][2]].src = pics[i][1].src; } } } }
function off(){ if (browserOK) { for (i = 0; i < objCount; i++) { // set back all pictures if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } }
// preload images - you have to specify which images should be preloaded // and which Image-object on the wep-page they belong to (this is the first // argument). Change this part if you want to use different images (of course // you have to change the body part of the document as well)
preload("link1", "img1f.gif", "img1t.gif"); preload("link2", "img2f.gif", "img2t.gif"); preload("link3", "img3f.gif", "img3t.gif");
// --> </script> <head>
<body> <a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()"> <img name="link1" src="link1f.gif" width="140" height="50" border="0"></a>
