Sublinker

Hier finden Sie alle Zeilen des im Artikel angegebenen Codes und sparen sich so das lästige Abtippen. Um den Code zu verwenden, folgen Sie bitte der Beschreibung im Heft.


<html>



<head>
<TITLE>SUPER-SIMPLE: add submenus to any textlinks!</TITLE>

<meta NAME="keywords" CONTENT="menu, navigation, JavaScript, DHTML, submenu, download, free, script, sample">

<meta NAME="description" CONTENT="This script allows you to add submenus to any textlinks inside your webpage. Just move your mouse over any textlink to make the submenu visible. Big advantage of this script: customizing is as easy as peeling bananas. Why? Because you do not need to customize the script at all! Creating the submenus is pure HTML-business that you can accomplish inside the body-tag. So it's up to you how your submenus look like. Fill them with textlinks, imagemaps, buttons, tables - whatever you like. Crossbrowser.">

<script language=javaScript>
<!-- Beginning of JavaScript -

// CREDITS:
// SUPER-SIMPLE: add submenus to any textlink!
// by Urs Dudli and Peter Gehrig 
// Copyright (c) 2000 Peter Gehrig and Urs Dudli. All rights reserved.
// Permission given to use the script provided that this notice remains as is.
// Additional scripts can be found at http://www.24fun.com/fast/index.html
// info@24fun.com
// 9/7/2000

// IMPORTANT: 
// If you add this script to a script-library or a script-archive 
// you are required to insert a highly visible link to http://www.24fun.com/fast/index.html 
// right into the webpage where the script
// will be displayed.

// CONFIGURATION:
// Go to http://www.24fun.com/fast/index.html, open category 'utility' and 
// download the ZIP-file of this script containing the the script-file 
// with colorized step-by-step instructions for easy configuration.

// How long shall the submenu be visible? Answer in seconds
var standstill=8

// horizontal distance from the textlink to the submenu (pixels)
var xdistance=0

// vertical distance from the textlink to the submenu (pixels)
var ydistance=20

// Do not edit the variables below
var timer
var x,y
var standstill=1000*standstill
var opensubmenu
var closesubmenu
var activated=false

function initiate() { 
 if (document.all) {
  closesubmenu=eval("document.all.submenu1.style")
  activated=true
 }
 if (document.layers) {
  closesubmenu=eval("document.submenu1")
  activated=true
 }
}

function show(whatsubmenu) {
 if (activated) { 
  if (document.all) {
   closesubmenu.visibility="hidden"
   closesubmenu=eval("document.all."+whatsubmenu+".style")
   opensubmenu=eval("document.all."+whatsubmenu+".style")
   opensubmenu.posTop=y+ydistance
   opensubmenu.posLeft=x+xdistance
   opensubmenu.visibility="visible"
   timer=setTimeout("hidesubmenu()",standstill)
  }
  if (document.layers) {
   closesubmenu.visibility="hidden"
   closesubmenu=eval("document."+whatsubmenu)
   opensubmenu=eval("document."+whatsubmenu)
   opensubmenu.top=y+ydistance
   opensubmenu.left=x+xdistance
   opensubmenu.visibility="visible"
   timer=setTimeout("hidesubmenu()",standstill)
  }
 }
}
 
function hidesubmenu() {
    clearTimeout(timer)
 closesubmenu.visibility="hidden"
 opensubmenu.visibility="hidden"
}


function handlerMM(e){
 x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
 y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
}

if (document.layers){
 document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=handlerMM;
window.onload=initiate

// - End of JavaScript - -->
</script>

</head>
<body bgcolor=#FFFFFF text=000000 link=0000FF vlink=0000FF alink=0000FF>

<DIV id="deletethisblock" style="position:absolute;top:10px;left:0px;">
<ul>
<font size=3 face=Verdana color=666666><b><font size=3>SUPER-SIMPLE: add submenus to any textlink!</font></b>
<li>This script allows you to add <a href="#" onMouseOver="show('submenu1')">submenus</a> to any textlinks inside your webpage.
<li><i>Wait until the page has been completely loaded. </i>Then <a href="#" onMouseOver="javascript:show('submenu2')">put your mouse</a> over any textlink to see the effect. 
<li>Now comes the big bang: customizing the script is as easy as peeling bananas. Why? Because you do not need to customize the script at all! Creating the submenus is pure HTML-business done inside the &lt;body&gt;-tag. So it's <a href="#"  onMouseOver="show('submenu3')">up to you</a> how your submenus look like. Fill them with textlinks, imagemaps, buttons, tables - whatever you like.
<li><a href="#" onMouseOver="show('submenu1')">Crossbrowser</a><br><br>
</ul>
<ul>
<b><font size=3>Configuration:</font></b>
<li><a href="utilsublinker.zip" onMouseOver="javascript:show('submenu2')">Download the ZIP-file</a> extract the HTML-file and open it.
<li>Create a &lt;div&gt;-block for each submenu. It should look like the sample-submenu below:<br>
<table border=1 cellspacing=0 cellpadding=6><tr><td bgcolor=EEEEEE><font size=3 face=times>
&lt;DIV ID="<font color=red size=3>submenu1</font>" <font color=green size=3>style="position:absolute;visibility:hidden"</font>><br>
&nbsp;&nbsp;<a href="#" onMouseOver="javascript:show('submenu1')">Some link</a><br>
&nbsp;&nbsp;<a href="#" onMouseOver="javascript:show('submenu2')">Next link</a><br>
&nbsp;&nbsp;<a href="#" onMouseOver="javascript:show('submenu3')">Another link</a><br>
&lt;/DIV&gt;
</td></tr></table>
<b><font size=2 color=red>RED:</font></b> Name your submenus 'submenu1', 'submenu2', 'submenu3' and so on<br>
<b><font size=2 color=green>GREEN:</font></b> Put this style-commands inside the &lt;div&gt;-block exactly the way it is. Don't ask me why. Just do it.<br><br>

<li>Now activate the script by adding a small piece of code inside any textlink. It should look like the sample-textlink below:<br>
<table border=1 cellspacing=0 cellpadding=6><tr><td bgcolor=EEEEEE><font size=3 face=times>
&lt;href="http://www.someurl.com" <font size=2 color=green>onMouseOver="show('<font size=2 color=red>submenu1</font>')"</font>&gt;<a href="#" onMouseOver="javascript:show('submenu2')">your textlink</a>&lt;/a&gt;
</td></tr></table>
<b><font size=2 color=green>GREEN</font>/<font size=2 color=red>RED:</font></b> Put this code into your link-tag.
<br><b><font size=2 color=red>RED:</font></b> This is the name of the submenu that should appear when you put your cursor over the textlink.<br><br>
<li>Go to the &lt;head&gt;-section of the script and configure how long the submenu shall be visible. That's i! Have fun 24 hours a day!

<hr>
<br>
<a href="http://www.24fun.com/fast/index.html" target="_blank" onMouseOver="javascript:show('submenu2')">Go to SpeedScripts and download hundreds of free funscripts</a>
<br><br>
<hr>
</font>
</ul>
</DIV>

<DIV ID="submenu1" style="position:absolute;visibility:hidden">
<table cellpadding=5 cellspacing=0><tr><td bgcolor=DDDDDD>
<font size=2 face=Verdana color=blue>
<ul>
<li><a href="http://www.commission-junction.com/track/track.dll?AID=438926&PID=503463&URL=http%3A%2F%2Fwww%2Ecoolboard%2Ecom%2Fboardnew%2Ecfm%3Fmc%3DDPROG3"><font size=2 face=Verdana color=blue>FREE CoolBoard Message Board!</font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=438926&PID=503463&banner=0.gif" height=1 width=1 border=0><br>
<li><a href="http://www.commission-junction.com/track/track.dll?AID=806161&PID=503463&URL=http%3A%2F%2Ffreelane%2Eexcite%2Ecom%2F"><font size=2 face=Verdana color=blue>FreeLane Powered By Excite</font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=806161&PID=503463&banner=0.gif" height=1 width=1 border=0><br>
<li><a href="http://www.commission-junction.com/track/track.dll?AID=543672&PID=503463&URL=http%3A%2F%2Fwww%2Estickytools%2Ecom"><font size=2 face=Verdana color=blue>Build your traffic with StickyTools.com!</font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=543672&PID=503463&banner=0.gif" height=1 width=1 border=0><br>
<li><a href="http://www.commission-junction.com/track/track.dll?AID=815767&PID=503463&URL=http%3A%2F%2Fwww%2Ewebspoofs%2Ecom"><font size=2 face=Verdana color=blue>Click here to laugh and win.</font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=815767&PID=503463&banner=0.gif" height=1 width=1 border=0><br>
<li><a href="http://www.commission-junction.com/track/track.dll?AID=804456&PID=503463&URL=http%3A%2F%2Fwww%2Eweallprofit%2Ecom%2Fcgi%2Dbin%2Fbannercount%2Epl"><font size=2 face=Verdana color=blue>Get a FREE Homepage/Shopping site!</font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=804456&PID=503463&banner=0.gif" height=1 width=1 border=0><br>
<li><a href="http://www.commission-junction.com/track/track.dll?AID=360826&PID=503463&URL=http%3A%2F%2Fwww%2Estepmate%2Ecom"><font size=2 face=Verdana color=blue>StepMate.com</font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=360826&PID=503463&banner=0.gif" height=1 width=1 border=0><br>
<li><a href="http://www.commission-junction.com/track/track.dll?AID=549199&PID=503463&URL=http%3A%2F%2Fwww%2Eoutsmarted%2Ecom"><font size=2 face=Verdana color=blue>Start your Search here</font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=549199&PID=503463&banner=0.gif" height=1 width=1 border=0><br>
</td></tr></table>
</DIV>

<DIV ID="submenu2" style="position:absolute;visibility:hidden">
<table cellpadding=5 cellspacing=0 border=1 width=240><tr><td bgcolor=DDFFDD>
<font size=1 face=Verdana color=006600>If you enjoy entering prize draws and getting offers, MyOffers.co.uk is just the site for you. Our fast and fun site has 40 free competitions for great prizes including holidays, cash, electrical goods and much, much more. New prizes are being added all the time like our current Star Prize, a Ford Focus 1.6 Zetec. To enter all you have to do is answer some simple questionnaires.</font><br><a href="http://www.commission-junction.com/track/track.dll?AID=899977&PID=503463&URL=http%3A%2F%2Fwww%2Emyoffers%2Eco%2Euk%2Findex%2Easp%3Fcid%3D16"><font size=1 face=Verdana color=004400><b>Click here</b></font></a><img src="http://www.commission-junction.com/banners/tracker.exe?AID=899977&PID=503463&banner=0.gif" height=1 width=1 border=0>
</td></tr></table>
</DIV>

<DIV ID="submenu3" style="position:absolute;visibility:hidden">
<a href="http://www.commission-junction.com/track/track.dll?AID=42917&PID=503463&URL=http%3A%2F%2Fwww%2Eeveryone%2Enet%2Fmain%2Fhtml%2Findex%2Ehtml%3F%3Dcjebutton" target="_top"><img src="http://www.commission-junction.com/banners/tracker.exe?PID=503463&AID=42917&banner=42917%2Egif" width="88" height="31" alt="Everyone.net Plug-in-Email" border="0"></a><br>
<a href="http://www.commission-junction.com/track/track.dll?AID=44133&PID=503463&URL=http%3A%2F%2Fwww%2Eeveryone%2Enet%2Fmain%2Fhtml%2Findex%2Ehtml%3F%3Dcjebutton" target="_top"><img src="http://www.commission-junction.com/banners/tracker.exe?PID=503463&AID=44133&banner=44133%2Egif" width="88" height="31" alt="Everyone.net" border="0"></a><br>
<a href="http://www.commission-junction.com/track/track.dll?AID=44132&PID=503463&URL=http%3A%2F%2Fwww%2Eeveryone%2Enet%2Fmain%2Fhtml%2Findex%2Ehtml%3F%3Dcjebutton" target="_top"><img src="http://www.commission-junction.com/banners/tracker.exe?PID=503463&AID=44132&banner=44132%2Egif" width="88" height="31" alt="Everyone.net Plug-in-Email" border="0"></a>
</DIV>


</body>
</html>