Bilder - Contentveränderung mit Html oder Javascript?

Hallo,

ich mache gerade eine Seite bei der auf der Startseite 10 Bilder (jeweils ca 7x7cm groß) zu sehen sind. Diese sollen ihren Content beim drüberfahren mit dem Coursor verändern (erst ist das Bild sichtbar, dann ein kurzer Text). Ich habe dies schon einmal mit CSS gelöst, allerdings betraf es dort nur ein Bild.

CSS:

#headline a{
margin-top:30px;
display:block;
padding:0;
background: url(…/img/headline.gif) no-repeat top left;
height:120px;
width:809px;
}
#headline a:hover{
background-position: top right;

Jetzt ist meine Frage ob es sich bei 10 Bildern evtl. auf die Ladezeit der Seite auswirkt und es vielleicht eine „ökonomischere“ Variante mit Javascript (o.ä.) gibt. Ich würde mich freuen, wenn mir da jemand weiterhelfen könnte.

Bis dahin schöne Grüße

Johannes

10 Bilder sind 10 Bilder.
Wenn du dir Sorgen um die Ladezeit machts, nimm weniger.
Aber du wirst schon deine Gründe für die Anzahl haben, darum verstehe ich die Frage nicht so ganz.
Javascript kann da auch nichts „ökonomischer“ machen.
Die Images müssen so oder so geladen werden.
Wenn du die Ladezeiten beeinflussen willst, komprimiere deine Bilder (zB als PNG oder JPG) und halte die DPI niedrig.

Nebenbei bemerkt:
Zentimeter ist ein höchst unvorteilhaftes Maß in Bezug auf Webdesign.
Je höher die eingestellte Bildschirmauflösung, um so kleiner erscheint das Element.
Je größer das Display bei gleicher Auflösung, um so größer erscheint das Element.
Und natürlich umgekehrt.
Pixel sind da das angeratene Maß, wenn sich jemand eine Vorstellung machen können soll!

Okay, danke erstmal für die Antwort. Ich frage nur weil (z.B. auf dieser Seite lenaloeber.net) auch viele Bilder auf der Startseite sind, welche sich aber ohne Probleme sofort aufbauen und das wohl mit Javascript gelöst wurde …

Grüße

Noch mal.
Javascript hat keinerlei Einfluss darauf, wie schnell Bilder zum ersten mal geladen werden.
Wie sollte es auch?
Kann Javascript deine Internetverbindung beschleunigen?
Oder die des Servers, auf dem die Website gehosted ist?

Das denke ich auch gar nicht, dass Javascript an sich Einfluss darauf hat. Aber es könnte ja sein, dass es Scripte gibt, die den Vorgang optimieren (wie gesagt der oben genannte Link, wo die Bilder sehr flüssig und gleichmäßig geladen werden). Ich kenne mich da nicht so gut aus, sonst würde ich hier ja auch keine Fragen stellen …

Grüße

Auf der verlinkten Seite werden die Ressourcen erst unsichtbar (per CSS eingestellt) vorgeladen und dann auf sichtbar geschaltet. Dazu wird das JavaScript-Event window.onload verwendet, das erst ausgelöst wird, wenn alle Ressourcen geladen sind.

Die Inhalte werden also erst später dargestellt, dafür ist aber nichts „Halbfertiges“ zu sehen.

Ah ok vielen Dank. Kennst Du vielleicht das Script davon und weisst Du welches Script bei der Mouse-Over Funktion der einzelnen Bilder/Texte benutzt wurde? Das wäre super.

Schöne Grüße

Johannes

Ich würde sagen: Schau in den Code der Seite. Dort steht alles halbwegs sauber aufgelistet (in der eingebundenen, domain-spezifischen JS-Datei). Für die Sache mit dem Einblenden ist vor allem der Teil ganz unten interessant.

(So habe ich das vor meiner letzten Antwort übrigens auch gemacht.)

Das ist natürlich etwas Gefummel, aber wenn du so was selbst machen willst, müsstest du damit klarkommen.

Das soll kein Aufruf zum Content-Klau sein. Aber es spricht wohl nichts dagegen, die grundlegende Vorgehensweise zu analysieren.

Ok, den Code für die Lade/Wartefunktion habe ich gefunden. Aber ich weiss nicht genau, welcher Teil für die Mouseover-Funktion der einzelnen Bilder zuständig ist, da ich bei Javascript noch Anfänger bin. Kannst Du mir da vielleicht noch einmal weiterhelfen?
Vielen Dank und Grüße

Dafür sind diese Teile zuständig:

$(e).getElement('.mousearea').addEvents({ mouseover: function() { showBack(e.getProperty('id')); }, mouseout: function() { hideBack(e.getProperty('id')); }, click: function() { var link = e.getProperty('href'); window.location = link; } });

Erklärung: hier wird jeweils eine JavaScript-Funktion für mouseover, mouseout und click an alle Elemente gehanden die innerhalb von Elementen die die Klasse „mousearea“ haben vorkommen. Die dabei genannten Funktionen showBack() und hideBack() blenden darin liegende Elemente mit den alternativen Inhalten ein und aus.

Hallo, vielen Dank für die Erklärung, Ihr habt mir echt geholfen. Ich probiere es gleich mal aus. Vielleicht werde ich im Laufe dessen noch eine Frage haben, aber ich hoffe mal nicht.

Ein schönes Wochenende noch

Johannes

Hi, eine Frage habe ich noch. Ich untersuche gerade den Code von der (verlinkten) Seite. Allerdings finde ich nicht das Script vom Coursor (bei mouseover kommt text). Weiss jemand wo das drin steht (css, javascript, mootools?)

Schöne Grüße

Das ist das, was threadi gepostet hat.

Dazu noch die paar Zeilen darüber unter //SHOW BACK OF CARDS.

Ich meinte nicht den (Bild-)mouseover-Effekt, sondern, was der Coursor macht. Der zeigt ja beim drüberfahren immer einen kleinen Infotext an …

Eben der wird durch den von mir genannten Code-Teil ein- und ausgeblendet.

Was du meinst, dürfte das „Tips“ sein.

Den Effekt hatte ich eben gar nicht bemerkt.

Ja genau, Tips ist es (habe gerade im Stylesheet was gelöscht und da hat es sich geändert). Allerdings weiss ich nicht, wo ich die „Hauptfunktion“ finde, bzw. wie ich das Tips komplett löschen kann. Im Mootools-Script steige ich gar nicht durch …

MooTools ist nur die Hintergrund-Abhängigkeit. Da würde ich nicht dran rumfingern. Es zwingt dich aber niemand, im konkreten Anwendungscode Tips-Instanzen zu erzeugen.

Hallo. Das versteh ich jetzt nicht genau. Wo steht denn genau die Tips-Funktion, damit ich sie rauslöschen kann?

Schöne Grüße

Warum willst du sie denn zwingend rauslöschen? Du brauchst sie doch lediglich in deiner Seite nicht einzusetzen.

MooTools ist eben ein Framework, das eine Menge an Funktionen mitbringt. Was du davon nicht benötigst, setzt du eben einfach nicht ein. Es komplett aus dem MooTools-Code zu entfernen, ist aber umständlich (etwaige interne Abhängigkeiten müssen erkannt werden) und ehrlich gesagt auch sehr sinnfrei, weil du es bei jedem Library-Update aufs Neue erledigen musst.