TD background change with onclick, onmouseover and onmouseout

**shyne** · 03-17-2007, 06:29 PM

Hi John.

As you said here is the DEMO to what I have done and it works to this point.

As you notice I am making a pagination and all I want added to my demo is the onmouseover/onmouseout effect. You notice that when you click on "1" the background changes to a Dark Red color, now all I want is a onmouseover so that it changes to same background when you move your mouse over the TD cell and onmouseout back to white if not clicked.

Code:

http://www.desi-fun.com/demo.html

Thanks

**mburt** · 03-17-2007, 06:35 PM

now all I want is a onmouseover so that it changes to same background when you move your mouse over the TD cell and onmouseout back to white if not clicked.

Doesn't it already do that?

**shyne** · 03-17-2007, 06:40 PM

It does but only once and that too for the link, once you click on the link it will not do it again. try the demo and click on one of the link it will not do it again. I want the wole TD CELL to have that onmouseover effect not just the link.

**jscheuer1** · 03-17-2007, 08:34 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.page, .pageon {
border: 1px solid black;
font-family: arial, verdana;
font-size: 10px;
font-weight: normal;
color: #000000;
overflow:hidden;
}

.page a, .pageon a {
padding: 0 5px;
color: #000000;
display:block;
width:100%;
height:100%;
}

.pageon a {
color: #FFFFFF;
background-color: #C40000;
}

.page a:visited {
color: #000000;
}

.pageon a:visited {
color: #FFFFFF;
background-color: #C40000;
}

.page a:hover, .pageon a:hover {
color: #FFFFFF;
background-color: #C40000;
}

.pageon {
color: #FFFFFF;
background-color: #C40000;
}


</style>

<!--[if IE]>
<style type="text/css">
.page a, .pageon a {
display:inline;
}
</style>
<![endif]-->

<script type="text/javascript">
function toggleCells(el){
rCells=document.getElementsByTagName('td');
for (i = 0; i < rCells.length; i++)
if (rCells[i].className=='pageon')
rCells[i].className='page'
el.className='pageon'
}
</script>
</head>
<body>

<table align="center" cellpadding="0" cellspacing="2" border="1">
<tr>
<td class="page" onclick="toggleCells(this);"><a href="#">1</a></td>
<td class="page" onclick="toggleCells(this);"><a href="#">2</a></td>
<td class="page" onclick="toggleCells(this);"><a href="#">3</a></td>
</tr>
</table>
</body>
</html>

**shyne** · 03-18-2007, 04:46 AM

thank you so much John. I really appreciate your kind help.

**tech_support** · 03-18-2007, 05:00 AM

Hi John.

Oh. (Hits the back button)

Thread: TD background change with onclick, onmouseover and onmouseout

Thread Tools

Search Thread

TD background change with onclick, onmouseover and onmouseout

Bookmarks

Bookmarks

Posting Permissions