Beschreibung: Möchtest du für deine Homepage Solche Buttons erstellen, die z.B. Aufleuchten, wenn man mit der Maus darüber fährt? -Dann schau hier nach! -In diesem Workshop erfährst du, wie du solche Buttons noch aufpeppen kannst, indem die Buttons den Zustand behalten. Wen man darauf geklickt hat, bleibt der Button leuchtend, bis ein neuer angeklickt wurde.
Code: Füge einfach unten folgenden Code in deine Inhaltsseite ein und passe Sie entsprechend an.
Bemerkungen: Lasse bitte den (c) Vermerk bestehen!
<HEAD>
<!-- START MOUSEOVER BUTTONS
/<em> (C) 1998 - dhgm@gmx.net - Freeware nur mit diesem Vermerk </em>/
Distributet by: Steven Varco, See: www.tech-island.de.cx for many more usefull Scripts
(Bitte diesen Vermerk stehen lassen!)
-->
<SCRIPT language="JavaScript">
<!--
<!-- Hier wird geprüft, ob die Datei im Frameset geladen wurde, falls nicht; lade index.htm -->
if (self==top) top.location.href = 'index.htm';
<!-- Hier kommt der Pfad der Buttons hin (hier im Verzeichniss: buttons) Bei PicExt kommt der Dateityp hin (GIF oder JPG) -->
var picPath = '<a href="http://www.deineSeite.net/buttons/'," target="blank">http://www.deineSeite.net/buttons/',</a> picExt = '.gif';
<!-- Hier bitte nichts aendern -->
function mObj(nam, u1, u2, u3) {
if (document.images) {
this.name = nam;
this.norm = new Image(); this.norm.src = picPath + u1 + picExt;
this.over = new Image(); this.over.src = picPath + u2 + picExt;
this.clck = new Image(); this.clck.src = picPath + u3 + picExt;
}
}
<!-- Hier werden Die Buttons deffiniert du kannst ein 3. Button verwenden, oder den 2. nochmals nehmen -->
var b1 = new mObj('about', 'about_off', 'about_on', 'about_onclk');
var b2 = new mObj('history', 'history_off', 'history_on', 'history_on');
var b3 = new mObj('gb', 'gb_off', 'gb_on', 'gb_on');
var b4 = new mObj('links', 'links_off', 'links_on', 'links_on');
var b5 = new mObj('awards', 'awards_off', 'awards_on', 'awards_on'); <!-- usw. für alle weiteren Buttons -->
<!-- Hier bitte nichts aendern -->
var selImg = null;
function chgSrc(n, newSrc) {
if (document.images) document.images[n.name].src = n[newSrc].src;
}
function ovr(n) { if (selImg!=n) chgSrc(n, 'over'); }
function out(n) { if (selImg!=n) chgSrc(n, 'norm'); }
function clk(n) {
if (selImg == n) return false;
else {
if (selImg) chgSrc(selImg, 'norm');
selImg = n;
chgSrc(selImg, 'clck');
return true;
}
}
// -->
</SCRIPT>
<!-- END MOUSEOVER BUTTONS -->
</HEAD>
<BODY>
<!-- Nun musst du noch die Eigentlichen Buttons einfügen
Der Text unter name="xxx" muss mit den oberen übereinstimmen -->
<b><font face="Westminster,Arial">INHALT</font></b>
<a href="haupt/about.htm" onMouseover="ovr(b1)" onMouseout="out(b1)" onClick="return clk(b1);"><img src="buttons/about_off.gif" name="about" border=0 width="58" height="13"></a>
<br>
<a href="haupt/history.htm" onMouseover="ovr(b2)" onMouseout="out(b2)" onClick="return clk(b2);"><img src="buttons/history_off.gif" name="history" border=0 width="58" height="13"></a>
<br>
<a href="haupt/gb_write.htm" onMouseover="ovr(b3)" onMouseout="out(b3)" onClick="return clk(b3);"><img src="buttons/gb_off.gif" name="gb" border=0 width="58" height="13"></a>
<br>
<a href="links/index.htm" onMouseover="ovr(b4)" onMouseout="out(b4)" onClick="return clk(b4);"><img src="buttons/links_off.gif" name="links" border=0 width="58" height="13"></a>
<br>
<a href="awards/index.htm" onMouseover="ovr(b5)" onMouseout="out(b5)" onClick="return clk(b5);"><img src="buttons/awards_off.gif" name="awards" border=0 width="58" height="13"></a>
<!-- usw. für alle weiteren Buttons -->
</BODY> |