amiga-news ENGLISH VERSION
.
Links| Forum| Kommentare| News melden
.
Chat| Umfragen| Newsticker| Archiv
.

amiga-news.de Forum > Programmierung > HTML Grafiken vorladen [ - Suche - Neue Beiträge - Registrieren - Login - ]

-1- [ - Beitrag schreiben - ]

23.11.2005, 15:52 Uhr

rbn
Posts: 2001
Nutzer 		Gegeben ist eine Reihe von Grafiken, die als Links dienen, die sich verändern, wenn man mit der Maus darüber fährt.

Wie kann man diese zweite Grafik schon laden, bevor man mit der Maus darüber fährt? Hatte das mal in einer Seite integriert, aber weiß nicht mehr, wie ich es gemacht habe ... :dance3:

rbn

--
A1200, ElBoxed, BPPC 68060@50/603@210, 96+2 MB, BVision, IDEFix Express, 3 GB Fireball, 80 GB Barracuda, DVD/CD 16x, CD/RW 8x4x32x, 2x Silversurfer, Z/IV, 56k

--

http://www.redbaron.customer.nohn.net


--

<rbn-m?ndl3ss>.

[ - Antworten - Zitieren - Direktlink - ]
23.11.2005, 16:26 Uhr

amilate
Posts: 193
Nutzer 		Schalte mal das File zwischen Startseite und Mainseite.
(vorher nat. Pfade anpassen)

<html>
<head>
<title>Vorlader mit Ladeanzeige</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
h1 { font-size:12pt; color:#000000; font-style:normal; font-family:Verdana,Arial,Helvetica}
h2 { font-size:10pt; color:#101010; font-style:normal; font-family:Verdana,Arial,Helvetica}
a:link { font-size:10pt; color:#101010; font-style:normal; font-family:Verdana,Arial,Helvetica}
a:visited { font-size:10pt; color:#101010; font-style:normal; font-family:Verdana,Arial,Helvetica}
//-->
</style>
</head>

<body background="gfx/erde2.jpg" text="#AC0020">
<table width="98%" height="98%" valign="center" align="center" border="0">
<tr valign="center">
<td valign="center">
<center>
<script language=JavaScript1.2>

<!-- begin hiding



startingColor = new Array() // <-- NICHT VERÄNDERN!

endingColor = new Array() // <-- NICHT VERÄNDERN!



// Hier deine Grafiken rein:

var yourImages = new Array("gfx/h01+.gif","gfx/h02+.gif","gfx/h03+.gif","gfx/h04+.gi f","gfx/h05+.gif","gfx/h06+.gif","gfx/h07+.gif","gfx/h08+.gif ","gfx/h09+.gif","gfx/h10+.gif","gfx/h11+.gif","gfx/neuigkeiten +.gif","gfx/verein+.gif","gfx/baustellen+.gif","gfx/damals+.gif ","gfx/heute+.gif","gfx/angebote+.gif","gfx/galerie+.gif","gfx/ gaestebuch+.gif","gfx/forum+.gif","gfx/impressum+.gif","gfx/link s+.gif","gfx/anfahrt+.gif") // Ersetzen und erweitern durch deine Grafiken

var locationAfterPreload = "index_02.html" // Hier den Pfad zur Seite die nach dem Vorladen geladen werden soll

var preloadbarWidth = 300 // Länge des Balkens

var preloadbarHeight = 13 // Höhe desselbigen

var backgroundOfGradient = "#101010"



// Farbe mir der der Balken beginnt! Gib erste, dritte und fünfte Zahl/Buchstaben der Farbe an

startingColor[0] = "0"

startingColor[1] = "0"

startingColor[2] = "0"



// Wie oben nur die Farbe mit dem es endet

endingColor[0] = "F"

endingColor[1] = "F"

endingColor[2] = "F"


var gap = 7 // mind. 2! verändern, wenn es nen JS-Error gibt.





// NIX MEHR VERÄNDERN



if (!document.all) location.replace(locationAfterPreload)

var a = 10, b = 11, c = 12, d = 13, e = 14, f=15, i, j, ones = new Array(), sixteens = new Array(), diff = new Array();

var convert = new Array("0","1","2","3","4","5","6","7","8","9","a ","b","c","d","e","f"), imgLen = yourImages.length;

var loaded = new Array(), preImages = new Array(), currCount = 0, pending = 0, h = 0, hilite = new Array(), cover = new Array();

var num = Math.floor(preloadbarWidth/gap);

for (i = 0; i < 3; i++) {

startingColor[i] = startingColor[i].toLowerCase();

endingColor[i] = endingColor[i].toLowerCase();

startingColor[i] = eval(startingColor[i]);

endingColor[i] = eval(endingColor[i]);

diff[i] = (endingColor[i]-startingColor[i])/num;

ones[i] = Math.floor(diff[i]);

sixteens[i] = Math.round((diff[i] - ones[i])*15);

}

endingColor[0] = 0;

endingColor[1] = 0;

endingColor[2] = 0;

i = 0, j = 0;

while (i <= num) {

hilite[i] = "#";

while (j < 3) {

hilite[i] += convert[startingColor[j]];

hilite[i] += convert[endingColor[j]];

startingColor[j] += ones[j];

endingColor[j] += sixteens[j];

if (endingColor[j] > 15) {

endingColor[j] -= 15;

startingColor[j]++;

}

j++;

}

j = 0;

i++;

}

function loadImages() {

for (i = 0; i < imgLen; i++) {

preImages[i] = new Image();

preImages[i].src = yourImages[i];

loaded[i] = 0;

cover[i] = Math.floor(num/imgLen)*(i+1)

}

cover[cover.length-1] += num%imgLen

checkLoad();

}

function checkLoad() {

if (pending) { changeto(); return }

if (currCount == imgLen) { location.replace(locationAfterPreload); return }

for (i = 0; i < imgLen; i++) {

if (!loaded[i] && preImages[i].complete) {

loaded[i] = 1; pending++; currCount++;

checkLoad();

return;

}

}

setTimeout("checkLoad()",10);

}

function changeto() {

if (h+1 > cover[currCount-1]) {

var percent = Math.round(100/imgLen)*currCount;

if (percent > 100) while (percent != 100) percent--;

if (currCount == imgLen && percent < 100) percent = 100;

defaultStatus = "Loaded " + currCount + " out of " + imgLen + " images [" + percent + "%].";

pending--;

checkLoad();

return;

}

eval("document.all.cell" + (h+1) + ".style.backgroundColor = hilite[h]");;

h++;

setTimeout("changeto()",1);

}

defaultStatus = "Geladen wurden 0 von " + imgLen + " Bilder [0%]."

// end hiding -->

</script>


<h1>Bilder werden vorgeladen ... 55.630 Byte</h1><br><br>
<script language=JavaScript1.2>

<!-- beging hiding

document.write('<table border="0" cellpadding="0" cellspacing="0" width="' + preloadbarWidth + '"><tr height="' + preloadbarHeight + '" bgcolor="' + backgroundOfGradient + '">');

for (i = 0; i < num; i++) {

document.write('<td width="' + gap + '" id="cell' + (i+1) + '"></td>');

}

document.write('</tr></table>');

document.write('<h2><small><a href="javascript:location.replace(locationAfterPreload)">Ladevorgang Überspringen</a></small></h2></font>')

loadImages();

// end hiding -->

</script>

</td>
</tr>
</table>
</center>

</body>
</html>
--
Krieg ist Frieden
Freiheit ist Sklaverei
Unwissenheit ist Stärke

[ - Antworten - Zitieren - Direktlink - ]
23.11.2005, 16:29 Uhr

amilate
Posts: 193
Nutzer 		oder haust einfach dös hier in den header:
<script type ="text/JavaScript">
<!--
if (document.images){
var pic_anim = new Image();
pic_anim.src = "gfx/anim.gif"
}
//-->
</script>

(Hier ist gfx/anim.gif das vorzuladende Bild)
Das Bild hat dann im document den namen "anim"

amilate
--
Krieg ist Frieden
Freiheit ist Sklaverei
Unwissenheit ist Stärke

[ - Antworten - Zitieren - Direktlink - ]
23.11.2005, 17:06 Uhr

rbn
Posts: 2001
Nutzer 		Danke Jungs (und Mädels? ...) werds mal ausprobieren.

Hatte glaube ich damals eher die untere Variante, aber das Beispiel oben ist natürlich sehr interessant für andere Sachen!

rbn

--
A1200, ElBoxed, BPPC 68060@50/603@210, 96+2 MB, BVision, IDEFix Express, 3 GB Fireball, 80 GB Barracuda, DVD/CD 16x, CD/RW 8x4x32x, 2x Silversurfer, Z/IV, 56k

--

http://www.redbaron.customer.nohn.net


--

<rbn-m?ndl3ss>.

[ - Antworten - Zitieren - Direktlink - ]
23.11.2005, 19:12 Uhr

Cego
Posts: 1560
Nutzer 		Wow, leider hab ichs nicht drauf mit javascript, obwohl mir HTML selbst richtig spaß macht :D

@amilate
irgendwie erinnert mich deine signatur an 1984 :rolleyes:
--
Mein System:

Amiga1200 im Elbox Power Tower
BPPC 603@175MHz 040@25MHz
Grex1200 PCI
FastATA Powerflyer
Voodoo 3 3000 PCI
Delfina Clockport
DVD LW, CD-RW LW
40GB Maxtor HD
OS3.9 und MorphOS 1.4.5

[ - Antworten - Zitieren - Direktlink - ]
23.11.2005, 22:58 Uhr

rbn
Posts: 2001
Nutzer 		@amilate:

Wow, habs gerade implementiert, und es funzt super.

Vielen Dank !!! Du hast mir echt verdammt viel Arbeit erspart!!! :rotate:

rbn

--
A1200, ElBoxed, BPPC 68060@50/603@210, 96+2 MB, BVision, IDEFix Express, 3 GB Fireball, 80 GB Barracuda, DVD/CD 16x, CD/RW 8x4x32x, 2x Silversurfer, Z/IV, 56k

--

http://www.redbaron.customer.nohn.net


--

<rbn-m?ndl3ss>.

[ - Antworten - Zitieren - Direktlink - ]
24.11.2005, 00:04 Uhr

amilate
Posts: 193
Nutzer 		Naja, ICH habe Dir die Arbeit auch nicht erspart.
Habe das script auch nur im Netz gefunden und eingebaut.
Aber so verteilt man's halt weiter.
Wer Lust und Interesse hat;
meine Lieblingsseite der von mir gebauten:
http://www.conquest-ev.de


Kleiner Tip:
klickt auf Bjelawa, scrollt im Text ein bissel nach unten, dort auf die Karte klicken und nach dem Fertigladen führt mal die Maus über selbige.

Geil, oder...?

@Cego:
Der große Bruder sieht Dich!
--
Krieg ist Frieden
Freiheit ist Sklaverei
Unwissenheit ist Stärke

[ - Antworten - Zitieren - Direktlink - ]

-1- [ - Beitrag schreiben - ]


amiga-news.de Forum > Programmierung > HTML Grafiken vorladen [ - Suche - Neue Beiträge - Registrieren - Login - ]


.
Impressum | Datenschutzerklärung | Netiquette | Werbung | Kontakt
Copyright © 1998-2024 by amiga-news.de - alle Rechte vorbehalten.
.