homepage Welcome to WebmasterWorld Guest from 23.22.179.210
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Rollover Conundrum
onMouseOver affecting more than one image at once.
NetGrease




msg:617696
 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




msg:617697
 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




msg:617698
 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




msg:617699
 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




msg:617700
 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...

:)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved