Image swap on text mouseover

[rleestma]

Ever been to hp.com? I want to do that for my hyperlinks using a CSS. I used DHTML and made bitmaps galore, but that's a cheap solution that won't fare very well for low-bandwidth users, of course...

I have spent the past 4 hours looking all over the INternet....

HELP!!!

Thanks,

Ryan Leestma

 

[Glowball]

Looking at HP.com's code they are using the functions imageOn() and imageOff() to rollover their images -- like imageOn('imagename'). A search in the source code shows that the functions aren't in the page but called externally from the header to the url

http://welcome.hp-ww.com/country/us/eng/js/welcome_utilities.js

-- I loaded that and downloaded their .js file. The functions are:

        // Swap images on based on a name array
	function imageOn(name) {
	   if (document.images) {
	    document.images[name].src = onImg[name].src
	   }
	}

	// Swap images off based on a name array
	function imageOff(name) {
	   if (document.images) {
	    document.images[name].src = offImg[name].src
	   }
	}

There is a lot more info in their files, including preloading the images, but you should be able to grab their stuff. Nothing is proprietary about this, I wouldn't worry about stealing it. Hope that works for you!

 

[rleestma]

I'm afraid I'm a newbie, and have no idea how to implement this... Is there a way to implement this using CSS? I have been able to get a swapping image function with lists, but it's not ideal to say the least...

Thanks,

Ryan Leestma
ryanleestma@netnitco.net

 

[ToddWW]

CSS is a solution to apply styles to specific elements or tags on your HTML page. Image swaps are done purely with JavaScript.

You can have the JavaScript code directly in your HTML document or you can have it in an external document with javascriptcodeinexternalfile.js

You can play around with this free internet utility that will automatically write your JavaScript code for you.

http://javascript.internet.com/generators/preload-images.html

Hope this helps

TW