Rollover Conundrum

Forum Moderators: open

Message Too Old, No Replies

Rollover Conundrum

onMouseOver affecting more than one image at once.

NetGrease

10:13 am on Aug 14, 2001 (gmt 0)

Trying to work a new site redesign so that when the cursor is over a button,
not only does the button image change, but so do 2 other images on the page.
So far we have this working using a very bloated JavaScript Array provided by Dreamweaver,
but it's very slow to process, even on high-powered machines.
Is there any other way to do this, must be HTML, not Flash etc?

Oh and the catch is it must be browser v4 compatible...

(edited by: NFFC at 2:03 pm (gmt) on Aug. 14, 2001

NetGrease

11:57 am on Aug 14, 2001 (gmt 0)

Turns out I've managed to solve this anyway, using some preloading and a very simple function.

Click here [webmasterworld.com] if you'd like the code and a working example.

;)

NetGrease

1:39 pm on Aug 14, 2001 (gmt 0)

:( - only works in MSIE...

Here's a simple example of the current code;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>Preload & imgswap Functions</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- Begin hiding the following from older browsers that can't handle scripts
// IMAGE PRELOADER
var preload=new Image();
preload.src="./info_btn_up.gif";
preload.src="./info_btn_dn.gif";
preload.src="./default_text.gif";
preload.src="./info_text.gif";
preload.src="./info_icon_up.gif";
preload.src="./info_icon_dn.gif";
// IMAGE SWAPPER
function imgswap(img_name,img_src) {
document[img_name].src=img_src;
}
// USE THE FOLLOWING SYNTAX;
// ONMOUSEOVER="imgswap('img-name','replacement-src');"
// ONMOUSEOUT="imgswap('img-name','original-src');"
// End hiding -->
</SCRIPT>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#ffffff">
<A HREF="">
<IMG NAME="[b]info_btn[/b]" SRC="./info_btn_up.gif" BORDER="0" onmouseover="imgswap('info_btn','./info_btn_dn.gif');
imgswap('text','./info_text.gif');
imgswap('icon','./info_icon_dn.gif');" ONMOUSEOUT="imgswap('info_btn','./info_btn_up.gif');
imgswap('text','./orig_text.gif');
imgswap('icon','./info_icon_up.gif');"></A><BR>
<BR>
<IMG NAME="text" SRC="./orig_text.gif" BORDER="0"><BR>
<BR>
<IMG NAME="icon" SRC="./info_icon_up.gif" BORDER="0">
</BODY></HTML>

Basically, what happens is that when the user moves their mouse over the button info_btn, the button lights up, some text changes to something related to that button, and an icon changes as appropriate also.

I'd (obviously) like to get this working in both major browsers, using only one script if at all possible. Any advice would be greatly appreciated regarding this, as I'd like to avoid having to serve duplicated, browser-specific pages. I'm still working strictly to version 4 browser specifications also.

(edited by: tedster at 4:08 pm (gmt) on Aug. 14, 2001

tedster

4:24 pm on Aug 14, 2001 (gmt 0)

Javascript Source [javascript.internet.com] has a good cross browser script for this kind of "change two places on mouseover" function.

The long "processing time" you mention may be due to the size of the image files you are pre-loading, rather than the JavaScript itself, which looks relatively straightforward. If that's the case, a different script won't fix the time issue.

NetGrease

8:23 am on Aug 15, 2001 (gmt 0)

Regarding the time issue, the base spec machine we're testing on is a Cyrix 100MHz with 40MB RAM, plus both IE and NN v4. As you can see, it gives a Cray T90 [cray.com] a damned good run for it's money.

So that explains the slowness of the image swapping. Artefacts in the actual processing of the images shows that it's this machine that is slow to manipulate images, and not the script itself. We've also tested the script on a P-II Celeron 400MHz, a P-III 750MHz and a Athalon 1GHz. All those three display the script as needed, but unfortunately we've had to bin the current design. Not happy, but that's development for you...