...

View Full Version : Changing all classes in html on mouseover



ezarikian
06-27-2006, 10:59 PM
Hello,

I'm trying to get together a method to change all classes of the rolled over object to another class and I need a place to start.

For example:

<td class="a">Hello</td>
<td class="b">Bye</td>
<td class="a">Au Revoir</td>

I want it so that if I mouseover "Hello", it will change the class for Hello and it will also change the class for Au Revoir since they are of the same class. And so forth for the rest of the document.

Any ideas?
Thank you!

Mongus
06-28-2006, 02:27 AM
Recently I've been looking into JQuery (http://jquery.com). It should handle what you want to do.

coothead
06-28-2006, 10:36 AM
Hi there ezarikian,

and a warm welcome to these forums...
Have a look at this example, it may give you some ideas...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>switch className onmouseover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
.a {
line-height:62px;
width:100px;
background-color:#000;
color:#fff;
text-align:center;
margin:5px 0;
}
.b {
line-height:62px;
width:100px;
background-color:#0f0;
color:#f00;
text-align:center;
margin:5px 0;
}
.c {
line-height:62px;
width:100px;
background-color:#00f;
color:#f90;
text-align:center;
margin:5px 0;
}
.aa {
line-height:62px;
width:100px;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:center;
margin:4px auto;;
}
.bb {
line-height:62px;
width:100px;
border:1px solid #0f0;
background-color:#f00;
color:#0f0;
text-align:center;
margin:4px auto;
}
.cc {
line-height:62px;
width:100px;
border:1px solid #00f;
background-color:#f90;
color:#00f;
text-align:center;
margin:4px auto;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
window.onload=function() {

dv=document.getElementsByTagName('*');

for(c=0;c<dv.length;c++) {

dv[c].onmouseover=function() {

cn=this.className;
for(c=0;c<dv.length;c++) {
if(cn==dv[c].className) {

switch(cn) {
case 'a':
dv[c].className='aa';
break;

case 'b':
dv[c].className='bb';
break;

case 'c':
dv[c].className='cc';
break;
}
}
}
}
}
}
//]]>
</script>

</head>
<body>

<div class="a">hello</div>
<div class="b">tom</div>
<div class="c">apple</div>

<p class="a">au revoir</p>
<p class="b">dick</p>
<p class="c">plum</p>

<div class="a">cherio</div>
<div class="b">harry</div>
<div class="c">cherry</div>

<p class="a">bye</p>
<p class="b">fred</p>
<p class="c">grape</p>

</body>
</html>
coothead

ezarikian
06-28-2006, 10:21 PM
Wow this is nice! Would a onmouseoff work in the same manner? Like returning the classes back to what it was before?


Hi there ezarikian,

and a warm welcome to these forums...
Have a look at this example, it may give you some ideas...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>switch className onmouseover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
.a {
line-height:62px;
width:100px;
background-color:#000;
color:#fff;
text-align:center;
margin:5px 0;
}
.b {
line-height:62px;
width:100px;
background-color:#0f0;
color:#f00;
text-align:center;
margin:5px 0;
}
.c {
line-height:62px;
width:100px;
background-color:#00f;
color:#f90;
text-align:center;
margin:5px 0;
}
.aa {
line-height:62px;
width:100px;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:center;
margin:4px auto;;
}
.bb {
line-height:62px;
width:100px;
border:1px solid #0f0;
background-color:#f00;
color:#0f0;
text-align:center;
margin:4px auto;
}
.cc {
line-height:62px;
width:100px;
border:1px solid #00f;
background-color:#f90;
color:#00f;
text-align:center;
margin:4px auto;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
window.onload=function() {

dv=document.getElementsByTagName('*');

for(c=0;c<dv.length;c++) {

dv[c].onmouseover=function() {

cn=this.className;
for(c=0;c<dv.length;c++) {
if(cn==dv[c].className) {

switch(cn) {
case 'a':
dv[c].className='aa';
break;

case 'b':
dv[c].className='bb';
break;

case 'c':
dv[c].className='cc';
break;
}
}
}
}
}
}
//]]>
</script>

</head>
<body>

<div class="a">hello</div>
<div class="b">tom</div>
<div class="c">apple</div>

<p class="a">au revoir</p>
<p class="b">dick</p>
<p class="c">plum</p>

<div class="a">cherio</div>
<div class="b">harry</div>
<div class="c">cherry</div>

<p class="a">bye</p>
<p class="b">fred</p>
<p class="c">grape</p>

</body>
</html>
coothead

ezarikian
06-28-2006, 10:22 PM
Recently I've been looking into JQuery (http://jquery.com). It should handle what you want to do.

Thank you very much. This might help what I am trying to accomplish. I will need to read the documentation a bit more though!

coothead
06-28-2006, 10:55 PM
Hi there ezarikian,

try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
.a {
line-height:62px;
width:100px;
background-color:#000;
color:#fff;
text-align:center;
margin:5px 0;
}
.b {
line-height:62px;
width:100px;
background-color:#0f0;
color:#f00;
text-align:center;
margin:5px 0;
}
.c {
line-height:62px;
width:100px;
background-color:#00f;
color:#f90;
text-align:center;
margin:5px 0;
}
.aa {
line-height:62px;
width:100px;
border:1px solid #000;
background-color:#fff;
color:#000;
text-align:center;
margin:4px auto;;
}
.bb {
line-height:62px;
width:100px;
border:1px solid #0f0;
background-color:#f00;
color:#0f0;
text-align:center;
margin:4px auto;
}
.cc {
line-height:62px;
width:100px;
border:1px solid #00f;
background-color:#f90;
color:#00f;
text-align:center;
margin:4px auto;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
window.onload=function() {

dv=document.getElementsByTagName('*');

for(c=0;c<dv.length;c++) {

dv[c].onmouseover=function() {

cn=this.className;
for(c=0;c<dv.length;c++) {
if(cn==dv[c].className) {

switch(cn) {
case 'a':
dv[c].className='aa';
break;

case 'b':
dv[c].className='bb';
break;

case 'c':
dv[c].className='cc';
break;

case 'aa':
dv[c].className='a';
break;

case 'bb':
dv[c].className='b';
break;

case 'cc':
dv[c].className='c';
break;
}
}
}
}
}
}
//]]>
</script>

</head>
<body>

<div class="a">hello</div>
<div class="b">tom</div>
<div class="c">apple</div>

<p class="a">au revoir</p>
<p class="b">dick</p>
<p class="c">plum</p>

<div class="a">cherio</div>
<div class="b">harry</div>
<div class="c">cherry</div>

<p class="a">bye</p>
<p class="b">fred</p>
<p class="c">grape</p>

</body>
</html>
coothead

ezarikian
06-30-2006, 04:17 PM
Thanks!

I'm still trying to get it so that it's a onmouseoff event... I know its hard for this example since you are actually moving the object around.. but what if its just to change color? Would two functions be possible? One for a mouseoff one for a mouseover?

Beagle
06-30-2006, 04:41 PM
Actually, instead of looping over everything, which is very costly for even moderately sized pages, I would recommend changing the definition of the class itself. JavaScript can manipulate stylesheets and their rules. So you could basically change the definition of the class a onmouseover and change it back onmouseout.

From:
http://www.javascriptkit.com/dhtmltutors/externalcss.shtml



var crossrule;
var ss = document.styleSheets[0];

if (document.styleSheets[0].cssRules)
crossrule=document.styleSheets[0].cssRules
else if (document.styleSheets[0].rules)
crossrule=document.styleSheets[0].rules

for (i=crossrule.length - 1; i >= 0; --i)
{
if (crossrule[i].selectorText.toLowerCase()==".a")
{
targetrule=crossrule[i];
break;
}
}

targetrule.style.color = "red";


This isn't tested, and the speed of it will depend on the size of your external stylesheets, but they can be broken up. If your page is big, I would think this method of changing your stylesheet instead of looping over all elements would be faster.

ezarikian
07-17-2006, 06:52 PM
Hey again,

I'm trying to work a javascript function that changes the class of an element on mouseover and back to normal on mouseout based on the contents of an xml file.

<root>
<element>
<info>
<name>Example</name>
</info>
<relationships>
<child id="Example">A Child</child>
<child id="Example">Another Child</child>
</relationships>
</element>

<element>
<info>
<name>A Child</name>
</info>
</element>

<element>
<info>
<name>Another Child</name>
</info>
</element>

</root>

I have these elements spread out into a table with different <td>'s, for example

<table><tr><td>Example</td><td>Another Child</td><td><A Child></td></tr></table>

I want it so that when I put my mouse over "Example," it does some kind of style adjustment to "Example," "Another Child", and "A Child" (i.e. all of the elements under its relationship node, and itself)... for example changing the background color of them or such.

I suppose I'd have to load the xml file and pass the name of the element that is being rolled over into the function.

Where things become foggy for me is
1) How do I search through a document in javascript looking for a variable or a string match?
2) What would be the easiest way to locate those children that need to be modified so that a style adjustment could be applied? I mean is there any way to target a td that has the value "A Child" in it using javascript? If that is possible I guess something like this could happen:

1. Onmouseover, pass the name of the element mouse is on to a function
2. Load the xml file
3. Search for that name
4. Read all the children
5. Change the class attribute for each children to "highlight" or something along those lines.

Thank you in advance!

ezarikian
07-17-2006, 08:07 PM
Deleted by author



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum