[SOLVED] Change div background on hover of another element

Aso · #1 (**permalink**) Dec 7th, 2007, 22:15

Is there a script out there that can dynamically change the background of a div to various images, depending on which element is 'hovered' or mouse-overed elsewhere on the page?

In short, I want a div at the bottom of my page to switch between preset background images based on the navigation tab at the top that the user hovers over

Many thanks

Alex

MikeHopley · #2 (**permalink**) Dec 7th, 2007, 22:34

Should be easy. Without loss of generality, let's say you want to change the background of <div id="swap"> when the mouse is over <div id="hover">. Use this javascript:

Code: Select all

swapImg("hover", "newBackgroundImage.png")

function swapImg(id, src) {
document.getElementById(id).onmouseover = function() {
document.getElementById("swap").style.backgroundImage = src
}
}

Something like that, anyway. I may have messed up the abstraction where you go into the second function.

Aso · #3 (**permalink**) Dec 7th, 2007, 22:46

Sorry Mike, no go. I wouldn't know what to change, I'm a javascript amateur

Thanks for the quick response

MikeHopley · #4 (**permalink**) Dec 7th, 2007, 22:54

Quote:

Originally Posted by aso186

Sorry Mike, no go. I wouldn't know what to change, I'm a javascript amateur

Thanks for the quick response

Then we can do the same thing without any abstraction. This should work "out the box"; I'll even comment it for you:

Code: Select all

/* 
"swap" is the id of the <div> whose background you want to change.
"hover" is an example of a <div> (or other element) that makes that change.
"hoverImg.png" is the background image that is used when you mouseover "hover".
You'll need to copy this code for each new background-changing item, so you'll have functions change2, change3, and so on.
*/

document.getElementById("hover").onmouseover = function(){ change1() }

function change1() {
document.getElementById("swap").style.backgroundImage = "hoverImg.png"
}

Blake121 · #5 (**permalink**) Dec 7th, 2007, 23:00

Have you got a link to your web page so we can give you an example?

Basically what you would do is: (If anything is wrong, please correct me)

Code: Select all

<script type="text/javascript">

window.onload = swapImg("hover", "newBackgroundImage.png"); 

function swapImg(id, src) {
 document.getElementById(id).onmouseover = function() {
  document.getElementById(id).style.backgroundImage = src
 }
}

</script>

You would change the "hover" part to the ID of your div. You would change "newBackgroundImage.png" to the path to your image from this file (So it might be "../images/myimage.jpg")

You then place that whole piece of code somewhere in between the <head> </head> section of your webpage.

Aso · #6 (**permalink**) Dec 7th, 2007, 23:11

Code uploaded at http://www.neilraymond.co.uk/test/test.htm

Just can't make it work

EDIT: I'm getting a javascript error

Code: Select all

document.getElementById(id) has no properties

MikeHopley · #7 (**permalink**) Dec 7th, 2007, 23:28

As I said, I might have messed up the first (abstracted) version. Have you tried my second set of code?

You can also debug the code by placing the line alert("break") at various points. That tells you how far the code got.

Aso · #8 (**permalink**) Dec 7th, 2007, 23:35

Tried it. No luck (www.neilraymond.co.uk/test/test2.htm)

EDIT: No alert when debugging either

Blake121 · #9 (**permalink**) Dec 7th, 2007, 23:49

Right, I've had to change the code a bit. But it works now.

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled 3</title>
    <script type="text/javascript">
    
    function swapImage(id, src) {

        document.getElementById(id).style.backgroundImage = "url('" + src + "')";
    }

     </script>
</head>

<body>

<a href="#" id="hoverLink" onmouseover="swapImage('swapDiv','tartan.png')">Hover Element</a>
<div id="swapDiv" style="width: 200px; height: 200px; border: 1px solid red;">Swapped BG</div>

</body>
</html>

I've stripped the handlers from the javascript and just have the function.
I then used a event handler on the link (onmouseover="swapImage('swapDiv','tartan.png')") to trigger the function.

MikeHopley · #10 (**permalink**) Dec 8th, 2007, 00:06

I almost never do this, but since you're so helpful to other members, here's something in return. Merry Christmas.

Working demo page.

*edit* maybe not so useful now. Oh well, it's the thought that counts.

Aso · #11 (**permalink**) Dec 8th, 2007, 11:08

Thank you Mike & Blake. Really appreciate it

Merry Christmas indeed!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] isolate clicks on the background of an element ???	pesho318i	JavaScript Forum	3	Nov 21st, 2007 13:01
[SOLVED] Change Input Textbox Background Color	tejaxx	JavaScript Forum	4	Nov 19th, 2007 20:16
How To Active Hover? Where I have to Change?	opengiga	Web Page Design	9	Oct 5th, 2007 05:45
change colour of text, on hover.	Jason3107	Web Page Design	28	Sep 27th, 2007 23:10
a:hover background chnage	gribble	Web Page Design	1	Aug 12th, 2005 19:29

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Change div background on hover of another element