Rollovereffekt

[Xen]

Morgen,

ich würde gerne in einem Bild mehrere Bildbereiche als verschiedene Rolloverbilder erstellen, dazu müsste sich aber dann noch auf einer anderen Position ein Text ändern.

Also... um es verständlicher zu machen:
Ich habe 6 Mitarbeiter hintereinander versetzt stehen. Wenn man auf einen mit der Maus rollt soll derjenige sich zum Betrachter wenden. Dazu muss dann noch zum jeweiligen der Text oben einfügen.

Ist dies möglich? Hab etwas gegoogelt aber sowas hab ich leider nicht gefunden.

Vielen Dank im Voraus

[EKKi]

Mahlzeit,

Ich habe 6 Mitarbeiter hintereinander versetzt stehen. Wenn man auf einen mit der Maus rollt soll derjenige sich zum Betrachter wenden. Dazu muss dann noch zum jeweiligen der Text oben einfügen.

Ich fasse mal zusammen: Du willst <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=beim Drüberfahren> mit der Maus <http://de.selfhtml.org/javascript/objekte/images.htm#src@title=die Quelle des Bildes> austauschen (nämlich z.B. gegen ein animiertes GIF) und zusätzlich <http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=den Inhalt> <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=irgendeines Elements> ändern?

MfG,
EKKi

[suit]

Ich fasse mal zusammen: Du willst <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=beim Drüberfahren> mit der Maus <http://de.selfhtml.org/javascript/objekte/images.htm#src@title=die Quelle des Bildes> austauschen (nämlich z.B. gegen ein animiertes GIF) und zusätzlich <http://de.selfhtml.org/javascript/objekte/all.htm#inner_html@title=den Inhalt> <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=irgendeines Elements> ändern?

ich denke dass javascript dafür ungeeignet ist, da man den selben effekt mit css problemlos hinbekommt (auch im ie6) und imo sogar einfacher und leichter wartbar

[Xen]

super hat geklappt dank suits link, jetzt muss ich nur noch den text einblenden lassen, aber das scheint kein problem zu sein.

Vielen Dank

[LX]

ich denke dass javascript dafür ungeeignet ist, da man den selben effekt mit css problemlos hinbekommt (auch im ie6) und imo sogar einfacher und leichter wartbar

Sicher kann man die Bilder slicen und in Links setzen, deren Größe fix ist und die bei gesetztem Hover-Attribut ein anderes background-image bekommen; außerdem kann man den jeweils geänderten Text in den Link packen, absolut an die gleiche Stelle positionieren und nur dann ein display:block geben, wenn das Hover-Attribut gesetzt ist - das sollte auch im MSIE6 gehen (der ja zumindest das Hover-Attribut für links unterstützt).

Allerdings ist die von Dir vorgeschlagene CSS-Lösung nicht unbedingt einfacher und das Nachladen der Bilder geht auch nicht schneller als beim JavaScript, sondern langsamer. Insofern halte ich die JavaScript-Lösung für besser.

Gruß, LX

[suit]

Allerdings ist die von Dir vorgeschlagene CSS-Lösung nicht unbedingt einfacher und das Nachladen der Bilder geht auch nicht schneller als beim JavaScript, sondern langsamer. Insofern halte ich die JavaScript-Lösung für besser.

das "nachladen" der bilder ist mit der richtigen technik kein argument http://www.wellstyled.com/css-nopreload-rollovers.html

und es geht mitnichten langsamer - die javascript variante ist theoretisch sogar langsamer - die bilder sind die selben, exakt gleich gross - kein unterschied in der ladezeit - mit der ausnahme, dass ich 2 (oder mehr) bilder in ein file packe und somit die anzahl der http-anfragen verringere (das ist das größte performanceproblem) ein css file welches ich anfragen muss hab ich sowieso, ein javascript-file nicht unbedingt - also wieder ein request mehr

javascript hat zudem den entscheidenden nachteil, dass es ohne javascript nicht (also überhaupt nicht) funktioniert - die css lösung funktioniert hingegen auch mit deaktivierten javascript und auch ohne css

die javascript variante verändert das src-attribut des verlinkten bildes und manipuliert das css (display none/block) - im endeffekt muss man 2 techniken dafür nutzen (also sowieso wieder css), obwohls mit css alleine auch funktioniert

versteh mich nicht falsch, javascript ist eine feine sache - aber für rollover-effekte ist javascript sicher nicht sinnvoll, wenns mit css alleine wunderbar funktioniert

[suit]

Also... um es verständlicher zu machen:
Ich habe 6 Mitarbeiter hintereinander versetzt stehen. Wenn man auf einen mit der Maus rollt soll derjenige sich zum Betrachter wenden. Dazu muss dann noch zum jeweiligen der Text oben einfügen.

http://www.alistapart.com/articles/sprites

die text selbst fügst du als kindelemente des links ein und positionierst sie entsprechend wo du sie haben willst - aber nix überstürzen