PDA

View Full Version : Help with finding a text effect script

JustLikeYou
10-22-2002, 05:36 AM
I was browsing around a while ago and saw a neat little script where, in a text link, the letters were all mixed up, but when you hovered your mouse over it, the letters showed up in the right order, and was also in the right order when clicked (As in...the link showed up as "oHem", but when the mouse was over it, would show up as "Home"). However, the letters would go back to being mixed when the mouse was taken away from the link. I thought this was pretty neat and wanted to use it for a few little links on my page. My problem is that I have looked all over HTML code sites and I have not been able to find it anywhere. I was wondering if this code could be easily written? I'm no good at writing them, although I'm trying to learn. Is there anybody who could write it? Is there anywhere I could find it? Thanks for your time!

-Brittany
glenngv
10-22-2002, 06:17 AM
Originally posted by JustLikeYou
My problem is that I have looked all over HTML code sites and I have not been able to find it anywhere.
-Brittany

you found it!
you can view the source of the site you mentioned and see the code. of course, if you use it, you have to include the owner's credit :)
beetle
10-22-2002, 06:36 AM
How's this? (acutally took less than I thought!)<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>

</style>
<script>
function scramble(a) {
var t = a.firstChild;
t.nodeValue = t.nodeValue.replace(/(.)(.)/g,"$2$1");
}

function scrambleAll() {
var collA = document.getElementsByTagName("A");
for (var i=0; i<collA.length; i++)
scramble(collA[i]);
}

function findA(e) {
var a = (document.all) ? e.srcElement : e.target;
if (a.nodeName != "A") return;
scramble(a);
}
</script>
</head>
<body onLoad="scrambleAll();" onMouseOver="findA(event);" onMouseOut="findA(event)">
<p><a href="#">Hello World!</a> This is just some <a href="#">text</a> that will help me test <a href="#">exactly</a> how well this <a href="#">scrambler</a> I wrote works.</p>
<p>Should work with link that are all numbers too <a href="#">1234567</a>
</body>
</html>You can pretty much cut and paste it into ANY document and it should work.
JustLikeYou
10-22-2002, 06:46 AM
Thank you both!

Glenngv: ahh...it must have slipped my mind this time! Of course, view source...how could I forget. *feels stupid* Heh. Thanks! And Beetle...I'll have to try that out. For now, though, I'm going to go to sleep. It's nearly 2 in the morning and I'm supposed to get up in three hours. Thanks again!

-Brittany
glenngv
10-22-2002, 07:45 AM
nice one beetle :)

but if a certain link is an image, scramble() will throw an error.
i modified it like this:

function scramble(a) {
var t = a.firstChild;
if (t.nodeValue) t.nodeValue = t.nodeValue.replace(/(.)(.)/g,"$2$1");
}
beetle
10-22-2002, 08:08 AM
Ahh yes...

or

if (t.nodeType == 3) t.nodeValue = t.nodeValue.replace(/(.)(.)/g,"$2$1");