Jump to content

Change class on mouseover

ferret147

By ferret147
in Javascript Help

Recommended Posts

ferret147 Member

ferret147

Posted
Posted

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.

 

Link to comment
https://forums.phpfreaks.com/topic/230213-change-class-on-mouseover/
Share on other sites
nogray Newbie

nogray

Posted
Posted

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 Member

ferret147

Posted
  • Author
Posted

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 Newbie

nogray

Posted
Posted

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).

nogray Newbie

nogray

Posted
Posted

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 Member

ferret147

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.