• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder - Contentveränderung mit Html oder Javascript?

J

Johannes11

Neues Mitglied
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
 
Zuletzt bearbeitet:
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:
Code: 
$(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
 
Ich meinte nicht den (Bild-)mouseover-Effekt, sondern, was der Coursor macht. Der zeigt ja beim drüberfahren immer einen kleinen Infotext an ..
 
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.
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben