simpler image rollover effect

[tinu]

Hallo allerseits!

Also, ich hab jetzt mal ein bisschen recherchiert wie man am besten Rollover Images macht. Es sind unzählige Varianten zu finden, der Haken bei der Sache: Die meisten bestehen aus X Zeilen JavaScript.

Doch als ich es folgendermassen ausprobiert hab, hat das problemlos geklappt.

  
<a href="http://www.link.com" onMouseover="image_0.src='images/links2.gif';" onMouseout="image_0.src='images/links.gif';"><img name="image_5" src="images/links.gif" border="0" /></a>  

(Da waren da dann noch mehr Rollover images, aber das ist hierfür nicht relevant).

Wo ist denn nun der Haken bei der Sache? Kann doch nicht sein, dass alle mit ellenlangen Scripts hantieren wenns auch so einfach geht?!

Gruss
tinu

[Inita_]

hi,

nee, mit css muss man machen.

Schau mal den menu: lacasa-homes.lv

G, Inita

[suit]

Hallo allerseits!

Also, ich hab jetzt mal ein bisschen recherchiert wie man am besten Rollover Images macht. Es sind unzählige Varianten zu finden, der Haken bei der Sache: Die meisten bestehen aus X Zeilen JavaScript.

die x-zeilen sind meistens mit einem MM_-präfix versehen und stammen zb aus dem dreamweaver - die dinger nennen sich funktion und haben durchaus sinn um code zu sparen - bei einem einzelnen link ist das unsinn, bei 2 bereits von vorteil und spätestens bei mehreren eine enorme codersparnis - die macromedia-scripte sind zwar eine frechheit und völlig mit sinnlosem müll überladen, aber der ansatz ist prinzipiell richtig

http://www.link.com

bitte nutze für beispiele zb domain example.com (RFC 2606, Abschnitt 3

Wo ist denn nun der Haken bei der Sache? Kann doch nicht sein, dass alle mit ellenlangen Scripts hantieren wenns auch so einfach geht?!

der haken ist, dass du das eben harcodiert hast - ein weiter haken ist, dass es ohne javascript nicht funktioniert

die klügere variante ist das ganze per css zu machen - inita hat dir bereits eine variante gezeigt, wie das ganze im detail umgesetzt wird, verrät dir diese seite
http://www.wellstyled.com/css-nopreload-rollovers.html

[tinu]

die x-zeilen sind meistens mit einem MM_-präfix versehen und stammen zb aus dem dreamweaver - die dinger nennen sich funktion und haben durchaus sinn um code zu sparen - bei einem einzelnen link ist das unsinn, bei 2 bereits von vorteil und spätestens bei mehreren eine enorme codersparnis - die macromedia-scripte sind zwar eine frechheit und völlig mit sinnlosem müll überladen, aber der ansatz ist prinzipiell richtig

Sorry, aber hab nicht wirklich was verstanden. Mit X meinte ich einfach "viele"... schätz wir haben das unterschiedlich interpretiert, oder?

der haken ist, dass du das eben harcodiert hast - ein weiter haken ist, dass es ohne javascript nicht funktioniert

Hmm... bei mir tuts das aber?!
Ich möcht ein Schachbrett darstellen (64 Felder; davon 32 weiss und 32 schwarz ;) ). Auf jedem Feld ist ein kleines Bild bzw. jedes Feld besteht aus jeweils einem Bild mit schwarzem oder weissem Hintergrund. Wenn man mit der Maus drüber fährt soll das onMouse-over Bild des jeweiligen Feldes angezeigt werden, welches dem Negativ des ersten Bildes entspricht (umgekehrte Farben). Hier das Beispiel in klein mit nur neun Felder. (Also bei mir klappt das da mit der im ersten Beitrag genannten codierung... bitte verzeiht die Tabellendarstellung...ist nur zu testzwecken :D. Die Felder verweisen momentan alle auf google):
http://tattergreis.ta.funpic.de

die klügere variante ist das ganze per css zu machen - inita hat dir bereits eine variante gezeigt, wie das ganze im detail umgesetzt wird, verrät dir diese seite
http://www.wellstyled.com/css-nopreload-rollovers.html

Ja, kenn die Möglichkeiten mit CSS, aber sobald solche Bilder im Spiel sind gehts nicht mehr wirklich (es sei denn es gibt was womit man mit CSS die Farben eines Bildes invertiren kann). Sonst gäbs mit CSS auch noch die Möglichkeit, mit nem unsichtbaren gif und ein riesiges bild im hintergrund, welches verschoben wird (so wird nichtmehr das einzelne Feld umgefärbt, sondern es gibt einfach ein riesiges bild mit 64 Schachfeldern (und dem Ausgangsschachbrett) auf welchem jeweils ein Feld umgekehrt ist. Wär aber dämlich so ne grosse Grafik zu laden und das verschieben der Grafik würde ebenfalls JS beanspruchen.

Deshalb hab ich CSS ausgeschlossen und halt die simple Frage gestellt wo der Haken bei meinem Code ist. Denn er funktioniert, ohne dass ich irgendwo ene JS-Definition reingehauen hätte.

Gruss
Tinu

[tinu]

Ja, kenn die Möglichkeiten mit CSS, aber sobald solche Bilder im Spiel sind gehts nicht mehr wirklich (es sei denn es gibt was womit man mit CSS die Farben eines Bildes invertiren kann).

Ähm, naja. Nebst der Tatsache, dass ich invertieren falsch geschrieben hab: Die Möglichkeit gibts (filter:invert()) aber die klappt ja leider nur bei "MS-Produkten" ;)

[EKKi]

Mahlzeit tinu,

Ja, kenn die Möglichkeiten mit CSS, aber sobald solche Bilder im Spiel sind gehts nicht mehr wirklich

Wieso nicht?

#foo {  
  background-image: url(black.gif);  
}  
#foo:hover {  
  background-image: url(white.gif);  
}

Was soll daran nicht gehen?

MfG,
EKKi

[tinu]

#foo {

background-image: url(black.gif);
}
#foo:hover {
  background-image: url(white.gif);
}

>   
> Was soll daran nicht gehen?  
  
Mahlzeit :)  
  
Naja, das geht schon, aber das "invertiert" nur die Hintergrundfarbe und nicht die Hintergrundfarbe UND das Bild auf dem Feld.  
  
Grütze  
Tinu

[suit]

Naja, das geht schon, aber das "invertiert" nur die Hintergrundfarbe und nicht die Hintergrundfarbe UND das Bild auf dem Feld.

was spricht gegen:

#foo {  
  background-color: #000000;  
  background-image: url(black.gif);  
}  
#foo:hover {  
  background-color: #FFFFFF;  
  background-image: url(white.gif);  
}

[tinu]

Naja, das geht schon, aber das "invertiert" nur die Hintergrundfarbe und nicht die Hintergrundfarbe UND das Bild auf dem Feld.

was spricht gegen:

#foo {

background-color: #000000;
  background-image: url(black.gif);
}
#foo:hover {
  background-color: #FFFFFF;
  background-image: url(white.gif);
}

  
oh mann... ich glaub mein Hirn hat echt nen Schaden erlitten beim gestrigen Zusammenstoss mit dem Küchenschrank. Natürlich habt ihr recht.  
  
Danke suit und EKKi  
  
Gruss  
Tinu

[tinu]

*narf*

Sorry, aber ich bekomms nicht wirklich hin. Hab nun zwei Probleme mit folgendem Code (am Beispiel nur eines Feldes, war bei allen gleich):

  
<head>  
<style type="text/css">  
a img {  
  border: 0;  
}  
.pic1 {  
  background-image: url(images/blog.gif);  
  background-color: #000000;  
}  
.pic1:hover {  
  background-color: #FFFFFF;  
  background-image: url(images/blog2.gif);  
}  
</style>  
<title>schachbrett</title>  
</head>  
<body>  
 <a class="pic1" href="http://www.google.ch">  
 <img name="pic1" src="images/blank.gif">  
 </a>  
</body>  

1. Im IE wirds zwar korrekt angezeigt und der hover-effekt funktioniert einwandfrei. Das gesamte Feld ist nun allerdings 104 x 104 pixel gross statt 100 x 100. Auch als ich per CSS die Höhe und Breite auf 100 festgeleget und border, margin und padding alles auf null gesetzt hab, bliebs bei 104 x 104. Grummel! Warum?!
2. Im Firefox wirds total besch... angezeigt. Das Platzhalter-Gif wär an der richtigen Position, das Hintergrundbild wird jedoch erst am unteren Rand des Platzhalters angezeigt und ein paar Pixel darunter abgeschnitten.

Was mach ich verkehrt?!

Grummel... langsam hab ich die Nase voll. Wenn ich schon hier Stunden verschwende, nehm ich doch lieber nen inkorrekten JS-Code, der wenigstens funktioniert.

[EKKi]

Mahlzeit tinu,

1. Im IE wirds zwar korrekt angezeigt und der hover-effekt funktioniert einwandfrei. Das gesamte Feld ist nun allerdings 104 x 104 pixel gross statt 100 x 100. Auch als ich per CSS die Höhe und Breite auf 100 festgeleget und border, margin und padding alles auf null gesetzt hab, bliebs bei 104 x 104. Grummel! Warum?!

http://de.selfhtml.org/css/layouts/einfuehrung.htm#boxmodell@title=Box-Modell-Probleme, würde ich schätzen.

Darüber hinaus versteht der IE bis Version 6 http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm@title=Pseudoklassen wie :hover nur bei Links, ab Version 7 zumindest :hover auch bei anderen Elementen.

MfG,
EKKi

[tinu]

http://de.selfhtml.org/css/layouts/einfuehrung.htm#boxmodell@title=Box-Modell-Probleme, würde ich schätzen.

Merci EKKi,

Nur leider war ich da auch schon. Hat mir aber leider nicht wirklich weitergeholfen :(.

[suit]

Nur leider war ich da auch schon. Hat mir aber leider nicht wirklich weitergeholfen :(.

https://forum.selfhtml.org/?t=174378&m=1145357
bau dein html so auf wie ichs beschrieben hab, dann hast du keine probleme ;) - deine bilder sind reine design-elemente und kein inhalt, darum ist <img /> einerseits semantisch unklug und andererseits bei deinem vorhaben hinderlich

[tinu]

https://forum.selfhtml.org/?t=174378&m=1145357
bau dein html so auf wie ichs beschrieben hab, dann hast du keine probleme ;) - deine bilder sind reine design-elemente und kein inhalt, darum ist <img /> einerseits semantisch unklug und andererseits bei deinem vorhaben hinderlich

Dankeschön.

Das einzige was daran nicht so toll ist, dass der Übergang von einem Bild zum nächsten Bild ne halbe Sekunde dauert, so dass zwischen den Bildern das Feld ganz schwarz bzw. ganz weiss (ohne Bild) aufflackert. Aber ja... ist wohl ein notwendiges Übel. Lieber so, als dass Leute die JS ausgeschaltet haben den Effekt garnich zu sehen bekommen.

Dankeschön und schönen Tag noch
tinu

[EKKi]

Mahlzeit tinu,

Das einzige was daran nicht so toll ist, dass der Übergang von einem Bild zum nächsten Bild ne halbe Sekunde dauert, so dass zwischen den Bildern das Feld ganz schwarz bzw. ganz weiss (ohne Bild) aufflackert.

Das könnte damit zusammenhängen, dass die Bilder jeweils vom Browser geladen werden (müssen). Das könntest Du beheben, indem Du die Bilder vorlädst (und in einem Array speicherst). Das ist auch meistens das, was den "Bildwechselcode", den es zuhauf im Netz gibt, etwas länger und komplizierter aussehen lässt.

MfG,
EKKi

[suit]

Das könnte damit zusammenhängen, dass die Bilder jeweils vom Browser geladen werden (müssen). Das könntest Du beheben, indem Du die Bilder vorlädst (und in einem Array speicherst). Das ist auch meistens das, was den "Bildwechselcode", den es zuhauf im Netz gibt, etwas länger und komplizierter aussehen lässt.

oder man packt beide bilder zusammen in ein file und realisiert den rollover durch verschieben des hintergrundbilds (auch das hatte in diesem thread schon erwähnt)

[EKKi]

Mahlzeit tinu,

Naja, das geht schon, aber das "invertiert" nur die Hintergrundfarbe und nicht die Hintergrundfarbe UND das Bild auf dem Feld.

Das stimmt nicht, invertiert wird da nichts. Da wird das Hintergrundbild ausgetauscht - ich dachte, das ist das, was Du willst? Sicherlich kann man nebenbei auch noch die Hintergrundfarbe verändern, aber davon hast Du ja nichts geschrieben.

MfG,
EKKi

[suit]

Sorry, aber hab nicht wirklich was verstanden. Mit X meinte ich einfach "viele"... schätz wir haben das unterschiedlich interpretiert, oder?

viel javascript ist nicht notwenig, 5 saubere zeilen sind genug ;)

Hmm... bei mir tuts das aber?!

nein tut er nicht - defintiv (totsicher) - und auch bei dir funktionierts nicht

(Also bei mir klappt das da mit der im ersten Beitrag genannten codierung... bitte verzeiht die Tabellendarstellung...

wie gesagt ohne javascript funktionierts nicht und bei 64 feldern wirst du mit der methode sowieso irre

die tabellendarstellung ist auch zu testzwecken unverzeihlich, du machst dir damit unnötig arbeit

Ja, kenn die Möglichkeiten mit CSS, aber sobald solche Bilder im Spiel sind gehts nicht mehr wirklich (es sei denn es gibt was womit man mit CSS die Farben eines Bildes invertiren kann).

du musst die bilder auch nicht invertieren - du kannst sie tauschen oder verschieben - so wie du das auch mit javascript machst

Deshalb hab ich CSS ausgeschlossen und halt die simple Frage gestellt wo der Haken bei meinem Code ist. Denn er funktioniert, ohne dass ich irgendwo ene JS-Definition reingehauen hätte.

der haken bei deinem code ist wie gesagt: er ist funktioniert nicht ohne javascript und javascript sehe ich bei dir eine ganze menge ;) - oder glaubst du die eventhandler "onmouseover" und "onmouseout" funktioneren durch pure magie? ;)

darum also der vorschlag - da das ganze offenbar eine liste an menupünkten (halt 64 stück) wird, verfasse folgenden code

<ul id="menu">
  <li class="odd"><a id="m_blog" href="#">Blog</></li>
  <li><a id="m_forum" href="#">Forum</></li>
  <li class="odd"><a id="m_suit" href="#">Website von Suit :p</></li>
  [...]
</ul>

die ids brauchen übrigens kein präfix, stellt aber sicher, dass du keinen menupunkt hast, der zb zufällig so heisst wie ein anderes seitenelement - bei 64 stück kann das schon mal vorkommen

wenn du das geschafft hast, formatierst du das zeug per css

ul hat eine breite und höhe von jeweils 8x feldbreite/höhe, die listenelemente bzw die links floaten links und sind jeweils feldhöhe/breite gross und haben als hintergrundbild den normalzustand des links - der text ist mit negativem textindent und overflow hidden ins nirvana geschossen - jeder zweite li (mit der klasse odd = ungerade) ist übrigens weiss bzw schwarz, jenachdem

bau dir das bitte mal in ein beispiel ein, wenn du das hast (etwa 10 bis 20 zeilen css) und je bild menupunkt eine zeile extra bist du schon fast fertig - dann brauchst du nur noch 1 zeile für den :hover zustand und du bist fertig