Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Bildwechsel o.k, aber wie geht folgendes ...
Frage
Hallo, habe auf einer HP den Bildwechsel definiert. Ball ist grün, bei onMouseOver wird er rot, bei onMouseOut wieder grün. Nun soll er bei onClick gelb werden und bei onMouseOut auch gelb bleiben (da aktiv). Wer kann helfen? hier die HP dazu: http://www.kostos.de
Antwort 1 von sutadur
Ich denke das ist so gemeint, dass der Menüpunkt gelb bleiben soll, so dass der Besucher weiß, welcher Menüpunkt gerade aktiv ist, richtig?
Mein Tip dazu: verzichte auf das Frameset und mach eine Tabelle. Dann kannst Du auf jeder Seite (die dann ja neben dem eigentlichen Inhalt auch das Menü enthält) vor den entsprechenden Menüpunkt einen gelben Punkt setzen als feste Grafik.
Alternativ, wenn es denn unbedingt Frames sein sollen, kannst Du ähnlich wie bei einer Tabelle verschiedene Menüleisten vorbereiten (eben mit jeweils einem gelben Punkt vor dem gewählten Menüpunkt) und dann mit Javascript beide Frames aktualisieren: Den Menü-Frame mit der nun aktuellen Menüleiste, den Hauptframe mit dem dazugehörigen Inhalt ...
Ich hoffe, ich hab mich verständlich ausgedrückt ... :o)
Mein Tip dazu: verzichte auf das Frameset und mach eine Tabelle. Dann kannst Du auf jeder Seite (die dann ja neben dem eigentlichen Inhalt auch das Menü enthält) vor den entsprechenden Menüpunkt einen gelben Punkt setzen als feste Grafik.
Alternativ, wenn es denn unbedingt Frames sein sollen, kannst Du ähnlich wie bei einer Tabelle verschiedene Menüleisten vorbereiten (eben mit jeweils einem gelben Punkt vor dem gewählten Menüpunkt) und dann mit Javascript beide Frames aktualisieren: Den Menü-Frame mit der nun aktuellen Menüleiste, den Hauptframe mit dem dazugehörigen Inhalt ...
Ich hoffe, ich hab mich verständlich ausgedrückt ... :o)
Antwort 2 von semi
<script>
var GRUEN = 0;
var ROT = 1;
var GELB = 2;
var btnColor = ROT;
function onMouseOver() {
if(btnColor == GRUEN) {
// Farbe ROT setzen
btnColor = ROT;
}
}
function onMouseOut() {
if(btnColor == ROT) {
// Farbe GRUEN setzen
btnColor = GRUEN;
}
}
function onMouseClick() {
if(btnColor == GELB) {
// Farbe ROT setzen
btnColor = ROT;
}
else(btnColor == ROT) {
// Farbe GELB setzen
btnColor = GELB;
}
}
</script>
Antwort 3 von semi
Uuups! Am Anfang sollte
stehen.
var btnColor = GRUEN;stehen.
Antwort 4 von Bakterie
@sutadur: das mit der Tabelle habe ich auch schon überlegt. Mal sehen, vielleicht mach ich´s noch.
@semi: sorry, bin in JS noch blutiger Anfänger. Kannst Du mir etwas genauer erklären, wie ich die gifs green, red, yellow in das Script einarbeite? Thanx.
@semi: sorry, bin in JS noch blutiger Anfänger. Kannst Du mir etwas genauer erklären, wie ich die gifs green, red, yellow in das Script einarbeite? Thanx.
Antwort 5 von semi
Hier etwas andere Lösung. Du kannst es direkt auf Deiner Seite einsetzen.
Datei button.js
Deine Linkliste
Gruss,
Michael
Datei button.js
var imgRed = new Image();
var imgGreen = new Image();
var imgYellow = new Image();
imgRed.src = "images/red.gif";
imgGreen.src = "images/green.gif";
imgYellow.src = "images/yellow.gif";
var buttonCount = 0;
var activeButton = "";
function createButton(href, text, target) {
dst = (target)?" target=\"" + target + "\"":"";
id = "button" + buttonCount;
imgTag = "<img id=\""+id+"\" src=\""+imgGreen.src+"\" border=0 width=30 height=20 style=\"border-style:none;\">";
aTag = "<a href=\""+href+"\" onMouseOver=\"setImage('"+id+"','"+imgRed.src+"');\"" +
" onMouseOut=\"setImage('"+id+"','"+imgGreen.src+"');\"" +
" onClick=\"setImage('"+id+"','"+imgYellow.src+"');\"" +
" border=0 style=\"text-decoration:none;\"" +dst+">" +
imgTag+" "+text+"</a>";
document.write(aTag);
buttonCount++;
}
function setImage(buttonId, src) {
switch(src) {
case imgRed.src:
if(buttonId!=activeButton)
document.getElementById(buttonId).src = src;
break;
case imgGreen.src:
if(buttonId!=activeButton)
document.getElementById(buttonId).src = src;
break;
case imgYellow.src:
if(buttonId!=activeButton) {
document.getElementById(buttonId).src = src;
if(activeButton!="")
document.getElementById(activeButton).src = imgGreen.src;
activeButton = buttonId;
}
break;
}
}
Deine Linkliste
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>links</title>
<link rel=stylesheet type="text/css" href="format.css">
<script language="JavaScript" src="button.js" type="text/javascript">
</script>
</head>
<body>
<table cellspacing=0 cellpadding=0>
<tr height=20><td><script>createButton("index.htm", "Home", "_top");</script></td></tr>
<tr height=20><td><script>createButton("depot/index.htm", "Mitgliederbereich");</script></td></tr>
<tr height=20><td><script>createButton("wer.htm", "Gesellschafter");</script></td></tr>
<tr height=20><td><script>createButton("geschichte.htm", "History");</script></td></tr>
<tr height=20><td><script>createButton("strategie.htm", "Strategie");</script></td></tr>
<tr height=20><td><script>createButton("depot.htm", "Depot", "haupt");</script></td></tr>
<tr height=20><td><script>createButton("vertrag.htm", "Gesellschaftsvertag", "haupt");</script></td></tr>
<tr height=20><td><script>createButton("gaestebuch/index.htm", "Gästebuch", "haupt");</script></td></tr>
</table>
</body>
</html>
Gruss,
Michael
Antwort 6 von semi
Fehler zu machen wird mir langsam zur Gewohnheit :-)
In den Zeilen "Mitgliederbereich" bis "Strategie" fehlt das Target-Frame
So sollte es aussehen:
Gruss,
Michael
In den Zeilen "Mitgliederbereich" bis "Strategie" fehlt das Target-Frame
So sollte es aussehen:
<tr height=20><td><script>createButton("depot/index.htm", "Mitgliederbereich", "haupt");</script></td></tr>
<tr height=20><td><script>createButton("wer.htm", "Gesellschafter", "haupt");</script></td></tr>
<tr height=20><td><script>createButton("geschichte.htm", "History", "haupt");</script></td></tr>
<tr height=20><td><script>createButton("strategie.htm", "Strategie", "haupt");</script></td></tr>
Gruss,
Michael
Antwort 7 von Bakterie
Hey Semi,
tausend Dank! Echt nett von Dir.
Gruss
Michael (Bakterie)
tausend Dank! Echt nett von Dir.
Gruss
Michael (Bakterie)