FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

changing background in CSS

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


alalex
Who can I create a CSS style for a table in which the cell will be of a color, but when you put the mouse over a cell, that cell changes into another color?
I though that I could use onmouseover, but I don't know how to put a bgcolor in it... Question
snowboardalliance
It is with onmouseover, ummm
Code:
onmouseover="this.style.backgroundImage='url(test2.png)';" onmousedown="this.style.backgroundImage='url(test3.png)';" onmouseup="this.style.backgroundImage='url(test2.png)';" onmouseout="this.style.backgroundImage='url(test1.png)';"


I used that before to change images, I think
Code:
onmouseover="this.style.backgroundcolor='#FFFFFF';" onmousedown="this.style.backgroundcolor='#000000';" onmouseup="this.style.backgroundcolor='#FF0000';" onmouseout="this.style.backgroundcolor='#00FF00';"


It also has it change when they click but you can get rid of that part. Let me know if that didn't work.
Kaneda
alalex wrote:
Who can I create a CSS style for a table in which the cell will be of a color, but when you put the mouse over a cell, that cell changes into another color?
I though that I could use onmouseover, but I don't know how to put a bgcolor in it... Question


Very best way would be to use the :hover pseudo-selector of CSS, but that only works for <a..> in Internet Explorer 6-. So yeah, you'd need to use onmouseover. The way that's the least clumsy in terms of HTML (i.e., you don't have to have lots of onmouseover attributes in your HTML code)...

Your stylesheet (let's call it cellhover.css):

Code:

td {
  padding: 20px; /* Just to show the cells better... */
  background-color: #990000;
  color: #ffffff;
}

/* Only table cells inside a table with the class "hovertable" will have the effect: */

.hovertable td.over {
  background-color: #000000;
}


Your javascript (let's call it cellhover.js):

Code:

function cellOver()
{
  // For simplicity, we assume there's only one possible class for the cell.
  this.className = "over";
}
 
function cellOut()
{
  // For simplicity, we assume there's only one possible class for the cell.
  this.className = "";
}
 
function initCells()
{
  var cells = document.getElementsByTagName("TD");
  for (var n = 0; n < cells.length; n++)
  {
    // Better to use an addEvent variation here, but this is just an example.
    // We add these event handlers to all cells on the page, even if some
    // of them won't have the effect applied. This is not the most efficient,
    // but it works, as long as the CSS only defines the "over" class for
    // children of a "hovertable" class table.
    cells[n].onmouseover = cellOver;
    cells[n].onmouseout = cellOut;
  }
}
// Better to use an addEvent variation here, but this is just an example)
window.onload = initCells;


Your HTML:
Code:

<html>
<head>
  <title>Table Hover</title>
  <script type="text/javascript" src="cellhover.js"></script>
  <link href="cellhover.css" rel="stylesheet" type="text/css">
</head>
<body>
  <table class="hovertable">
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
    <tr>
      <td>Cell 3</td>
      <td><a href="#">Cell 4 with a link</a></td>
    </tr>
  </table>

  <!--
         Just another table to show that you can have tables without the
         effect too. Just don't give them the hovertable class:
  -->

  <table>
    <tr>
      <td>This table</td>
      <td>has no</td>
    </tr>
    <tr>
      <td>hover</td>
      <td>functionality</td>
    </tr>
  </table>
</body>
</html>


This may seem like a lot, but it makes for easier maintenance, since you don't have to copy/paste the onmouseover/onmouseout stuff for every cell you make Smile
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.