onmouseover effekt

[Jason]

<!----Menu1---->
<script type="text/javascript">
function auf(x) {
if(document.getElementById(x).style.display == "block") {
document.getElementById(x).style.display = "none";
} else {
document.getElementById(x).style.display = "block";
}}
</script>

<a href="#" onclick="auf('ID');return false;"onMouseOver="image.src='Bild.gif';" onMouseOut="image.src='Bild.gif';"><img name="image" src="Bild.gif" border="0"></a>
<div style="display:none" id="ID">

<a href="url">Gameinfo</a>
<a href="url">Server I</a>
<a href="url">etc.pp</a>
</div>

Ich hab dieses Script für eine MultiGameSeite in Arbeit, funzt
soweit auch ganz gut.
Nun möchte ich an einer beliebigen Stelle  der Seite, zB im Header,
ein Bild anzeigen lassen, falls der Benutzer mit dem Mauszeiger
über einen Button drüber fährt, so dass nicht nicht nur durch den
 MouseOvereffekt sich der Button ändert, sondern auch ein Bild
 angezeigt wird. Also, man klickt zB auf einen Button für
Server, das Menü klappt auf und oben im Banner/Header wird ein
Bild angezeigt, zB ein Bild eines Servers...
 Was muss ich dafür machen?!

[Hans]

Nun möchte ich an einer beliebigen Stelle  der Seite, zB im Header,
ein Bild anzeigen lassen, falls der Benutzer mit dem Mauszeiger
über einen Button drüber fährt, so dass nicht nicht nur durch den
MouseOvereffekt sich der Button ändert, sondern auch ein Bild
angezeigt wird. Also, man klickt zB auf einen Button für
Server, das Menü klappt auf und oben im Banner/Header wird ein
Bild angezeigt, zB ein Bild eines Servers...
Was muss ich dafür machen?!

Na ja, so wie Du es schon prinzipiell hast. Zunächst dem Header (der Grafik) eine eindeutige ID geben. Dann die Funktion, die das Event abhandeln soll, erweitern oder für jeden Link eine eigene Funktion schreiben oder die Funktion als Klasse verwenden und für jeden Link ein Objekt ableiten. In der Funktion veränderst Du, wenn sich das Menü öffnet, die Quelle der Grafik im Header und zusätzlich kannst Du beliebig anderes tun, z. B. das Menü ausklappen. Wenn das Bild nur angezeigt werden soll, wenn ein Menü offen ist, positionierst Du einen Layer absolut und gibst dem eine ID. Mit display kannst Du den Layer ein- und ausblenden. Beim Aufrufen der Event-Funktion kannst Du, wenn es nur eine Funktion/ Methode gibt (geben soll), beide IDs übergeben (die vom Link und die von der Header-Grafik bzw. dem Header-Layer).

[Jason]

Oha, super idee, darauf bin ich nicht gekommen, vielen Dank!
Ich werds nachm Kaffee ausprobieren und heut abend meine
Erfahrung berichten!

[Hans]

Oha, super idee, darauf bin ich nicht gekommen, vielen Dank!

Die Event-Handler onclick bzw. onmouseover kannst Du noch im Skript selbst notieren, dann stören sie nicht im HTML-Teil. Wenn es nur um Mouseover-Effekte beim Anzeigenwechsel im Header geht, reicht auch reines CSS. Aber da ja vermutlich spätestens beim onclick der Header das zugehörige Bild dauerhaft bis zum nächsten Mouseover anzeigen soll, brauchst Du an dieser Stelle JS.

Ich werds nachm Kaffee ausprobieren und heut abend meine
Erfahrung berichten!

Viel Erfolg!

[Jason]

mhm, ich hab versucht es via ID anzusprechen

<div id="Menu1"><img src="[dir]/images/games.gif"></div>

Problem ist nicht das Bild, das poppt auf sobald ich das
Menü anklicke, aber das Menü selber funzt nicht mehr. Oo

weiterfummeln ...

[Hans]

mhm, ich hab versucht es via ID anzusprechen

<div id="Menu1"><img src="[dir]/images/games.gif"></div>

Problem ist nicht das Bild, das poppt auf sobald ich das
Menü anklicke, aber das Menü selber funzt nicht mehr.

Wieso nicht? Es ging doch schon. Du mußt doch nur den vorhandenen Code erweitern. Also eine ID für den Layer und eine für den Link mit dem Ausklappmenü.

[Hans]

... und eine für den Link mit dem Ausklappmenü.

Mißverständlich formuliert. Natürlich so, wie Du es schon hattest, eine ID für die Box mit dem Aufklappmenü.

[Jason]

Naja, ich wollte es ja so machen: Man klickt auf den MenüButton,
das Menü klappt darunter auf und mit der selben ID (id="1"), poppt
ein Bild im Header auf.
Leider funzt es nicht, wenn ich per
<div id="1"><img src="bild.gif"></div>
das Bild aktivieren möchte, wenn der Benutzer auf den Button
klickt, dann geht das Bild zwar auf, aber es übernimmt auch das
Menü.
Mhmm...

[Hans]

Naja, ich wollte es ja so machen: Man klickt auf den MenüButton,
das Menü klappt darunter auf und mit der selben ID (id="1"), poppt
ein Bild im Header auf.

Eine ID muß im gesamten Dokument eindeutig sein, darf also nur einmal vorkommen. Du mußt schon mit zwei IDs arbeiten, eine für das Menü, eine für den Header. Evtl. brauchst Du für den Header auch verschiedene IDs, wenn Du mehrere Header mit unterschiedlichem Inhalt je nach Link ein- und ausblendest. Ansonsten müßte in der Funktion, die den Header einblendet, anhand der anderen ID entschieden werden, welches Bild eingeblendet werden muß.

dann geht das Bild zwar auf, aber es übernimmt auch das
Menü.

Das verstehe ich leider nicht.