Welcome visitor
* Login
* Register
It is currently July 23rd, 2019, 2:46 am
All times are UTC [ DST ]
* Search
View unanswered posts - View active topics

FORUMS » Client Side » HTML



Post new topic Reply to topic  [ 6 posts ] 
Author Message
  cell change color when mouse is over
PostPosted: February 25th, 2009, 8:29 pm 

Posts: 46
hi, my question is pretty much as the topic, how can i make a single cell to change its background color when the mouse is over?

thanks.


Top
 Profile  
 
  Re: cell change color when mouse is over
PostPosted: February 25th, 2009, 8:32 pm 
User avatar

Posts: 112
I would crate a div inside the cell and then modify the backgroundColor
<td><div id="a" onmouseover="event.srcElement.style.backgroundColor = '#ff0000';"
onmouseout="event.srcElement.style.backgroundColor = '#ffffff';">
cell content...
</div></td>

If you want to keep the color for the cell feel free to remove the onmouseout event, hth.
And if you are using many cells use a function.


Top
 Profile  
 
  Re: cell change color when mouse is over
PostPosted: February 25th, 2009, 8:39 pm 

Posts: 46
thanks!! and can i ask, how would the function thing work? just curious.


Top
 Profile  
 
  Re: cell change color when mouse is over
PostPosted: February 25th, 2009, 8:48 pm 
User avatar

Posts: 112
ok here's a quick script

this for the divs
<div id="a" onMouseOver="changeColor();" onMouseOut="returnColor();">

and this for the functions, add this betwen the <head> tags
<script type="text/javascript>
function changeColor() {
event.srcElement.style.backgroundColor = '#ff0000';
}

function returnColor() {
event.srcElement.style.backgroundColor = '#ffffff';
}
</script>


Top
 Profile  
 
  Re: cell change color when mouse is over
PostPosted: February 25th, 2009, 8:50 pm 

Posts: 46
awesome! thanks!! u'll save me alot of time.


Top
 Profile  
 
  Re: cell change color when mouse is over
PostPosted: February 27th, 2009, 5:59 am 
Site Admin
User avatar

Posts: 39
You can also use styles. I'ts even faster.

<style>
  td.myCell {
    background-color: #00FF00;
    }
  td.myCell:hover {
    background-color: #FF0000;
    }
</style>

<table>
  <tr>
    <td class="myCell">Hello World!</td>
  </tr>
</table>

_________________
I'm not afraid to die. I just don't want to be there when it happens.
- Woody Allen


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 6 posts ] 

FORUMS » Client Side » HTML


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron