PDA

Click to See Complete Forum and Search --> : image change with rollover

wynton_ca
10-29-2003, 02:38 PM
I need to amend the current script,....which swaps out an image based on an if/else statement correlating to the image.....to also include a rollover. The image swap is controlled by an onclick event, whereas the rollover needs to be controlled via onmouseover event. Below is the code. I've been racking my head trying to figure out how to get this to work correctly. Because the images are client side only, I cant just specify within the anchor tag or the image tag the rollover. In my head it needs to go within the governing function.

<html>
<head>
<script language="javascript">
//images for the function
swap1 = "btn_videos.gif";
swap2 = "btn_videos_over.gif";


function chng(c_img) {
if (c_img.src.indexOf(swap1)!= -1) {
c_img.src = swap2;
//alert("if");
}
else {
c_img.src = swap1;
//alert("else");
}

}
</script>
</head>
<body>

<a href="#"><img src="btn_videos.gif" width="113" height="27" alt="Show/Hide Details" border="0" onmouseover="rollover()" onclick="chng(this)" name="img1" /></a>

</body>
</html>

Any help, and suggestions or solutions are much much appreciated!

Thanks
gil davis
10-29-2003, 03:06 PM
<img src="btn_videos.gif" width="113" height="27" alt="Show/Hide Details" border="0" onmouseover="chng(this)" onmouseout="chng(this)" name="img1" />
What did you need the link to do?
wynton_ca
10-29-2003, 03:18 PM
The design requirements and UE dictate that the cursor change. I suppose I could accomplish this using a style, but for time's sake, Ive just thrown in the anchor tag as short measure.

the main problem is combining the rollover within the image swap. I need seperate rollovers for the images. So in total there are 4 images.

state 1 - state 1 rollover
state 2 - state 2 rollover

I need them to dynamically swap. Is there any way to call a function nested within another function, without calling the parent function?
gil davis
10-29-2003, 05:27 PM
That sounds like a "state table" or a SWITCH/CASE statement. Store the state separately (I assume it is changed by the click) and use an array to hold the image filenames. For example, you need an "on" and an "off" for an image. If the state changes, just change the filename of the "on" and "off" variables. If you need to do many images, make an array of them indexed by their names.

See attached example. You should add a preload as well.
wynton_ca
10-29-2003, 05:39 PM
The initial image is changed by the onclick event. The main images are toggled between "show" and "hide", with rollovers for the two images having highlighted text. I will check out the example you attached. My problem has been how to encorporate both the onclick and onmouseover events.