<html>
<head>
<title>Image Object</title>
<script type="text/javascript">
// initialize empty array
var imageLibrary = new Array();
// pre-cache four images
imageLibrary["image1"] = new Image(350,350);
imageLibrary["image1"].src = "images/desk1.jpg";
imageLibrary["image2"] = new Image(350,350);
imageLibrary["image2"].src = "images/desk2.jpg";
imageLibrary["image3"] = new Image(350,350);
imageLibrary["image3"].src = "images/desk3.jpg";
imageLibrary["image4"] = new Image(350, 350);
imageLibrary["image4"].src = "images/desk4.jpg";
// load an image chose from seelct list
function loadCached(list) {
var img = list.options[list.selectedIndex].value;
document.thumbnail.src = imageLibrary[img].src;
}
</script>
</head>
<body>
<h2>Image Object</h2>
<img src="images/desk1.jpg" name="thumbnail" height="350" width="350">
<form>
<select name="cached" onchange="loadCached(this)">
<option value="image1">Bands
<option value="image2">Clips
<option value="image3">Lamp
<option value="image4">Erasers
</select>
</form>
</body>
</html>
Here is another JavaScript program from the JavaScript Bible
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>12-2 Image Rollovers</title>
<script type="text/javascript">
if (document.images) {
//precache all 'off' button images
var offImgArray = new Array();
offImgArray["play"] = new Image(175, 175);
offImgArray["stop"] = new Image(175, 175);
offImgArray["pause"] = new Image(175, 175);
offImgArray["rewind"] = new Image(175, 175);
// off image array -- set 'off' image path for each button
offImgArray["play"].src = "images/play.png";
offImgArray["stop"].src = "images/stop.png";
offImgArray["pause"].src = "images/pause.png";
offImgArray["rewind"].src = "images/rewind.png";
// precache all 'on' button images
var onImgArray = new Array();
onImgArray["play"] = new Image(175, 175);
onImgArray["stop"] = new Image(175, 175);
onImgArray["pause"] = new Image(175, 175);
onImgArray["rewind"] = new Image(175, 175);
//on image array --- set 'on' image path for each button
onImgArray["play"].src = "images/play_onhover.png";
onImgArray["stop"].src = "images/stop_onhover.png";
onImgArray["pause"].src = "images/pause_onhover.png";
onImgArray["rewind"].src = "images/rewind_onhover.png";
}
// functions that swap images & status bar
function imageOn(imgName) {
if (document.images){
document.images[imgName].src = onImgArray[imgName].src;
}
}
//
function imageOff(imgName){
if (document.images) {
document.images[imgName].src = offImgArray[imgName].src;
}
}
function setMsg(msg) {
window.status = msg;
return true;
}
//controller functions
function playIt(){
}
function stopIt(){
}
function pauseIt(){
}
function rewindIt(){
}
</script>
</head>
<body>
<center>
<form>
<a href="javascript:playIt()" onmouseover = "imageOn('play'); return setMsg('Play the selected tune')" onmouseout="imageOff('play'); return setMsg('')">
<img src="images/play.png" name="play" height="175" width="175" border="1">
</a>
<a href="javascript:playIt()" onmouseover = "imageOn('stop'); return setMsg('Stop the playing tune')" onmouseout="imageOff('stop'); return setMsg('')">
<img src="images/stop.png" name="stop" height="175" width="175" border="1">
</a>
<a href="javascript:playIt()" onmouseover = "imageOn('pause'); return setMsg('Pause the tune')" onmouseout="imageOff('pause'); return setMsg('')">
<img src="images/pause.png" name="pause" height="175" width="175" border="1"></img>
</a>
<a href="javascript:playIt()" onmouseover = "imageOn('rewind'); return setMsg('Rewind the tune')" onmouseout="imageOff('rewind'); return setMsg('')">
<img src="images/rewind.png" name="rewind" height="175" width="175" border="1"></img>
</a>
</form>
</center>
</body>
</html>
No comments:
Post a Comment