Phone me on:
+44 (0) 555 123 4567
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+. (Much as I hate to do anything to assist Microsoft, if this effect is used on Internet Explorer in
quirks mode
, the effect is even more fun!)
05-May-2005
: First release.
STEP 1:
Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page:
<script type="text/javascript"> // <![CDATA[ var bgcolour="#ffffff"; // background colour var hlcolour="#ddccff"; // highlight colour var speed=250; // speed colours change, 1 second = 1000 /**************************** * Phone-In Text Effect * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var p_txt; window.onload=function() { if (document.getElementById) { var phoni; var phone=document.getElementById("phonein"); p_txt=phone.firstChild.nodeValue; while (phone.childNodes.length) phone.removeChild(phone.childNodes[0]); for (var i=0; i<p_txt.length; i++) { phoni=document.createElement("div"); phoni.style.display="inline"; phoni.setAttribute("id", "phon"+i); phoni.appendChild(document.createTextNode(p_txt.charAt(i))); phone.appendChild(phoni); } phone_me((p_txt=p_txt.length)-1); }} function phone_me(p_cnt) { var p_tmp=document.getElementById("phon"+p_cnt); p_tmp.style.fontWeight="normal"; if (document.all) p_tmp.style.filter=''; p_tmp.style.backgroundColor=bgcolour; p_cnt=++p_cnt%p_txt; p_tmp=document.getElementById("phon"+p_cnt); if (p_tmp.firstChild.nodeValue!=" ") { p_tmp.style.fontWeight="bold"; if (document.all) p_tmp.style.filter="GLOW(strength=3, color=#"+bgcolour+")"; p_tmp.style.backgroundColor=hlcolour; } setTimeout("phone_me("+p_cnt+")", speed); } // ]]> </script>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
Change the colours at the start of the script you just copied to reflect your web-page background colour and the highlight colour you wish to use. Only use the format '#ffffff' and not 'white'.
STEP 3:
Place a <span> element with 'id="phonein"' on your web-page containing the number or text you wish to be animated. For example:
Don't
include anything other than text between the <span> tags.
THAT'S IT
When your page loads, the text you placed between between the <span> tags should be animated, like the phone-number at the top of this page (which isn't really my number incidentally).
No menu on the left?
Click here
for a full list of all the free DHTML and Javascript effects you could be using on your web-site!
[ This page viewed 89 times. Last viewed Fri 30 Jul, 2010 at 03:37 ]
