Solved

CSS, mouseover link, change multiple classes at once.

Posted on 2007-03-20
4
165 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
  • 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

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

773 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