Log in

View Full Version : Image Rollovers


Tharnid
03-28-2008, 05:27 AM
Ok I am trying to put four image rollovers on a page and here is what I have so far:


<script language="javascript 2.1" type="text/javascript">

<!--
//PRE-LOAD IMAGES AS JS IMAGE OBJECTS
var imgajaxianOver = new Image(1);
var imgajaxianOriginal = new Image(1);
var imgajaxianDown = new Image(1);

imgajaxianOver.src = "Images/ajaxianOver.jpg";
imgajaxianOriginal.src = "Images/ajaxianOriginal.jpg";
imgajaxianDown.src = "Images/ajaxianDown.jpg";

function mouseOver(intImgIndex)
{
window.document.images[intImgIndex].src = imgajaxianOver.src;
}//end mouseOver()

function mouseOut(intImgIndex)
{
window.document.images[intImgIndex].src = imgajaxianOriginal.src;
}//end mouseOut()

function mouseDown(intImgIndex)
{
window.document.images[intImgIndex].src = imgajaxianDown.src;
}//end mouseDown()*/


//PRE-LOAD IMAGES AS JS IMAGE OBJECTS
var imgatpTennisOver = new Image(0);
var imgatpTennisOriginal = new Image(0);
var imgatpTennisDown = new Image(0);

imgatpTennisOver.src = "Images/atpTennisOver.jpg";
imgatpTennisOriginal.src = "Images/atpTennisOriginal.jpg";
imgatpTennisDown.src = "Images/atpTennisDown.jpg";

function mouseOver(intImgIndex2)
{
window.document.images[intImgIndex2].src = imgatpTennisOver.src;
}//end mouseOver()

function mouseOut(intImgIndex2)
{
window.document.images[intImgIndex2].src = imgatpTennisOriginal.src;
}//end mouseOut()

function mouseDown(intImgIndex2)
{
window.document.images[intImgIndex].src = imgatpTennisDown.src;
}//end mouseDown()


</script>

My question is for each set of names do I need increase the following:


var imgatpTennisOver = new Image(0);
var imgatpTennisOriginal = new Image(0);
var imgatpTennisDown = new Image(0);

to:


var imgatpTennisOver = new Image(1);
var imgatpTennisOriginal = new Image(1);
var imgatpTennisDown = new Image(1);

The problem is that that both the images will display however when you rollover the bottom image the top image disappears and is replaced by the bottom image. I can get one image to work fine...the second one does not for some reason :confused: Here is my HTML code so far....


<body>

<p align = "center">
<a href = "#"
onClick = "return false"
name = "dummyLink"
id = "dummyLink"
onMouseOver = "javascript:mouseOver(1);"
onMouseOut = "javascript:mouseOut(1);"
onMouseDown = "javascript:mouseDown(1);"
onMouseUp = "javascript:mouseOver(1);"
style = "border:0">
<img src = "Images/ajaxianOriginal.jpg"
name = "image1"
id = "image1"
style = "border:0" /></a>
</p>

<p align = "center">
<a href = "#"
onClick = "return false"
name = "dummyLink2"
id = "dummyLink2"
onMouseOver = "javascript:mouseOver(0);"
onMouseOut = "javascript:mouseOut(0);"
onMouseDown = "javascript:mouseDown(0);"
onMouseUp = "javascript:mouseOver(0);"
style = "border:0">
<img src = "Images/atpTennisOriginal.jpg"
name = "image2"
id = "image2"
style = "border:0" /></a>
</p>

</body>

I just do not get what the problem would be :eek: If anyone could provide a direction that would be great :)
codeexploiter
03-28-2008, 06:38 AM
The JavaScript code you provide has some problems as it used to redefine the functions. The way you've invoked the functions like mouseOver, mouseDown seems to be logically incorrect for me.

Whenever you create an img object you can do it in a number of manner. Either by providing the width or/and height of the img element as well as without providing any of the values

For eg:

var img = new Image(100,900);

In this case 100 represent the width and 900 the height.

Another method is

var img = new Image()

This is also a valid method

I've changed the code you've provided mostly and made it work with multiple slideshow in a page possible. Have a look at the demo page furnished below



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
//Store your images in the following order Over image,Original image, Down image otherwise adjust the alogorithm according to the order.
// var imgNames = ["Images/ajaxianOver.jpg", "Images/ajaxianOriginal.jpg", "Images/ajaxianDown.jpg", "Images/atpTennisOver.jpg", "Images/atpTennisOriginal.jpg", "Images/atpTennisDown.jpg"];
var imgNames = ["1.gif", "2.gif", "3.gif", "4.gif", "5.gif", "6.gif"];
var imgArr = new Array(imgNames.length);
for (var i = 0; i < imgArr.length; i++) {
var img = new Image();
img.src = imgNames[i];
imgArr[i] = img;
}

function mouseOver(intImgIndex){
var idx = intImgIndex * 3;
document.images[intImgIndex].src = imgArr[idx].src;
}//end mouseOver()

function mouseOut(intImgIndex){
var idx = intImgIndex * 3;
document.images[intImgIndex].src = imgArr[idx + 1].src;
}//end mouseOut()

function mouseDown(intImgIndex){
var idx = intImgIndex * 3;
document.images[intImgIndex].src = imgArr[idx + 2].src;
}//end mouseDown()*/
</script>
</head>
<body>
<div>
<a href="#" onMouseOver ="javascript:mouseOver(0);" onMouseOut ="javascript:mouseOut(0);" onMouseDown ="javascript:mouseDown(0);" onMouseUp ="javascript:mouseOver(0);"><img src="2.gif" border="0"/></a>
</div>
<br/>
<br/>
<div>
<a href="#" onMouseOver ="javascript:mouseOver(1);" onMouseOut ="javascript:mouseOut(1);" onMouseDown ="javascript:mouseDown(1);" onMouseUp ="javascript:mouseOver(1);"><img src="5.gif" border="0"/></a>
</div>
</body>
</html>


Each image element has 3 images associated with it one mouseover image, one original image and one mousedown image. The order in which I've inserted the image names in the JS array is the following moueover_image, original_image,mousedown_image.

I hope the code is self explanatory but if you have any problems with it please let me know
Tharnid
03-29-2008, 01:31 AM
I will look it over :-)
Tharnid
03-29-2008, 01:59 AM
That is perfect :-)

I appreciate the help and one must wonder why my CS class is trying to teach us the way I posted...it just leaves me to shake my head :(