Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to get this hover effect working?

Status
Not open for further replies.
kippie

kippie

Technical User
Nov 8, 2001
158
In the HTML below I would like to make a hover effect in LinkA of variable text1. I don't know if this is possible or not or that I make a mistake but it doesn't work while LinkB of variable text2 works nicely. Can anyone help?

This is the HTML:
<html>
<head>
<meta http-equiv=&quot;content-type&quot; content=&quot;text/html;charset=iso-8859-1&quot;>
<meta name=&quot;generator&quot; content=&quot;Adobe GoLive 4&quot;>
<script language=&quot;JavaScript&quot;><!--
function htmlChange(id,message,bg){
d=document;
re=d.all?d.all[id]:d.getElementById(id);
re.style.padding = &quot;25px&quot;
re.innerHTML=message;
re.style.background = &quot;url(&quot;+bg+&quot;)&quot;;
}

var msg1 = 'This is text1 with a <a href=&quot;#&quot; class=&quot;proef1&quot;>Link A</a> '
var msg2 = 'And this is text2 with a <a href=&quot;#&quot; >Link B</a>'
// -->
</script>

<style type=&quot;text/css&quot;><!--
a.proef1:active { color: khaki; font-size: 10pt; font-family: Arial; text-decoration: none }
a.proef1:hover { color: blue; font-size: 10pt; font-family: Arial; text-decoration: none }
a.proef1:link { color: Cyan; font-size: 10pt; font-family: Arial; text-decoration: none }
a.proef1:visited { color: maroon; font-size: 10pt; font-family: Arial; text-decoration: none }

a:link { color: green; font-size: 10pt; font-family: Arial; text-decoration: none }
a:active { color: Salmon; font-size: 10pt; font-family: Arial; text-decoration: none }
a:visited { color: red; font-size: 10pt; font-family: Arial; text-decoration: none }
a:hover { color: orange; font-size: 10pt; font-family: Arial; text-decoration: none; }

.info { color: #191970; font-size: 10pt; font-family: Arial; text-align: justify }
-->
</style>

</head>

<body>
<table border=&quot;2&quot; bordercolor=&quot;red&quot; width=&quot;250&quot; height=&quot;175&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<tr height=&quot;25&quot;>
<td id=&quot;headmenu&quot; colspan=&quot;2&quot; height=&quot;25&quot;><a href=&quot;#&quot; onclick=&quot;htmlChange('textframe',msg1,'bgWhite.gif');&quot;>Link1</a> <a href=&quot;#&quot; onclick=&quot;htmlChange('textframe',msg2,'bgMidnightBlue.gif')&quot;>Link2</a></td>
</tr>
<tr height=&quot;175&quot;>
<td id=&quot;textframe&quot; width=&quot;200&quot; height=&quot;175&quot;>
This is text0 with a <a href=&quot;#&quot;>Link0</a>
</td>
</tr>
</table>
</body>
</html>

Kippie
 
Sort by date Sort by votes
Yes, that works. Thanks
Kippie
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
685
3esolar
3
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
686
bdwilcox
bdwilcox
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
waubain
  • Locked
  • Question
3 state slider toggle switch - move slider to state when hover
Replies
0
Views
240
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top