PDA

View Full Version : 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.


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
<!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) :p