Mouseover Effekt mit CSS

[Michael]

Hallo!

Und zwar geht es um folgendes. WIr haben eine Seite mit ziemlich vielen Grafiken. (Ca. 2200) Jetzt wollen wir mit möglichst geringem Aufwand eine Mouseover-Funktion einbinden. D.h. wenn der Benutzer auf die Grafik   mit dem Zeiger kommt, dann soll sich ein PopUp öffnen, welches die Grafik nochmals größer anzeigt.
Natürlich kann man das für jede Grafik wieder neu in den Quellcode schreiben, das ist allerdings bei sovielen Grafiken kein tolles Unternehmen.

Ich denke dies sollte auch per CSS funktionieren. Das "Grundgerüst" ist hier ( http://selfaktuell.teamone.de/artikel/css/mouseover/ ) zu finden. Doch wie baue ich das weiter aus?

Hat jemand eine Idee?

Viele Grüße und schonmal Danke!

[chlori]

Hi

Natürlich kann man das für jede Grafik wieder neu in
den Quellcode schreiben, das ist allerdings bei sovielen
Grafiken kein tolles Unternehmen.

Das ist nicht das Problem. Das Problem ist: Was ist mit
all den Usern mit Popup-Blocker oder Javascript deaktiviert?

Eine URL würde helfen!

Gruss
chlori

[beinaendi]

Hallo

Prinzipiell z.B. so: wenn alle Bilder im body sind, dann muss der event onMouseOver im body und nicht bei den einzelnen Bildern gesetzt werden.
Wenn Objekt = Bild window.open(...) bla bla

Mit freundlichen Grüsse,
beinaendi

[Maxx]

Hallo Michael,

Und zwar geht es um folgendes. WIr haben eine Seite mit ziemlich vielen Grafiken. (Ca. 2200) Jetzt wollen wir mit möglichst geringem Aufwand eine Mouseover-Funktion einbinden. D.h. wenn der Benutzer auf die Grafik   mit dem Zeiger kommt, dann soll sich ein PopUp öffnen, welches die Grafik nochmals größer anzeigt.
Natürlich kann man das für jede Grafik wieder neu in den Quellcode schreiben, das ist allerdings bei sovielen Grafiken kein tolles Unternehmen.

mit CSS wird es nicht gehen. Zumindest dann nicht wenn du nicht alle 2200 Grafiken (sind die alle in _einer_ Seite?) anpassen willst.

Mit javascript könntest du in einer Schleife über document.images.length jedem image einen onmouseover eventhandler zuweisen. Vorausgesetzt der Name der Ressource lässt sich aus dem Namen der Grafik ableiten. Und natürlich mit den ganzen Nachteilen einer js-Lösung

Grüße,

Jochen

[Avalon]

Und zwar geht es um folgendes. WIr haben eine Seite mit ziemlich vielen Grafiken. (Ca. 2200) Jetzt wollen wir mit möglichst geringem Aufwand eine Mouseover-Funktion einbinden. D.h. wenn der Benutzer auf die Grafik   mit dem Zeiger kommt, dann soll sich ein PopUp öffnen, welches die Grafik nochmals größer anzeigt.
Natürlich kann man das für jede Grafik wieder neu in den Quellcode schreiben, das ist allerdings bei sovielen Grafiken kein tolles Unternehmen.

mit CSS wird es nicht gehen. Zumindest dann nicht wenn du nicht alle 2200 Grafiken (sind die alle in _einer_ Seite?) anpassen willst.

Natürlich geht es mit CSS, jedenfalls in neuen Browsern:

img:+div {diplay:none;}
img:hover+div {display:block; /* plus Positions- und Dimensionsangaben* /}

und:

<img src="kleinesBild" alt="kakadu" />
<div>
<img src="großesBild" alt="papagei" title="TextzumBild" />
</div>

MSIE Nutzer sollten sich dann aber eine Lupe besorgen. Aber: Webdesign darf nicht auf MS-Niveau eingefroren werden.

Gruß
Avalon

[Maxx]

Hallo,

mit CSS wird es nicht gehen. Zumindest dann nicht wenn du nicht alle 2200 Grafiken (sind die alle in _einer_ Seite?) anpassen willst.

Natürlich geht es mit CSS, jedenfalls in neuen Browsern:

Er will die 2200 Grafiken _nicht_ anpassen. Und ohne 2200 Anpassungen geht es mit CSS _nicht_

Grüße,

Jochen

[WauWau]

Hallo,

Natürlich geht es mit CSS, jedenfalls in neuen Browsern:
Er will die 2200 Grafiken _nicht_ anpassen. Und ohne 2200 Anpassungen geht es mit CSS _nicht_

meint ihr mit Anpassungen, für jede Grafik Event-Handler reinzuschreiben? Das braucht er freilich nicht zu tun.

Ereignisüberwachung heißt das Sprichwort. Geht dann ganz wunderbar. Ist nur etwas komplizierter.

WauWau

[Maxx]

Hallo,

Natürlich geht es mit CSS, jedenfalls in neuen Browsern:

Er will die 2200 Grafiken _nicht_ anpassen. Und ohne 2200 Anpassungen geht es mit CSS _nicht_

meint ihr mit Anpassungen, für jede Grafik Event-Handler reinzuschreiben? Das braucht er freilich nicht zu tun.

Drücke ich mich so undeutlich aus?
Meine Aussage im ursprünglichen Posting war:
    Mit CSS wird es nicht gehen. Zumindest dann nicht wenn du
    nicht alle 2200 Grafiken anpassen willst.

Was Avalon missverstanden hat. Er schrieb:
    Natürlich geht es mit CSS, jedenfalls in neuen Browsern:

Worauf ich den Sachverhalt klarstellte und antwortete:
    Er will die 2200 Grafiken _nicht_ anpassen.
    Und ohne 2200 Anpassungen geht es mit CSS _nicht_

Und du schreibst jetzt:
    meint ihr mit Anpassungen, für jede Grafik Event-Handler
    reinzuschreiben? Das braucht er freilich nicht zu tun.
    Ereignisüberwachung heißt das Sprichwort.

Mir passiert das in letzter Zeit häufiger man mich nicht versteht. Solange das nur hier im Forum ist mache ich mir wenig Gedanken.
Nur, ist mir das auch schon mit Kunden passiert. Ich frage mich jetzt: liegt das an mir? An meinem Schreibstil, setzte ich zuviel voraus? Schreibe ich undeutlich, oder zu schnell?

Grüße,

Jochen

[WauWau]

Hallo Maxx,

Mir passiert das in letzter Zeit häufiger man mich nicht versteht.

Also ich habe das jetzt so verstanden, dass eine Möglichkeit, "Mousover-Effekte" (was auch immer für welche) möglichst arbeitsunaufwendig bei eben dieen 2200 Grafiken zu machen. Dabei sollte also sowas wie

<img src="..." onMouseover="..." onMouseout="..." onClick="...">

vermieden werden. Also Ereignisüberwachung für das väterliche element halt oder alle <img>'s oder wie-auch-immer. Siehe SelfHTML.

Solange das nur hier im Forum ist mache ich mir wenig Gedanken.

Ich muss zugeben, ich habe mir den Thread nicht von vorne und ganz durchgelesen :(

Nur, ist mir das auch schon mit Kunden passiert.

Weißt du, wie oft ich nicht verstanden werde? Sagen wir mal, das Verhältnis "Unverständnis im RL" im Vergleich zu "Unverständnis in der SelfCommunity" liegt bei 1:50. Jenachdem ;)

Ich frage mich jetzt: liegt das an mir? An meinem Schreibstil, setzte ich zuviel voraus? Schreibe ich undeutlich, oder zu schnell?

nö, garantiert nciht.
               ^^^^^- warum werde ich nicht verstanden? ;)
WauWau

[Avalon]

Hallo,

Natürlich geht es mit CSS, jedenfalls in neuen Browsern:

Mir passiert das in letzter Zeit häufiger man mich nicht versteht. Solange das nur hier im Forum ist mache ich mir wenig Gedanken.
Nur, ist mir das auch schon mit Kunden passiert. Ich frage mich jetzt: liegt das an mir? An meinem Schreibstil, setzte ich zuviel voraus? Schreibe ich undeutlich, oder zu schnell?

Nein, ich laß zu schnell!

Gruß
Avalon

[XaraX]

Hallo Avalon,

Webdesign darf nicht auf MS-Niveau eingefroren werden.

Diese Einstellung finde ich, wenn sie mit Ausschluß einhergeht, nicht korrekt. Auch wenn ich heute seit um 3:00 von sämtliche Systeme mal wieder wegen einem hausgemachten Bug von MS Backups zusätzlich ziehen darf...

Ich halte den Ausschluß von Usern, die es nicht besser wissen (möglicher Weise nicht besser wissen wollen), für eigene Faulheit.

Gruß aus Berlin!
eddi

[Ingo Turski]

Hi,

zunächst mal: was hat der von Dir gewählte Titel und Themenbereich mit Deinem Problem zu tun? Nichts.

zur Lösung: Du kommst um den Einbau der Eventaufrufe nicht rum. Allerdings sollte sich das automatisieren lassen.
Nutze die Suchen/Ersetzen-Funktion Deines Editors, z.B. wenn die Bilder verlinkt sind:
<a href=    ->     <a onmouseover="..." href =
und wenn nicht, dann halt:
<img src=   ->     <img onmouseover="..." src=

freundliche Grüße
Ingo

[XaraX]

Hallo Michael,

hast Du Dir mal klargemacht, wie oft man mit der Maus über den Anzeigebereich eines Browserfensters fährt? Mit einen Bewegung (je nach Größe der Bilder) habe ich ungewollt vielleicht 5 Popups erzeugt; das zum einen und zum anderen kann Dir so jeder binnen Sekunden Traffic auf den Server zaubern, der sicher auch nicht gewollt sein dürfte.

Was spricht den gegen onClick?

Gruß aus Berlin!
eddi

[at]

Hallo.

Was spricht den gegen onClick?

Dass es hier nicht notwendig ist.
MfG, at

[Michael]

Danke schonmal für die Anregungen.

@ XaraX: Es ist mir schon klar das dies viel Traffic bedeutet. Ich schließe auch nicht aus einen MouseClick zu benutzen. Es geht hier ja nur ums Prinzip. Die Anpassung auf over oder click kann dann ja immer noch geschehen.

@ Avalon: ISt es noch möglich deinen Code um die Funktion mit dem MouseOver zu erweiter?

@ Ingo: Warum ist der Beitrag hier falsch? Ich dachte es geht mit CSS und da habe ich es reingeschrieben. Wenn ich was falsch gemacht habe dann nur aus unwissenheit :)
Das mit dem Suchen/Ersetzen ist uns auch durch den kopf gegangen. Jedoch ändert sich ja der Bildname ständig und daher ist dies auch nicht so die  beste Lösung.

Trotzdem nochmal vielen vielen Dank!

[Ingo Turski]

Hi,

@ Ingo: Warum ist der Beitrag hier falsch? Ich dachte es geht mit CSS und da habe ich es reingeschrieben. Wenn ich was falsch gemacht habe dann nur aus unwissenheit :)

eben nicht. allein "onmouseover" sollte Dir schon klar machen, daß es sich um Javascipt handelt.

Das mit dem Suchen/Ersetzen ist uns auch durch den kopf gegangen. Jedoch ändert sich ja der Bildname ständig und daher ist dies auch nicht so die  beste Lösung.

ist doch kein Problem. Wenn Du <a> mit den anzuzeigenden Bildern verlinkt hast, nutze this.href, bei <img> könntest Du eine Funktion reinschreiben, die über this.src die Zielnamen zusammenbastelt - vorausgesetzt die Namen sind bis auf einen standardisietten Zusatz gleich.

freundliche Grüße
Ingo