...

View Full Version : Can a mouseover be used to change a different image?



cspcc
09-23-2011, 12:30 AM
I am quite new to JavaScript code and have a challenge. I would like to add a mouseover script to several different images e.g. Manufacturer logos which would cause a background image to change accordingly. There are eight different logos which would refer to eight background images respectively. I have found several scripts which cause the image which has the mouseover to change but not any which cause a different image to change. Is this practical using JavaScript? Any help is greatly appreciated!

Old Pedant
09-23-2011, 02:06 AM
Show us the HTML with the background image in place. Yes, this is easy, but that actual code depends on what HTML you are using.

vwphillips
09-23-2011, 08:52 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/

BODY {
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function BG(src){
document.body.style.backgroundImage='url('+src+')';
}
/*]]>*/
</script>
</head>

<body>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="BG('http://www.vicsjavascripts.org.uk/StdImages/Two.gif');"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" onmouseover="BG('http://www.vicsjavascripts.org.uk/StdImages/Three.gif');"/>
</body>

</html>

Desmondowq
09-23-2011, 09:50 AM
not sure what you mean but it seen like your code is working fine.

html

<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="BG(this);" name="Two"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" onmouseover="BG(this);" name="Three"/>

js

function BG(x){
document.body.style.backgroundImage='url(http://www.vicsjavascripts.org.uk/StdImages/'+x.name+'.gif)';
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum