Solved

CSS, mouseover link, change multiple classes at once.

Posted on 2007-03-20
4
168 Views
Last Modified: 2013-11-19
I have some code... (obviously)

I have menu buttons and page borders that al all CSS based.  I need borderLeft, borderBottom and borderRight to all switch to a different class (i.e. borderLeft_over{  }) when the menu button is moused-over.

JavaScript is not my strong point.

Oh...  The border classes are all used inside a table cell.  <td class="borderBottom"> and the CSS tells it to align the background (border image) to the sides.
0
Comment
Question by:zero118
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 11

Expert Comment

by:flipz
ID: 18759134
To change the class of an object in JS you use the object.className property. If you need to change the class of multiple objects then you'd need a function to handle changing them one at a time. You will also need an ID value of the object to get at it.

<td id="tdObject" class="borderBottom">

<script language="JavaScript">
var objTD = document.getElementById("tdObject");
objTD.className = "newClassName";
</script>
0
 
LVL 1

Author Comment

by:zero118
ID: 18759179
Okay, I understand that clearly.  Meaning I'd need to create the variable and new class name for all the borders in the JS, but what about actually using the mouse-over?
0
 
LVL 11

Accepted Solution

by:
flipz earned 125 total points
ID: 18759247
If you have a function for changing the classes say:

function menuOver() {
//change all the desired classes here
return true;
}

...to keep it simple have another function that resets it back on a mouseout
function menuOut() {
//change all the desired classes back
return true;
}

then you can add the events in whichever object needs the events to fire.

<td id="tdObject" class="borderBottom" onMouseOver="return menuOver();" onMouseOut="return menuOut();">


Does that help?
0
 
LVL 1

Author Comment

by:zero118
ID: 18759391
Much Thanks.  Works perfectly.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question