onClick im Menü bei weiterem Klick deaktivieren
Floxxy
- javascript
Hallo und Hilfe,
Habe schon einiges hier gelesen und gefunden, aber ich kapier es noch nicht ganz.
Ich möchte eine Navigationsleite wo bei onClick auf Menüpunkt eins ein anderer Button (on) geladen wird (soweit gehts) und dann bei click auf Menüpunkt zwei dieser on wird, der andere aber off! (usw. sind mehrere Menüpunkte)
Mein Code im Head (Script) sieht so aus (der geht)
ueberunsOff = new Image();
ueberunsOff.src = "./bilder/buttons/aplusarchi_off.gif";
ueberunsOn = new Image();
ueberunsOn.src = "./bilder/buttons/aplusarchi_on.gif";
Mein Code im Body: (da liegt wohl mein Fehler)
<tr>
<td>
<a href="aplusarchi.htm"
onclick="switchOn('ueberuns')">
<img src="bilder/buttons/aplusarchi_off.gif" border="0" name="ueberuns" alt="buero" width="100" height="19">
</a><br>
</td>
</tr>
<tr>
<td>
<a href="aplushaus.htm"
onclick="switchOn('aplushaus')">
<img src="./bilder/buttons/aplushaus_off.gif" border="0" name="aplushaus" alt="Projekte" width="100" height="19"></a></td>
Noch genialer wäre wenn man onmouseover und onclick kombinieren könnte! Geht das?
Hallo.
So wie ich das verstanden habe, soll der ausgewählte Punkt immer aktiv dargestellt werden. Das hatte ich mal realisiert.
Anm.: Es gibt auch MM-Skripte, die etwas kompakter sind!
Der JS-Teil:
/* Die Bilder initialisieren */
[...]
kontakt01 = new Image;
kontakt01.src = "img/kontakt01.gif"
kontakt02 = new Image;
kontakt02.src = "img/kontakt02.gif"
function init()
{
topic = 1; /* Zeigt auf angewaehltes Topic */
/* temporaere Zwischenspeicher */
oldBildNr = 0;
oldBildId = "";
}
function ActivateTopic(nr,BildNr,BildId,inaktBildId)
{ /* Aktivieren eines Topics durch Klicken
* Veraendern des Hintergrundbildes
*
* Parameter: Akt. Topic Nummer fuer den Vergleich
* Bild Nummer
* Bild ID
* Bild ID inakt. Bild (zum Ruecksetzen)
*
*/
if( topic != nr) {
/* Sonderfall erstes Anklicken */
if( oldBildNr == 0 ) {
/* Erstes Bild wiederherstellen */
document.images[1].src = "img/home01.gif";
} else {
/* Altes Bild wieder herstellen */
document.images[oldBildNr].src = oldBildId.src;
}
/* Zeiger auf aktiviertes Topic setzen */
topic = nr;
/* Aktives Bild setzen */
document.images[BildNr].src = BildId.src;
/* Zwischenspeicher fuer das Ruecksetzen aktualisieren */
oldBildNr = BildNr;
oldBildId = inaktBildId;
}
function SwapImage(nr,BildNr,BildId)
{ /* Setzen des Bildes, wenn Topic nicht aktiv
*
* Parameter: Topic-Nr (nr) - festgelegt (integer)
* Bild Nummer (BildNr) - forlaufend (integer) => probieren
* Bild Id (BildId) - festgelegt (z.B home01)
*/
if(topic != nr) {
document.images[BildNr].src = BildId.src;
}
}
Im HTML-Teil für jedes Bild:
<body onLoad="init()">
[...]
<a href="07kontakt/index.html" onFocus="if(this.blur)this.blur()"
onClick="ActivateTopic(7,7,kontakt02,kontakt01)"
onMouseOver="SwapImage(7,7,kontakt02)"
onMouseOut="SwapImage(7,7,kontakt01)">
<img src="img/kontakt01.gif" border="0" width="140" height="50"></a>
[...]
Die 7er sind die Nummer des Bildes. Einfach abzählen oder ausprobieren.
Der Quellcode stammt übrigens von http://www.tsc-residenz-ludwigsburg.de/ und beinhaltet zusätzlich zu der gewünschten Funktion noch ein Wechsel des oberen Bildes.
Gruß
Kai
...danke...
Du hast das Problem genau richtig erkannt. irgendwie ist meine intensive Html/JS Zeit schon lange her... ich kriegs nicht in mein Verzeichnis... wenn Du mir nochmal helfen könntest wärs klasse, ansonsten muss ich ein bisschen üben...
unter
http://www.aplusarchitektur.de/Verz_test/index.htm
lade ich gerade die ganze Website Testweise hoch, das Menü ist:
http://www.aplusarchitektur.de/Verz_test/verzeichnis.htm
Die ersten beiden Punkte sind momentan mit onclick versehen, geht aber nicht mehr aus.
Schon deprimierend wenn man mal dachte man kann das...