Solved

CSS, mouseover link, change multiple classes at once.

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

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.
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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)

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now