Dynamische buttons
Jonathan
- design/layout
0 sven0 Sven Rautenberg0 sven
0 Dmitri Rettig
Hallo! :D
Also ich bin bei meiner webseite leider an einen punkt gekommen da hört mein verstand auf :D
Also ich möchte gerne eine navigationsleiste haben diese habe ich in einer tabelle gemacht ich möchte aber das sich die tabellenfarbe ändert wen man mit der maus herübergeht! Ich weiss schon wie man den text hinterlegt abner ich mövhte die ganze zeölle farbig haben ich habe schonmaöl im forum gesucht und dabei habe ich das heruasgefunden:
<a href="http://forum.de.selfhtml.org/archiv/1999_4/t07018.htm#a35018" target=blanc>HIER</a>
soweit habe ich es bisher geschafft:
<html>
<head>
</head>
<body bgcolor="#ffffff">
<style type="text/css">
<!--
a {text-decoration: none;}
a:hover { color: black; background:blue;}
-->
</style><table border=1><tr><td width=100><a href=>df </a></td></tr><table>
<a href=>sa</a>
</body>
</html>
Der post von antje müste mir alles klarere machen aber irgendwie tuht er das nicht :( könnt ihr mir vileicht helfen?
MfG Jonathan
Ich bedanke mich schon im voraus
hallo lieber jonathan,
ich freue mich, dir helfen zu koennen.
den gewuenschten effekt erreichst du mit css und java script.
hier der quelltext. (erklaerung weiter unten, also bitte die ganze seite lesen)
*** Beginn ***
Bitte das Script nach eigenen wünschen anpassen!
<!-- diesen teil bitte in den <head></head> kopieren! -->
<script language="JavaScript">
var isIE4 = false;function CheckBrowser()
{
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= 4)
{ isIE4 = true;
}
}
function mOvr(src,clrOver)
{ if (!src.contains(event.fromElement))
{
src.style.cursor = 'hand'; src.bgColor = clrOver;
}
}function mOut(src,clrIn)
{ if (!src.contains(event.toElement))
{ src.style.cursor = 'default'; src.bgColor = clrIn;
}
}
</script>
<!-- ende kopfbereich -->
<!-- beginn tabellenzellen hover effect (mouseover) bitte den teil in den body bereich kopieren (ist eine fertige tabelle)-->
<table border="0" cellpadding="4" cellspacing="0" width="86%" height="250">
<tr>
<td width="100%" height="21"></td>
</tr>
<tr>
<td width="100%" onMouseOver="mOvr(this,'#cccccc');" onMouseOut="mOut(this,'#ffffff');" height="21"><a href="index.htm">Zurück nach Home</a></td>
</tr>
<tr>
<td width="100%" onMouseOut="mOut(this,'#ffffff');" onMouseOver="mOvr(this,'#cccccc');" height="21"><a href="uebermich.php">Über mich</a></td>
</tr>
</table>
<!-- ende hover nav -->
*** Ende ***
wenn du beim hovern die hintergrundfarbe der zellen veraendern möchtest, dann definiere bitte
onMouseOut="mOut(this,'#ffffff');" onMouseOver="mOvr(this,'#cccccc');"
in diesem teil(!) die farben neu.
die links kannst du ganz normal beim mausover mit css formatieren und im head bereich wie gehabt einbinden.
um das script weiterzufuehren, brauchst du nur das script in den zellem beliebig oft wiederholen.
mfg
sven
Moin!
*** Beginn ***
Bitte das Script nach eigenen wünschen anpassen!
Das ist schön! ;)
<!-- diesen teil bitte in den <head></head> kopieren! -->
<script language="JavaScript">
var isIE4 = false;function CheckBrowser()
{
if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.charAt(0) >= 4)
{ isIE4 = true;
}
}
Erklärst du mir mal, wozu diese Funktion "CheckBrowser" eingebaut ist? In Meinen Augen macht die nämlich in Zusammenhang mit der restlichen Lösung... garnichts, weil sie nicht aufgerufen wird.
function mOvr(src,clrOver)
{ if (!src.contains(event.fromElement))
{
src.style.cursor = 'hand'; src.bgColor = clrOver;
}
}
function mOut(src,clrIn)
{ if (!src.contains(event.toElement))
{ src.style.cursor = 'default'; src.bgColor = clrIn;
}
}
</script>
<!-- ende kopfbereich -->
<!-- beginn tabellenzellen hover effect (mouseover) bitte den teil in den body bereich kopieren (ist eine fertige tabelle)-->
<table border="0" cellpadding="4" cellspacing="0" width="86%" height="250">
<tr>
<td width="100%" height="21"></td>
</tr>
<tr>
<td width="100%" onMouseOver="mOvr(this,'#cccccc');" onMouseOut="mOut(this,'#ffffff');" height="21"><a href="index.htm">Zurück nach Home</a></td>
</tr>
<tr>
<td width="100%" onMouseOut="mOut(this,'#ffffff');" onMouseOver="mOvr(this,'#cccccc');" height="21"><a href="uebermich.php">Über mich</a></td>
</tr>
</table>
<!-- ende hover nav -->
*** Ende ***
Außerdem darfst du gerne sagen, daß nur der Internet Explorer mit dem Script was anfangen kann, alle anderen Browser nicht.
- Sven Rautenberg
lieber sven,
war ja nur ein vorschlag.
oder besser gesagt: ein lösungsansatz???
mfg
sven
Hallo,
schau mal bei den Feature-Artikel, ich glaube das ist es, was du suchst: http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm
MfG Dmitri