...

View Full Version : Text change on hover



JoshTrav
12-22-2007, 06:35 AM
I have been trying to figure out a way to change text of a link as you hover over it.

It is just a normal link, <a href="blah">blah</a>

Is there a way I can use onmouseover to change the link text?

Thanks,
Josh

_Aerospace_Eng_
12-22-2007, 07:15 AM
Careful with this as it might confuse users.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Link Text Change</title>
<style type="text/css">
a.textchange span.text1 {
display:inline;
}
a.textchange:hover span.text1 {
display:none;
}
a.textchange span.text2 {
display:none;
}
a.textchange:hover span.text2 {
display:inline;
}
</style>
</head>

<body>
<a href="#" class="textchange"><span class="text1">This is text</span><span class="text2">This is different text</span></a>
</body>
</html>

effpeetee
12-22-2007, 03:40 PM
This was a method suggested to me be Aero some time ago.
It might not quite be what you want, but it is easy to check.
It is in use in my url

http://exitfegs.co.uk/Sources.html

Frank



#links ul a:hover {font-size : 170&#37;; font-family:sans-serif;color:#0ff;}

#links2 ul a:hover {font-size : 170%; font-family:sans-serif; color:#0ff;}

#links3 ul a:hover {font-size : 170%; font-family:sans-serif; color:#0ff;}
#links {
clear: left;
font: 8.5px "arial", non-serif;
font-weight: bold;
margin-top: 10px;
}

#links ul {
padding-left: 16px;
margin-left: 16px;
color: #fff;

width: 270px;
}

#links ul a {
color:#fff;
font-size: 1.4em;
font-weight:bolder;
text-decoration: none;
}

#links ul a:hover {
text-decoration: underline;
}

#links2 {
clear: left;
font: 8.5px "arial", non-serif;
font-weight:bold;
margin-top: 10px;
}

#links2 ul {
padding-left: 16px;
margin-left: 16px;
color: #fff;
font-weight:normal;
width: 270px;
}

#links2 ul a {
color: #fff;
font-size: 1.4em;
font-weight:bolder;
text-decoration: none;
}

#links2 ul a:hover {
text-decoration: underline;
}

VIPStephan
12-22-2007, 06:02 PM
For the sake of accessibility/usability I’d rather suggest you use (unobtrusive) JavaScript which will just fall back to the default text if JS is disabled. Something like this (very simple example, can be improved):



<a id="link" href="">Hello World!</a>



var b=document.getElementById('link').firstChild;
b.parentNode.onmouseover=function() {
b.nodeValue='This link has been modified through DOM.';
}
b.parentNode.onmouseout=function(){b.nodeValue='Hello World';}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum