OnMouseOver-Effekt

[supercat]

Da war ich lange nicht mehr hier gewesen und dann gleich mit einer etwas exotischen Frage  

Auf meiner Startseite habe ich zwei Bilder als Links auf ein Gästebuch und einen Terminkalender. Da es aber ersatunlich ist, wie viele Surfer nicht mitbekommen, was ein Link ist, wollte ich, dass das jeweilige Bild eine andere Form annimmt, sobald der Surfer mit der Maus darüberfährt. Mit JS keine Thema - eigentlich.

Mein Link ist jetzt so eingebaut:

Code Auswählen Erweitern

[seite=[bild|termine.png]|Informationen:Termine]
Mit JS würde auf einer HTML-Seite die beabsichtigte Sache zum Beispiel so funktionieren:

Code Auswählen Erweitern

<a href="seite.html" onMouseOver="pic1.src='termine_rot.png';" onMouseout="pic1.src='termine.png';">
 <img name="pic1" src="termine.png" border=0>
</a>
Trotz HTML-Anweisung im mozi will's einfach nicht funzen. Ich gehe davon aus, dass ich über die Seiten-Link-Definition des CMS stolpere. Mir ist klar, dass das schon eine kleine Spielerei ist. Aber vielleicht hat doch jemand eine Idee, bevor ich mir hier einen Wolf probiere...  

[Hermann]

Ich habe schon länger nichts mehr mit JavaScript gemacht und gerade diese Funktionen haben sich in den letzten Jahren sehr verändert. Früher musste man vor dem "pic1.src" noch ein "document.all." schreiben: "document.all.pic1.src" Heute wird soweit ich weiß eine andere Notation bevorzugt, ungefähr "document.getElementsByName('pic1')[0].src" bzw. mit ID-Tag "document.getElementById('pic1').src". Möglicherweise haben sich die Mechanismen aber noch weiter geändert, sodass ein onMouseOver-Ereignis gar nicht mehr durch JavaScript interpretiert wird, weil es die CSS-Direktive a:hover dafür verwendet werden soll.

[supercat]

Ops, so schnell hätte ich jetzt nicht mit einer Reaktion gerechnet. Wollte gerade den Rechner herunterfahren.

Ich bin insofern bei Dir, weil ich JS eigentlich vermeiden will. Bei manchen Dingen ist's ja durchaus nicht übel. Mittels CSS lassen sich aber inzwischen die vielfältigsten Effekte realisieren. Doch ich habe die Befürchtung, dass ich dann mit dem Rest vom mozi in Kollission gerate. Es würde ja so aussehen:

Code Auswählen Erweitern

  a       { display:block;
             background-image:url(termine.png);
             width:216px; height:48px }
   a:hover { background-image:url(termine_rot.png); }
Nun sind im mozi-CSS die Links bereits definiert. Außerdem müsste ich nach dieser Lesart für jedes Bild ein neues Stylesheet anlegen. Wäre es etwas Allgemeingültiges, könnte ich es ja in die Template-Datei einbinden. Hm, wäre eine Idee. Bleibt aber immer noch die Konfrontation mit der style.css...  :roll:

[azett]

Code Auswählen Erweitern

[html|<a href="index.php?cat=10_Willkommen&amp;page=10_Willkommen" onMouseOver="pic1.src='smileys/irre.gif';" onMouseout="pic1.src='smileys/lach.gif';">
<img name="pic1" alt="Termine" src="smileys/lach.gif" border="0" />
</a>]

[supercat]

Ich krieg die Krise    So habe ich es ausprobiert - und es wollte nicht funzen. Jetzt geht's    Wahrscheinlich hatte ich Tomaten vor den Augen...

Schöner wäre es natürlich, wenn ich die Bild-Syntax benutzen könnte. Aber da man solche Dinge nicht jeden Tag und überall bastelt, ist's in Ordnung. Danke Dir, Arvid.

[AndreHa]

Avid hat in 'nem anderen thread gesagt, dass man die html syntax auch aufteilen kann... also z.B.

Code Auswählen Erweitern

[html|<a href="index.php?cat=10_Willkommen&amp;page=10_Willkommen" onMouseOver="]
[bild|bild1.jpg]
[html|pic1.src=']
[bild|bild2.jpg]
[html|....
und so weiter.

D. h. der HTML-Ausdruck muss nicht in einem HTML-Feld stehen sondern kann durchaus auch einen Teil Mozilo-Syntax umschließen, - ich hoffe ich hab das so richtig verstanden.

Aber was anderes: Ich war ganz begeistert von dieser Mouseover Bildwechselei, weil ich das selber schon gesucht hatte.
Ich hab den Schnipsel von oben eingebaut und, - voila: genau wie ich's haben wollte. - Aber jetzt klappts nicht mehr!?!?
es bleibt einfach nur der "smile" stehen und der "irre" bleibt fort... kann das?  

[supercat]

Das mit der HTML-Aufteilung könnte eine Idee sein. Ich werde mal etwas fummeln  

Wenn es bei Dir plötzlich nicht mehr funktioniert, könnte es eventuell daran liegen, dass Du auf der gleichen Seite einen zweiten MouseOver-Effekt eingebaut hast. In dem Falle musst Du natürlich den Image-Name und den Over- und Out-Tag z.B. fortlaufend numerieren.

Code Auswählen Erweitern

[html|<a href="index.php?cat=10_Willkommen&amp;page=10_Willkommen" onMouseOver="pic1.src='smileys/irre.gif';" onMouseout="pic1.src='smileys/lach.gif';">
<img name="pic1" alt="Termine" src="smileys/lach.gif" border="0" />
</a>]
[html|<a href="index.php?cat=10_Willkommen&amp;page=10_Willkommen" onMouseOver="pic2.src='smileys/verrueckt.gif';" onMouseout="pic2.src='smileys/kicher.gif';">
<img name="pic2" alt="Termine" src="smileys/kicher.gif" border="0" />
</a>]
Sonst weiß ja Deine Seite nicht, welches Bild nun wo genau angesagt ist. Wenn das nicht die Ursache ist, dann ist vielleicht doch irgendwo im Code ein Zeichen verschwunden. Einfach das Ganze nochmal per copy&past einbauen - und schauen  

Bei mir klappt es jedenfalls: http://www.motourist.de - in der rechten Spalte oben...

[azett]

Code Auswählen Erweitern

[html|<a href="index.php?cat=10_Willkommen&amp;page=10_Willkommen" onMouseOver="]
[bild|bild1.jpg]
[html|pic1.src=']
[bild|bild2.jpg]
[html|....


Das wird nicht funktionieren. Was wir im onMouseOver-Attribut brauchen, ist die Zuweisung des Bildpfades zu pic1.src - und nicht das komplette IMG-Tag (was ausgegeben wird, wenn du ein "bild"-Element verwendest).

[supercat]

Wo der Meister Recht hat, hat er Recht    Solche Effekte sind halt doch etwas Spezielles. Wenn ich meinen anfangs eingebauten schlichten mozi-Code sehe, jammert es mich natürlich jetzt etwas. Ich grübele ehedem noch darüber, wie das elegant per CSS geregelt werden könnte  :roll:

[AndreHa]

Ähhjoo...wenn ihr meint....

Also was ich jetzt verstanden habe (ist ja nicht viel) ist, dass ich dieses Beispiel nur 1x pro Seite so ohne Modifikation einbauen kann, - das ist dann die Erklärung dafür, dass es bei mir plötzlich nicht mehr geklappt hat, weil ich es nämlich testweise mehrmals verwendet habe.

Wie kann ich es denn anstellen, wenn ich folgendes machen will:
Seite normal anzeigen mit Bild1. Wenn man mit der Maus über Bild1 fährt, soll Bild2 angezeigt werden. Wenn man mit der Maus wieder runter ist, wieder Bild1

- Also das ganze wie gehabt, nur ohne link.

[supercat]

In dem Fall lässt Du den Linkverweis sozusagen ins Leere laufen:

Code Auswählen Erweitern

<a href="#" ...Dann ist da nix. Aber warum? Nur ums Bildchen wechseln zu lassen? Dann könntest Du gleich ein animiertes Gif einbauen.

Das andere ist wirklich nicht schwer. Falls Du Deine Bastelei noch nicht geändert hast, numeriere einfach mal bei jedem MouseOver die pic-Bezeichnung durch: pic1, pic 2 usw. Es sollten sich sinnigerweise natürlich bei jedem Link andere Bilder dahinter befinden. Da funzt es bestimmt. Wie gesagt, kannst es auf meiner Site checken. Vorhin ging's noch