HTML Kurze Frage: Bilder beim ersten aufrufen mit laden

Skuzzle · 7. Juni 2008

Hi, eine kurze frage habe ich noch:

In meiner Navigationsleiste, wird beim MouseOver und MouseOut jeweils ein anderes Bild angezeigt. Nun wird das MouseOver Bild erst beim ersten MouseOver geladen und es dauert deshalb eine kurze Zeit bis es angezeigt wird. Kann man diese Bilder irgendwie beim ersten laden der Seite mit laden lassen so dass sie dann im Cache landen?

Menü ist hier zu sehen:
http://www.skuzzle.bplaced.net/FLSTestsite/german/index.html

krizzelfix · 7. Juni 2008

DU kannst mit der JavaScript Funktion "onload" die Bilder Vorladen oder die Bilder normal in den Quelltext einbinden und mit CSS verstecken.

Grüße

krizzel

//EDIT: Sehe aber grade das Bilder vollkommen überflüssig sind.
Du könntest mit CSS ein Padding um den Text machen und beim Mouse over einfach ein Border einfügen.

Skuzzle · 7. Juni 2008

onLoad ist ja eher ein Ereignis. Ich würde dann wohl so vorgehen:

<body onLoad="...">

aber wo lad ich die Bilder dann hin? Gibts ne JS Funktion die die Bilder nur in den Cache lädt?

Tankred · 7. Juni 2008

Schau Dir nochmal das Edit von krizzelfix an. Ich denke auch, dass Bilder hier völlig unnötig sind und dass CSS-Border hier besser wären.

claW. · 7. Juni 2008

entweder du nimmst das schon von dir vorgeschlagene oder du bastelst dir einen container mit bildern die vorgeladen werden sollen und schiebst ihn irgendwo hin wo man ihn nicht sieht. bspw:

html:

HTML:

<html>
<head>
<title></title>
<style type="text/css">
<!--
#preload-pictures {
  position: absolute;
  left: -10000px;
  top: -10000px;
}
-->
</style>
</head>
<body>

<div id="preload-pictures">
<!-- hier alle hover-bilder einbinden -->
</div>

</body>
</html>

damit kannst du ohne javascript sicherstellen, dass die bilder vorher geladen werden und nicht erst beim darüberfahren.

muhkuher · 7. Juni 2008

Mouseover-Effekte kannst du auch mit CSS realisieren. Das verzögerte Nachladen kannst du verhindern, in dem du für jeden Menüpunkt jeweils nur ene Bild-Datei verwendest, in der alle Stati drin sind. Dieses Bild wird dann als Hintergrundgrafik des Links eingebunden und je nach Event wird die background-position angepasst.

Schematischer Aufbau eines Menübildes:

+-----------------+
| normal |
+-----------------+
| hover |
+-----------------+
| click |
+-----------------+
| visited |
+-----------------+

Der Link wird mit display: block; zu einem Block-Element, das die gleichen Abmessungen hat, wie eines der Hintergrundbilder. Über die Pseudo-Klassen :hover, :visited, :active kannst du dann die background-position anpassen, sodass der entsprechende Teil des bildes eingeblendet wird. Ganz ohne JS.

Skuzzle · 7. Juni 2008

Hi, ich versuch es jetzt gerade mit reinem CSS, bin auch schon fast erfolgreich damit. Leider muss ich die Menübilder mit margin-bottom auf der richtigen Höhe halten. Wenn ich nun mit der Maus drüber fahre und der Balken drunter angezeigt wird, rutscht das ganze Bildchen 2 px nach oben. Das ist eigentlich gar nicht so schlimm, wär aber nett wenn mans wegbekommen könnte: Hier der erste entwurf:

http://www.skuzzle.bplaced.net/testsite/german/index.html

Edit: bah, vergesst das. Einfach im :hover den margin 2px nach unten setzen und es funzt. Vielen Dank für die Hilfe

Tankred · 7. Juni 2008

Ich finde den Effekt eigentlich ganz ansprechend.

Wenn Du ihn weghaben willst, musst Du glaube ich die Höhe des Buttons beim Hover um die Breite des Randes reduzieren. Oder grundsätzlich einen Rand hinzufügen, bei dem sich beim Hover einfach die Farbe ändert.

krizzelfix · 7. Juni 2008

Du kannst einfach bei dem Link schon einen Border in weiss setzten, den du dann beim Mouse Over in das Blau färbst.

Aber ich versteh nicht warum du das Menü als Grafik machst. Das kann man doch super leicht in CSS machen.
Da durch würde deine Seite schneller laden und die Leute ohne DSL sich freuen.

Grüße

krizzel

Skuzzle · 7. Juni 2008

ja hab ich auch schon überlegt. durch was für elemente könnte man die <img>'s am besten ersetzen? Eine Tabelle vielleicht oder lieber divs? Syntaktisch geht wohl beides, ich frag mich nur was semantisch die bessere Variante ist.

Skuzzle · 7. Juni 2008

so, ich hab es jetzt mal probiert:

Code:

div.menubutton {
	text-align: center;
	background-color: rgb(253,173,1);
	width: 100px;
	height: 31px;
	margin-bottom: 22px;
	display: inline;
}

div.menubutton:hover {
	margin-bottom: 20px;
	border
}

aus irgend einem Grund werden aber die width, height und margin angaben komplett ignoriert und ich weiss nicht warum. Wenn ich display:inline weglasse gehts, nur dann ist der button natürlich in der falschen zeile :/

HTML:

		<div id="nav">
			<img src="pics/nav/logo.jpg" title="" alt="logo" width="278" height="115">
			<div class="menubutton">Home</div>
		</div>

Und das tut blöderweise nicht so wie ich will :/

krizzelfix · 7. Juni 2008

Das liegt daran, dass du die Elemene auf Inline stellst.
Wenn du dein Div auf blocked lässt, werden die angaben auch Berücksichtigt.

Grüße

krizzel

Skuzzle · 7. Juni 2008

ja, ist klar, aber dann werden die buttons ja untereinander angezeigt, weil block elemente ja eine neue zeile beginnen. ich habs jetzt aber trotzdem so gemacht und die divs sind nun alle float:left. das klappt sehr gut so

iF_ · 11. Juni 2008

Kann man diese Bilder irgendwie beim ersten laden der Seite mit laden lassen so dass sie dann im Cache landen?

Code:

html
body

- content -

- footer -

<div style="visibility:hidden;height:1px;width:1px;overflow:hidden;position:absolute;top:0;left:-1px">
<img src='myPic...
<img src='myPic...
<img src='myPic...
<img src='myPic...
<img src='myPic...
</div>

dummix · 11. Juni 2008

Das Vorausladen durch Verstecken via visbility finde ich unnötig. Alle Effektbilder einfach in eine Bilddatei und dann je nach Status background-position ändern. Bei Menüs bietet sich semantisch gesehen eine Liste am ehesten an.

krizzelfix · 11. Juni 2008

Das Thema ist doch schon längst erledigt.
Und es wurde eine wesentlich bessere Lösung gefunden mit der man keine Bilder laden muss.
Wozu also den Thread nochmal ausgraben, wenn keine Fragen zu dem Thema bestehen?

@iF_: Willkommen im Forum.

Grüße

krizzel

Suche

HTML Kurze Frage: Bilder beim ersten aufrufen mit laden

Skuzzle

Lt. Junior Grade

krizzelfix

Commander

Skuzzle

Lt. Junior Grade

Tankred

Gast

claW.

Gast

muhkuher

Ensign

Skuzzle

Lt. Junior Grade

Tankred

Gast

krizzelfix

Commander

Skuzzle

Lt. Junior Grade

Skuzzle

Lt. Junior Grade

krizzelfix

Commander

Skuzzle

Lt. Junior Grade

iF_

Newbie

dummix

Lt. Junior Grade

krizzelfix

Commander

Ähnliche Themen