Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS, mouseover link, change multiple classes at once.

Posted on 2007-03-20
4
Medium Priority
?
170 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 500 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

670 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