Would someone demonstrate how to include mouseover effects to this code:
<STYLE>
.conts{visibility:hidden}
.tab{font-family:Verdana;
font-size:10pt;color:#E6FFDF;
font-color:#E6FFDF;
text-align:center;
cursor:hand;
font-weight:normal}
.selTab{background-color:#9CAEB6;
font-family:Verdana;
font-size:10pt;color:#fffff7;
text-align:center}
</STYLE>Here is a good site to give you some ideas for what I think you're after:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/">http://css.maxdesign.com.au/listamatic/</a><!-- m -->
I believe that you're looking for hover behavior. For example:
a:link, a:visited {
color: #000;
}
a:hover {
color: #CCC;
}
This is a quick example that would change the text color of hyperlinks from black to gray on rollover.Thanks alot dude. I should have better described my situation. That isn't quite what I'm looking for because:
1) I already use a seperate style sheet for link controls
2) I only want to dynamify one specific table (cells, my tabs)
3) Rather than change text color, I'd like to change background color:
-- mouseon = bgcolor; mouseoff = bgimage; --
I'll go check out the link in the previous reply and update this post if i find the answer i seek there.
ps where's pendleton?
-- edit --
I found this (searching this forum):
<td class="tab" id="t3"
onmouseover="this.style.backgroundColor='#6699cc';"
onmouseout="this.style.backgroundImg='image.gif';" >
1</td>
This can be inserted into each table cell and works fine with color bgs.
However, the mouseout I've tampered with. It does not work. How do I code mouseout = IMG?Hey again,
You can add hover effects to non-link elements, but it apparently does not work in IE. Safari and Firefox work just fine.
for example:
td {
background: #ccc;
}
td:hover {
background: #eee;
}
Maybe your best best is the methode you're using. But, why do you need a "mouseout" behavior if you're not actually assigning an action to the mouseout event? Wouldn't it go back to your "non-mouse-over" state?
P.S.
Pendleton is Upstate, midway between Clemson and Anderson. Where are you?Wouldn't it go back to your "non-mouse-over" state?I just tried but it doesn't.
Can I add a hover rule into
<style>
.tab
(see 1st post for rest of code)
USA/SC/Johnsonville Its 40 miles inland of Myrtle Beach.
However, I graduated high school in Landrum SC, near Spartanbug, which is alot closer to you.Yeah you can, I was just dinking around with it and this works in Firefox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>tester</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
.conts {visibility:hidden}
.tab {
font-family:Verdana;
font-size:10pt;color:#E6FFDF;
color: #000;
text-align:center;
cursor:hand;
font-weight:normal;
background: #ccc;
}
.tab:hover {
background: #999;
}
.selTab { background-color:#9CAEB6;
font-family:Verdana;
font-size:10pt;color:#fffff7;
text-align:center}
-->
</style>
<body>
<table>
<tr>
<td class="tab">stuff
</td>
<td class="tab">stuff
</td>
</tr>
</table>
</body>
</html>
But, like I said, PCIE won't pay any attention to a hover unless its associated with a <a> anchor tag.
I did a quick search and found this, it might offer some insight:
<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.htmlBut">http://www.xs4all.nl/~peterned/csshover.htmlBut</a><!-- m -->, like I said, PCIE won't pay any attention to a hover unless its associated with a <a> anchor tagWell you're right about that also. Lets back up for a minute:Wouldn't it go back to your "non-mouse-over" state?I just realized, maybe it isn't reverting back because the cell being mousedover does not contain the background, the table does. Oh if thats true i could slap myself...2) I only want to dynamify one specific table (cells, my tabs)
OOO.... good word.I found this (searching this forum):
<td class="tab" id="t3"
onmouseover="this.style.backgroundColor='#6699cc';"
onmouseout="this.style.backgroundImg='image.gif';" >
1</td>
This can be inserted into each table cell and works fine with color bgs.
However, the mouseout I've tampered with. It does not work. How do I code mouseout = IMG?
You should code the mouseout like this...
<td class="tab" id="t3"
onmouseover="this.style.backgroundColor='#6699cc'"
onmouseout="this.style.backgroundImage='url(image.gif)'" >
1</td>
coothead
<STYLE>
.conts{visibility:hidden}
.tab{font-family:Verdana;
font-size:10pt;color:#E6FFDF;
font-color:#E6FFDF;
text-align:center;
cursor:hand;
font-weight:normal}
.selTab{background-color:#9CAEB6;
font-family:Verdana;
font-size:10pt;color:#fffff7;
text-align:center}
</STYLE>Here is a good site to give you some ideas for what I think you're after:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listamatic/">http://css.maxdesign.com.au/listamatic/</a><!-- m -->
I believe that you're looking for hover behavior. For example:
a:link, a:visited {
color: #000;
}
a:hover {
color: #CCC;
}
This is a quick example that would change the text color of hyperlinks from black to gray on rollover.Thanks alot dude. I should have better described my situation. That isn't quite what I'm looking for because:
1) I already use a seperate style sheet for link controls
2) I only want to dynamify one specific table (cells, my tabs)
3) Rather than change text color, I'd like to change background color:
-- mouseon = bgcolor; mouseoff = bgimage; --
I'll go check out the link in the previous reply and update this post if i find the answer i seek there.
ps where's pendleton?
-- edit --
I found this (searching this forum):
<td class="tab" id="t3"
onmouseover="this.style.backgroundColor='#6699cc';"
onmouseout="this.style.backgroundImg='image.gif';" >
1</td>
This can be inserted into each table cell and works fine with color bgs.
However, the mouseout I've tampered with. It does not work. How do I code mouseout = IMG?Hey again,
You can add hover effects to non-link elements, but it apparently does not work in IE. Safari and Firefox work just fine.
for example:
td {
background: #ccc;
}
td:hover {
background: #eee;
}
Maybe your best best is the methode you're using. But, why do you need a "mouseout" behavior if you're not actually assigning an action to the mouseout event? Wouldn't it go back to your "non-mouse-over" state?
P.S.
Pendleton is Upstate, midway between Clemson and Anderson. Where are you?Wouldn't it go back to your "non-mouse-over" state?I just tried but it doesn't.
Can I add a hover rule into
<style>
.tab
(see 1st post for rest of code)
USA/SC/Johnsonville Its 40 miles inland of Myrtle Beach.
However, I graduated high school in Landrum SC, near Spartanbug, which is alot closer to you.Yeah you can, I was just dinking around with it and this works in Firefox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>tester</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
<!--
.conts {visibility:hidden}
.tab {
font-family:Verdana;
font-size:10pt;color:#E6FFDF;
color: #000;
text-align:center;
cursor:hand;
font-weight:normal;
background: #ccc;
}
.tab:hover {
background: #999;
}
.selTab { background-color:#9CAEB6;
font-family:Verdana;
font-size:10pt;color:#fffff7;
text-align:center}
-->
</style>
<body>
<table>
<tr>
<td class="tab">stuff
</td>
<td class="tab">stuff
</td>
</tr>
</table>
</body>
</html>
But, like I said, PCIE won't pay any attention to a hover unless its associated with a <a> anchor tag.
I did a quick search and found this, it might offer some insight:
<!-- m --><a class="postlink" href="http://www.xs4all.nl/~peterned/csshover.htmlBut">http://www.xs4all.nl/~peterned/csshover.htmlBut</a><!-- m -->, like I said, PCIE won't pay any attention to a hover unless its associated with a <a> anchor tagWell you're right about that also. Lets back up for a minute:Wouldn't it go back to your "non-mouse-over" state?I just realized, maybe it isn't reverting back because the cell being mousedover does not contain the background, the table does. Oh if thats true i could slap myself...2) I only want to dynamify one specific table (cells, my tabs)
OOO.... good word.I found this (searching this forum):
<td class="tab" id="t3"
onmouseover="this.style.backgroundColor='#6699cc';"
onmouseout="this.style.backgroundImg='image.gif';" >
1</td>
This can be inserted into each table cell and works fine with color bgs.
However, the mouseout I've tampered with. It does not work. How do I code mouseout = IMG?
You should code the mouseout like this...
<td class="tab" id="t3"
onmouseover="this.style.backgroundColor='#6699cc'"
onmouseout="this.style.backgroundImage='url(image.gif)'" >
1</td>
coothead