Free Webdesign Tutorials::Links Directory

Web Designing Made Easy	Add to Favourites	Tell a Friend
Web Designing Made Easy	Print this Page	Make Your Home Page

Create Free Websites

Free Web Tools

Free Keywords Software

Free Web Tools

Free JavaScripts

Other Services

Quick Links

Submit a Tutorial

Links

Free Resources

Translate a webpage in your Language

Earn money with your website

Suggestions

META Tag Generator

HTML Encryptor

Check Site Popularity

Search Suggestion Tool

Menu Generator

Ads Network

Home |Advertise | Contact Us | Free Resources | Submit a Tutorial

Flashlike message-marker for all your links

Add more infotainment to your textlinks. If your visitor puts his mouse over a textlink a flashlike short-message-animation appears. The script allows you to define a differnet message, font-family and font-color for each textlink. Very easy configuration and copy-and-paste installation. Made for IE4x.

Test the script
Just move your mouse over this textlink or over the any textlink on this webpage.

Configuration:

Step 1: Put the script-file 'utilwordmarker.js' into the same folder as your webpage.

Step 2: Open your webpage. Paste the following code right below the <body> tag of your webpage:

IMPORTANT: Do not paste this code into tables or <DIV> and </DIV> or between any other container!

Step 3: Add the following red code right into your textlinks or imagelinks:
<a href="http://www.yourlink.com" onMouseOver="showmessage('your message','font','color')" onMouseOut="hidemessage()">some link</a>

Step 4:
Replace 'your message' with any message (for instance 'hello'). Replace 'font' with any font-name (for instance 'Arial'). Replace 'color' with any font-color (for instance 'red' or 'FF0000').

Save the following script as utilwordmarker.js.

var x,y var timer var i_fadestrength=5 var step=1 var maxfontsize=180 var fontsizefactor=maxfontsize/100 var content function cursorposition(e){ x=event.clientX+document.body.scrollLeft y=event.clientY+document.body.scrollTop } function showmessage(whatmessage, whatfont, whatcolor) { if (document.all) { content="<nobr><font color="+whatcolor+" face="+whatfont+">"+whatmessage+"</font><nobr>" ring.innerHTML=content resizemessage() } } function resizemessage() { if (document.all) { ring.filters.alpha.opacity=Math.floor(100-i_fadestrength) if (i_fadestrength>=120) {i_fadestrength=0;step=1} document.all.ring.style.visibility="visible" document.all.ring.style.fontSize=i_fadestrength*fontsizefactor document.all.ring.style.posLeft=x-(Math.floor(i_fadestrength/1.3*fontsizefactor)) document.all.ring.style.posTop=y-(Math.floor(i_fadestrength/1.4*fontsizefactor)) step+=1.5 i_fadestrength+=step timer=setTimeout("resizemessage()",50) } } function hidemessage(e){ if (document.all) { clearTimeout(timer) document.all.ring.style.visibility="hidden" i_fadestrength=5 step=1 } } if (document.all) { document.onmousemove=cursorposition; } if (document.all) { document.write("<DIV id='ring' style='position:absolute;font-family:Verdana;filter:alpha(opacity=0);'>