Change class on mouseover

ferret147 · March 10, 2011

I have been racking my brains for days over this and trying everything I know but as of yet nothing works for what seems to be such a says task.

I have two Div's and when I hover over them I want the class of other divs to change, easy for the div you are currently hovering over but not if you are not hovering!!

OK Here is the code I have mocked up;

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Snooker Brackets</title> 
<style type="text/css"> 
.base {
background-color: #CF6;
height: 50px;
width: 400px;
}
.player1 {
background-color: #000;
height: 50px;
width: 400px;
color: #FFF;
}
.player2 {
background-color: #fff;
height: 50px;
width: 400px;
}
.player1over {
background-color: #009;
height: 50px;
width: 400px;
color: #FFF;
}
.player2over {
background-color: #C9C;
height: 50px;
width: 400px;
}
</style> 
</head> 

<body style="margin: 0pt;"> 
<div class="base player1" onmouseover="player1.className='player1over';" onmouseout="player1.className='player1'">Player 1</div> 
<div class="base player2" onmouseover="player2.className='player2over';" onmouseout="player2over.className='player2'">Player 2</div> 
<div class="base player1">Player 1</div> 
<div class="base player2">Player 2</div> 
<div class="base player1">Player 1</div> 
<div class="base player2">Player 2</div> 
<div class="base player1">Player 1</div> 
<div class="base player2">Player 2</div> 
<div class="base player1">Player 1</div> 
<div class="base player2">Player 2</div> 
<div class="base player1">Player 1</div> 
<div class="base player2">Player 2</div> 
</body> 
</html>

So when you hover over the top two divs the div's with the relating classes change class to the over state.

Kets take the first Div and this code - onmouseout="player1.className='player1'" if the code was onmouseout="this.className='player1'" then the div I am hovering over the class would change with no problems, so I thought if I change this to the class I want changes across the board then it would work but no

Additional information that may help - all of the values for player1 and player2 will be dynamic, this is for a bracketing system that will track a players winning path through a competition.

nogray · March 10, 2011

First you would need to add a unique id to all your div tags (but they should all have a common part to match the player)

e.g.

<div class="..." id="player1_div1"></div><div class="..." id="player1_div2"></div>...

Than, create a javascript function that change the class name for all the ids listed,

e.g.

<script>
function change_class(player, class){
    var my_ids = ['_div1', '_div2'];
    for (var i=0; i<my_ids.length; i++){
        document.getElementById(player+my_ids[i]).className = class;
    }
}
</script>

and your onmouseover and onmouse out will call the function with the appropriate variables.

ferret147 · March 11, 2011

Hi nogray, thanks for you help, I implemented the changes you suggested but could not get it to work!

You will have to forgive me but the closes I get to working with javascript is adding a behavior in Dreamweaver

Here is the code with changes;

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Snooker Brackets</title>
<style type="text/css">
.base {
background-color: #CF6;
height: 50px;
width: 400px;
}
.player1 {
background-color: #000;
height: 50px;
width: 400px;
color: #FFF;
}
.player2 {
background-color: #fff;
height: 50px;
width: 400px;
}
.player1over {
background-color: #009;
height: 50px;
width: 400px;
color: #FFF;
}
.player2over {
background-color: #C9C;
height: 50px;
width: 400px;
}
.class {
background-color: #C9C;
height: 50px;
width: 400px;
}
</style>
<script>
function change_class(player, class){
    var my_ids = ['_div1', '_div2'];
    for (var i=0; i<my_ids.length; i++){
        document.getElementById(player+my_ids[i]).className = class;
    }
}
</script>
</head>
<body style="margin: 0pt;">

<div class="base" id="player_div1" onmouseover="player1.className='player1over';" onmouseout="player1.className='player1'">Player 1</div>
<div class="base" id="player_div1" onmouseover="player2.className='player2over';" onmouseout="player2over.className='player2'">Player 2</div>
<div class="base player1" id="player1_div2">Player 1</div>
<div class="base player2" id="player2_div2">Player 2</div>
<div class="base player1" id="player1_div3">Player 1</div>
<div class="base player2" id="player2_div3">Player 2</div>
<div class="base player1" id="player1_div4">Player 1</div>
<div class="base player2" id="player2_div4">Player 2</div>
<div class="base player1" id="player1_div5">Player 1</div>
<div class="base player2" id="player2_div5">Player 2</div>
<div class="base player1" id="player1_div6">Player 1</div>
<div class="base player2" id="player2_div6">Player 2</div>
</body>
</html>

nogray · March 11, 2011

You need to change your onmouseover and onmouseout events to call the function, e.g.

onmouseover="change_class('player1', 'player1over');"

Also you would need to change this line

var my_ids = ['_div1', '_div2'];

to include the other divs (up to 6 from your code).

ferret147 · March 11, 2011

I done that and still no joy, do you think it would be a problem with the double class's I am using!

nogray · March 12, 2011

Try this,

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Snooker Brackets</title>
<style type="text/css">
.base {
background-color: #CF6;
height: 50px;
width: 400px;
}
.player1 {
background-color: #000;
height: 50px;
width: 400px;
color: #FFF;
}
.player2 {
background-color: #fff;
height: 50px;
width: 400px;
}
.player1over {
background-color: #009;
height: 50px;
width: 400px;
color: #FFF;
}
.player2over {
background-color: #C9C;
height: 50px;
width: 400px;
}
.class {
background-color: #C9C;
height: 50px;
width: 400px;
}
</style>
<script>
function change_class(player, cls){
var my_ids = ['_div2', '_div3', '_div4', '_div5', '_div6'];
for (var i=0; i<my_ids.length; i++){
	document.getElementById(player+my_ids[i]).className = cls;
}
}
</script>
</head>
<body style="margin: 0pt;">
<div class="base" id="player1_div1" onmouseover="change_class('player1', 'base player1over');" onmouseout="change_class('player1', 'base player1');">Player 1</div>
<div class="base" id="player2_div1" onmouseover="change_class('player2', 'base player2over');" onmouseout="change_class('player2', 'base player2');">Player 2</div>
<div class="base player1" id="player1_div2">Player 1</div>
<div class="base player2" id="player2_div2">Player 2</div>
<div class="base player1" id="player1_div3">Player 1</div>
<div class="base player2" id="player2_div3">Player 2</div>
<div class="base player1" id="player1_div4">Player 1</div>
<div class="base player2" id="player2_div4">Player 2</div>
<div class="base player1" id="player1_div5">Player 1</div>
<div class="base player2" id="player2_div5">Player 2</div>
<div class="base player1" id="player1_div6">Player 1</div>
<div class="base player2" id="player2_div6">Player 2</div>
</body>
</html>

ferret147 · March 12, 2011

Thanks nogray that works really well.

One last question, is it possible to put the player data into a array!

Basically there will be 32 player names which will replace the player1, player2 etc

To give you an idea of what I am doing here is the dev page I am working on - LINK

Sign In

Change class on mouseover

Recommended Posts

ferret147

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

ferret147

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

ferret147

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

ferret147

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information