[HILFE] Rollover-Effekt mit Javascript

joker.org · 24. März 2007

Hallo Leute,

ich bräuchte mal kurz eure Hilfe.
Ich muss für eine Homepage die Navigationsleiste mit Rollovergrafiken ausstatten.

Die Namen der Buttons lauten wie folgt:

Normalgrafik-Button: navi_home.gif
Highlight-Button: navi_home2.gif

wie müsste mein <script> aussehen und wie muss ich in den <body> einbinde.
Könntet ihr mir mal ein Beispiel posten, welches sicher funktioniert, bin nämlich schon am verzweifeln weil bei meiner Methode von 10 Buttons immer nur 3 gehen.

Danke.

Gruß joker.org

Anzeige

joker.org · 24. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

EDIT:

Ich habe noch erfahren, dass es auch mit CSS möglich wäre.
Was haltet ihr von dieser Idee? Was würdet ihr mir empfehlen ?

Danke.

MakenX · 24. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Mh Also bei buttons, wo nur der Hintergrund aus einer Grafik besteht ist CSS zu empfehlen, hast du jedoch Buttons die NUR AUS GRAFIK bestehen, wäre javascript schneller. Da aber aus Sicht moderner Webgestaltung Buttons aus purer Grafik und Abhängigkeit gegnüber JS fürn ***** sind, wäre CSS angebracht!

Cydoc · 24. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

mit javascript bilder vorladen lassen (googlen falls du nicht weißt wie)

per css classes die overs definieren und dann so:

OnMouseOver="this.className='hoverclass'" OnMouseOut="this.className='normalclass'"
[Is also eine Mischung aus CSS und JS]
{Ja nicht nur so in css definieren: navai; navi:hover (Nicht alle Browser unterstützen dass) }

(bei verdunklungs, herhellungsbutton empfehle ich opacity um nur 1ne grafik jeweils zu haben)

mfg

cyoc

CoCo · 24. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

move nach Webtechnik

Murdoc · 24. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

die einfachste möglichkeite ist hier javascript, mit css is es zwar auch möglich aber hier dann doch ein wenig fehl am platz.

hier ein beispiel:

HTML:

<html>
<body>
<a href="#" onmouseover="document.bild1.src='hover.gif';" onmouseout="document.bild1.src='out.gif';"><img src="out.gif" border="0" name="bild1" alt=""></a>
</body>
</html>

es sei denn du willst nur den hintergrund tauschen, dann ist css die bessere wahl.

a {
background-image: url();
}

a:hover {
background-image: url();
}

Cydoc · 24. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

a:hover ist NICHT zu empfehlen, da ":hover" nicht von jedem browser unterstützt wird.
sagte ich ja oben schon^^ also sollte man sowas nich empfehlen wenns nich für alle broswer is hm?^^
wenn man hovers macht und styles ändern will wäre classveränderung wie ichs nannte nich schlecht

aber stimmt nur bei buttons ist deine js only lösung schon simpler

Murdoc · 24. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

es stimmt schon das einige borwser mit :hover probleme haben, aber dennoch hab ich noch keinen (!) browser gesehn der mit a:hover nichts anfangen konnte. und ich hab hier sogar noch den IE 4.0.

der IE6 bekommt zb.: div:hover nicht gebacken, der mozilla dagegen schon. auf css4you.de kannst du auch nachlesen welcher browser was unterstützt.

MakenX · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Also vielleicht sollte sich hier manch einer erstmal informieren, denn bei a:hover hat kein Browser Probleme. Die Problemer sind bei der PseudoEigenschaft hover von divs und so weiter zu finden .... wie ich bereits sagte, bei Textlinks mit Bildhintergrund empfiehlt sich CSS, bei Links die nur aus Bildern besteht empfiehlt sich JS, weil es bei Bildern nichts hilft mit CSS den Hintergrund zu ändern, und hier einen leeren Text/leeren Link mit Höhe und Breite/Blindtext o.Ä. zu erstellen/zu benutzen wäre semantisch nicht korrekt und/oder zu viel gefummel!

Wir sprechen hier im erweiterten Sinn von Browserunterschieden und du gehst denen selbst auf den Leim. Denn die Events, die du hier mit onmouseover etc. betitlst, sind mit der Voranstellung von ON eigentlich nicht DOM konform. Ich möchte hier aber das Wort "eigentlich" nochmal betonen ....

Quelle:

encud · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

schreib den link einfach so:

HTML:

 <a href="ziel.html" onmouseover="document.grafik.src='navi_home2.gif'" onmouseout="document.grafik.src='navi_home.gif">
<img src="navi_home.gif" name="grafik">
</a>

und schon fertig

und zu css... geht zwar auch, aber ich bevorzuge dieses weil ich es einfacher finde....

edit: ohhh mist ich sehe gerade das da schon über mir einer schneller war naja vllt konnte ich ja trotzdem noch ein bissel helfen....

joker.org · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Hi,
also erstmal danke für eure schnelle Hilfe.
Ich bräuchte jetzt von euch detaillierteHilfe für die Javascript Methode.
Den ersten Teil hat ja schon Murdoc -4D gemacht.
Doch wie muss ich das Javascript schreiben im <head> der Datei ?
Oder benötige ich das dann gar nicht mehr, die Sachen mit
n1 = new Image();
n1.src = "......"

Danke.
Gruß joker.org

encud · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

nein brauchst du nicht mehr... ich dir das ja nochmal im prinzip genau so aufgeschrieben und du musst das einfach so in den link schreiben und nix anderes mehr machen!
wichtig ist halt, dass du im img-tag nicht: name="grafik" ; vergisst!!!
falls de noch hilfe brauchst, pn an mich

MakenX · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Praktisches Beispiel auf SEDRENART :: Matthias Davidson nichts im Head bereich, nur so wie es hier stand ...

Murdoc · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

da du das javascript von mir 1:1 kopiert hast und aus bild1 jetzt grafik gemacht hast muss der threadsteller jetzt als img name grafik anstatt bild1 schreiben

mehr musst du nicht schreiben, im head usw muss nichts extra rein.

joker.org · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Hy,
ok vielen Dank.
Ich werde mich jetzt demnächst (um Ostern rum) mal damit beschäftigen und die 3 Seiten die ich benötige coden.
Ich hoffe es klappt so schnell und so einfach wie ihr es geschrieben habt.
Aber ich denke das wird es schon
Nur was ich noch nicht verstehe ist das mit "name=grafik".
Heißt somit dann jedes gif-Image von mir mit "name" Grafik ?
Oder kann ich es jedes mal ändern ? Und vorne auch ?

HTML:

 <a href="ziel.html" onmouseover="document.[b]grafik[b].src='navi_home2.gif'" onmouseout="document.[b]grafik[b].src='navi_home.gif">
<img src="navi_home.gif" [b]name="grafik"[/b]>
</a>

Also müsste ich die oben fett gedruckten Wörter immer austauschen ? Oder ich kann sie ja jedes mal so lassen ist ja eigentlich egal weil es ja auch noch alt="text_text" gibt richtig ?

Danke.

Gruß joker.org

encud · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

also das is so, ich habe das nicht von dir kopiert sondern selber gemacht, nur übersehen, dass du das schon so gesagt hattest war ja keine absicht wollte dir auch nix klauen!
und jetzt zu joker.org
wenn ich dich richtig verstanden habe hast du das richtig erkannt du kannst den namen ändern
aber wenn du 2 solcher rollhover effekts machst musst du einen z.B. grafik1 und das andere dann grafik 2 nenen, sonst kann es sein dass er die andere grafik nimmt ich kann gleich nochmal nen link posten wo das nochmal sehr gut und genau erklährt ist!

edit: hier der link:http://www.inf-wiss.uni-konstanz.de/People/MB/js/images/images-20.htm

Cydoc · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Das mit dem :hover war nicht auf a:hover bezogen, tut mir leid wenns so rüberkam sonderna uf die allgemeinheit.

das es bei a geht ist mir klar, aber ebend wie hier gsagt wird bei divs und so und da hier ja nicht unbedingt von einem "a" link gesprochen wurde, wollte ich das nur sagen.

MakenX · 25. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Hier sagst du halt etwas genau anderes, nämlich auf a selbst bezogen ....

joker.org · 26. März 2007

AW: [HILFE] Rollover-Effekt mit Javascript

Hallo,
also ich glaube ich habe jetzt eine Ideallösung gefunden. (von "encud" per PN erhalten)

HTML:

<html> <head> </head> <script type="text/javascript"> function hover(Zustand) { switch (Zustand) { case 1: document.back.src="navi_home2.gif"; break; case 2: document.next.src="navi_termine2.gif"; break; default: document.back.src="navi_home.gif"; document.next.src="navi_termine.gif.jpg"; } } </script> </head> <body> <a href="#" onMouseOver="hover(1)" onmouseout="hover(3)"><img src="navi_home.gif" name="back"> <a href="#" onMouseOver="hover(2)" onmouseout="hover(4)"><img src="navi_termine.gif.jpg" name="next"> </body> </html>

Somit kann ich das Thema mit gutem Gewissen schließen und bedanke mich recht herzlich für eure schnelle und sachliche Hilfe.

Gruß joker.org

Nützliche Suchen

[HILFE] Rollover-Effekt mit Javascript

Videos zum Themenbereich