Søg
Avatar billede prop46 Nybegynder
05. juni 2007 - 12:36 Der er 10 kommentarer og
2 løsninger

Reloade og mouseover

Jeg er igang med at lave en side der hovedsageligt består af billeder. For at det meste af siden kun skal loades én gang har jeg bestemt mig for at bruge <iframe>s. På 'hovedsiden' er en menu der virker via mouseover --> skift billede, og i <iframe>en en undermenu der virker på samme måde.

Siden 'fader' ind med <meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">, og 'undersiderne' fader over i hinanden.

Men det hele hakker jo noget så gudsjammerligt...

Så jeg skal have lavet noget preload, men det kan jeg sørme ikke finde ud af alene :0) Mon ikke der er en derude der kan hjælpe mig?

Min foreløbige html ser sådan ud:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> - Clairvoyant-vejleder - </title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=3.0)">
<style type="text/css">
<!--
html, body {
height:100%;
width:100%;   
margin: 0;
padding: 0;
background-color: #C0C0C0;
overflow-x:auto;
overflow-y:visibel;
scrollbar-face-color: #C0C0C0;
scrollbar-track-color: #C0C0C0;
scrollbar-arrow-color: #4A1F16;
scrollbar-3dlight-color: #4A1F16;
scrollbar-darkshadow-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-shadow-color: #4A1F16;
}
.test1 {
width: 100%;
height: 100px;
background: url(image/venstre_1.jpg) no-repeat top right;
overflow: hidden;
}
.test2 {
width: 100%;
height: 100px;
background: url(image/venstre_2.jpg) no-repeat top right;
overflow: hidden;
}
.test3 {
width: 100%;
height: 100px;
background: url(image/venstre_3.jpg) no-repeat top right;
overflow: hidden;
}
.test4 {
width: 100%;
height: 100px;
background: url(image/venstre_4.jpg) no-repeat top right;
overflow: hidden;
}
.test5 {
width: 100%;
height: 100px;
background: url(image/venstre_5.jpg) no-repeat top right;
overflow: hidden;
}
.test6 {
width: 100%;
height: 100px;
background: url(image/venstre_6.jpg) no-repeat top right;
overflow: hidden;
}
.test7 {
width: 100%;
height: 100px;
background: url(image/venstre_7.jpg) no-repeat top right;
overflow: hidden;
}
-->
</style>
</head>

<body>
<table style="width:100%; height:100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:100%; height:100%;" align="left" valign="middle">
<table style="width:100%; height:700px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:100%; height:100px" align="right" valign="middle"><div class="test1">&nbsp;</div></td>
</tr>
<tr>
<td style="width:100%; height:100px" align="right" valign="middle"><div class="test2">&nbsp;</div></td>
</tr>
<tr>
<td style="width:100%; height:100px" align="right" valign="middle"><div class="test3">&nbsp;</div></td>
</tr>
<tr>
<td style="width:100%; height:100px" align="right" valign="middle"><div class="test4">&nbsp;</div></td>
</tr>
<tr>
<td style="width:100%; height:100px" align="right" valign="middle"><div class="test5">&nbsp;</div></td>
</tr>
<tr>
<td style="width:100%; height:100px" align="right" valign="middle"><div class="test6">&nbsp;</div></td>
</tr>
<tr>
<td style="width:100%; height:100px" align="right" valign="middle"><div class="test7">&nbsp;</div></td>
</tr>
</table>
</td>
<td style="width:720px; height:100%;" align="right" valign="middle">
<table style="width:720px; height:700px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:720px; height:100px" align="right" valign="top">
<table style="width:720px; height:100px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:360px; height:100px" align="right" valign="top"><img src="image/top_venstre.jpg"></td>
<td style="width:360px; height:100px" align="right" valign="top"><img src="image/top_hoejre.jpg"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:720px; height:70px" align="right" valign="top">
<table style="width:720px; height:70px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:120px; height:70px" align="right" valign="top"><a href="forside.html" target="main"><img src="image/menu_forside.jpg" onmouseover="this.src='image/linked_forside.jpg'" onmouseout="this.src='image/menu_forside.jpg'" border="0"></a></td>
<td style="width:60px; height:70px" align="right" valign="top"><a href="profil.html" target="main"><img src="image/menu_profil.jpg" onmouseover="this.src='image/linked_profil.jpg'" onmouseout="this.src='image/menu_profil.jpg'" border="0"></a></td>
<td style="width:115px; height:70px" align="right" valign="top"><a href="clairvoyance.html" target="main"><img src="image/menu_clairvoyance.jpg" onmouseover="this.src='image/linked_clairvoyance.jpg'" onmouseout="this.src='image/menu_clairvoyance.jpg'" border="0"></a></td>
<td style="width:70px; height:70px" align="right" valign="top"><a href="priser.html" target="main"><img src="image/menu_priser.jpg" onmouseover="this.src='image/linked_priser.jpg'" onmouseout="this.src='image/menu_priser.jpg'" border="0"></a></td>
<td style="width:50px; height:70px" align="right" valign="top"><a href="etik.html" target="main"><img src="image/menu_etik.jpg" onmouseover="this.src='image/linked_etik.jpg'" onmouseout="this.src='image/menu_etik.jpg'" border="0"></a></td>
<td style="width:160px; height:70px" align="right" valign="top"><a href="spiritsem.html" target="main"><img src="image/menu_spiritsem.jpg" onmouseover="this.src='image/linked_spiritsem.jpg'" onmouseout="this.src='image/menu_spiritsem.jpg'" border="0"></a></td>
<td style="width:80px; height:70px" align="right" valign="top"><a href="kontakt.html" target="main"><img src="image/menu_kontakt.jpg" onmouseover="this.src='image/linked_kontakt.jpg'" onmouseout="this.src='image/menu_kontakt.jpg'" border="0"></a></td>
<td style="width:65px; height:70px" align="right" valign="top"><a href="andet.html" target="main"><img src="image/menu_andet.jpg" onmouseover="this.src='image/linked_andet.jpg'" onmouseout="this.src='image/menu_andet.jpg'" border="0"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:720px; height:395px" align="right" valign="middle">
<iframe src="forside.html" name="main" width="720px" height="395px" frameborder="0"></iframe>
</td>
</tr>
<tr>
<td style="width:720px; height:135px" align="right" valign="top">
<table style="width:720px; height:135px" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="width:360px; height:135px" align="right" valign="top"><img src="image/bund_venstre.jpg"></td>
<td style="width:360px; height:135px" align="right" valign="top"><img src="image/bund_hoejre.jpg"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Avatar billede jokkejensen Novice
05. juni 2007 - 14:53 #1
Hvis du vil preloade billeder, smider du bare en reference til dem i et skjult lag.

ala

<body>
<div style="display:none;">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>

.......... resten af din kode..
Avatar billede roenving Novice
06. juni 2007 - 00:25 #2
1. Brug en fuldt kompatibel doctype (ikke den html4.0-ting, der kun var gyldig i 7-8 måneder i 1996 !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

2. Adskil i så høj grad som muligt din markup og din style og brug css efter hensigten, f.eks. er det jo dumt, at du skriver de samme style-tags på lange striber af elementer, det kan en klasse præcis bruges til:

<td class="rightTd"><div id="test1">&nbsp;</div></td>
</tr>
<tr>
<td class="rightTd"><div id="test2">&nbsp;</div></td>
</tr>
<tr>
<td class="rightTd"><div id="test3">&nbsp;</div></td>
</tr>
<tr>
<td class="rightTd"><div id="test4">&nbsp;</div></td>

-- med css sådan:

.rightTd{width:100%;text-align:right;}
.rightTd div{width: 100%; height: 100px; background:no-repeat top right;overflow: hidden;}
#test1{background-image:url(image/venstre_1.jpg);}
#test2{background-image:url(image/venstre_2.jpg);}
#test3{background-image:url(image/venstre_3.jpg);}
#test4{background-image:url(image/venstre_4.jpg);}

-- og som det fremgår af ovenstående har klasser og id forskellige muligheder, dem skal du nok lige eftersøge lidt mere ...

3. preload kan laves som jokkejensen viser det, men ren javascript-preload kan man også bruge, men uanset hvad, vil browseren oftest lige kigge efter, om der skulle være kommet en ny udgave af billedet, men hvis billederne bare er lidt store, vil en preload gøre stor gavn ...

-- hvilket leder mig frem til
4. Er du sikker på, at dine billeder overhovedet er egnet til at bruge på indernettet ?-)
Ofte ses det, at man 'bare' har nogle pæne billeder, men at der ikke er skænket en tanke på, om de er hensigtsmæssige at bruge på en side, et billede, der fylder over 30kb skal have ekstrem meget relevans, hvis det skal bruges ...
Skrækscenariet har jeg fra en en af mine venners togtossede søn, som havde 12 billeder på sin forside, hvoraf de 8 hver fyldte 8Mb, selv på vores 10Mbit-forbindelse (direkte til serveren !-) tog det oftest 30-40 sekunder at åbne siden, prøv at regne på det, såvidt jeg husker kom jeg frem til knap 32 timer for at hente siden fulstændig, hvis det var en gammeldags 33.6-modem-forbindelse ...

-- og der er mere, men ikke lige nu !o]
Avatar billede prop46 Nybegynder
14. juni 2007 - 14:54 #3
ja så gik der jo lige rigtig lang tid inden jeg kom ind på det her spørgsmål igen.

--> roenving
Det er tale om en masse små 1kb billeder som bruges i mouseover i menuen, plus ca 12. større billeder, hvor det største er 25 kb, som er en del af layoutet.

Det jeg bare gerne vil undgår er, at siden (som fader ind efter ønske fra bestilleren) ikke er loadet inden brug. Billederne 'forandrer' sig ikke over tid...

Skal nok få rettet min doctype :0)
Avatar billede roenving Novice
15. juni 2007 - 14:26 #4
... ikke er loadet inden brug ?-)
Avatar billede prop46 Nybegynder
17. juni 2007 - 21:27 #5
Ja... det der SKULLE stå var... at jeg gerne vil have billederne loadet så de er klar til brug når de skal være det :0)

Jeg leger med en blank index-side, hvor billederne hentes ind i en 'usynlig' <div>, som jokkejensen forslår. Jeg synes at have læst et sted, at hvis jeg
<?php redirecter og IKKE skriver exit ?> så vil siden loades i browseren inden redirectet finder sted. Derved tænker jeg, at jeg kan sende folk til den blanke index-side, og når billederne så er hentet sende dem videre til den egentlige start-side....

Men det virker ikke :0( Idag er mit net utroligt langsomt, og billederne er ikke klar...
Avatar billede roenving Novice
17. juni 2007 - 23:33 #6
Det lyder mærkeligt, at noget, der sker på serveren, skulle have indflydelse på browserens måde at agere, men da alle browsere pr. default cacher i et vist omfang, kan det da godt være, at den tomme side kan hjælpe brugere på langsomme forbindelser ...
Avatar billede prop46 Nybegynder
20. juni 2007 - 15:14 #7
Kan I ikke begge to smide nogle svar? jokkejens for at give mig et bud på preload, og roenving for at lære mig tingene ordentligt :0)

Tak !!
Avatar billede roenving Novice
20. juni 2007 - 15:18 #8
Velbekomme '-)
Avatar billede jokkejensen Novice
21. juni 2007 - 16:13 #9
selv tak !
Avatar billede jokkejensen Novice
21. juni 2007 - 16:13 #10
og et svar
Avatar billede jokkejensen Novice
21. juni 2007 - 16:13 #11
grrr
Avatar billede roenving Novice
22. juni 2007 - 15:47 #12
Tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 20:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
18/0720:34 Tidsbestemt Gendannelse - ny funktion i Windows Af Uvanga i Windows
White papers
Flere white papers »