PDA

Click to See Complete Forum and Search --> : Help with mouseover

yoh
01-17-2003, 12:49 PM
Hello,

Can anyone help me modify the following JavaScript code so that when the mouse cursor goes over the image, the script changes three images instead of one? What I'm trying to accomplish is this:

[1] [2] [3]

[2] is the image with the link. When a cursor goes over [2], the script changes [2] to [2'] (2' is another image), while at the same time changing [1] to [1'] and [3] to [3'].

This is the code:


<script language="JavaScript">

<!-- hide

var browserOK = false;
var pics;

// -->

</script>
<script language="JavaScript1.1">

<!-- hide

browserOK = true;
pics = new Array();

// -->

</script>
<script language="JavaScript">

<!-- hide

var objCount = 0;

function preload(name, first, second) {

// preload images and place them in an array

if (browserOK) {
pics[objCount] = new Array(25);
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("Usluge","/images/menu-usluge.gif" , "/images/menu-_usluge.gif");

// -->

</script>

<img border="0" src="/images/clear.gif" width="7" height="25">
<a href="/usluge/index.asp" onMouseOver="on('Usluge')" onMouseOut="off()"><img name="Usluge" border="0" src="/images/menu-Usluge.gif"></a>
gil davis
01-17-2003, 01:33 PM
Here is an example that is much simpler:
<head>
<script>
function change(img, src) {
document.images[img].src = src;
}
</script>
</head>
<body>
<img name="i1" src="BALL_GLASS_BLUE.gif">
<a href="#"
onmouseover="change('i1','BALL-GLASS-CYAN.gif');change('i2','cancel.GIF');change('i3','BALL-GLASS-YELLOW.gif')"
onmouseout="change('i1','BALL_GLASS_BLUE.gif');change('i2','bookmark.gif');change('i3','BALL-GLASS-GREEN.gif')"
onclick="return false">
<img name="i2" src="bookmark.gif"></a>
<img name="i3" src="BALL-GLASS-GREEN.gif">
</body>
You can add your own preload if you like.
yoh
01-17-2003, 02:15 PM
This is a client-side script, right? What are its minimum browser requirements? (Which version of IE and Netscape?)
stewie
01-17-2003, 02:15 PM
never tried this but you certainly can. i use this function to do image swaps real easy. create a function which changes the img src, then down in the html you can call the function and change whatever images you want.

function switcher(place) {
if (place==1) document.mainimage.src="bowling.gif";
if (place==2) document.mainimage.src="mainimage.gif";
}

then in the body on what you mouseover:

<img name="button" src="button.gif" width="228" height="152" border="0" onMouseOver="switcher(1)" onMouseOut="switcher(2)">

try an if statement that does more than one swap:

if (conditional expression) {
statement 1;
statement 2:
}

if the conditional evaluates as true, both statement 1 and 2 will execute.

hope that gets your brain working!
i think ill try to get that working myself, could come in handy.
stewie
yoh
01-17-2003, 02:25 PM
Thanks.

However, it's really important that I know what are these scripts' browser requirements. For the site I design, the requirement is IE 5.0 and NN 6.0 (the requirement has been set by the client, not by me.)
stewie
01-17-2003, 02:34 PM
yoh,

for my solution, im almost 100% sure that my script will work in Netscape 3 or later and IE 4 or later, any browser that recognizes images as objects.

hope that answers your requirements.

stewie
yoh
01-17-2003, 03:07 PM
How about that other script?
yoh
01-17-2003, 05:00 PM
Originally posted by gil davis
You can add your own preload if you like. [/B]

How to add a preload?

I finished the page using your script, but I noticed the images load when you go with the cursor over them.
stewie
01-17-2003, 07:26 PM
here's one way:


in the <head> tag:

<SCRIPT language="JavaScript">

Image1= new Image(200,200)
Image1.src = "button1.gif"

Image2= new Image(125,15)
Image2.src = "button2.gif"

</SCRIPT>

the numbers are whatever size your images are.
Image1 Image2 are variables only needed for the preload, call the image by its normal name in your <img> tag.
add as many images you need.

stewie