Notifikationer

Markér alle som læst Log ud

loopstudio Nybegynder

19. august 2003 - 19:17 Der er 29 kommentarer og
1 løsning

skift af image ved onMouseOver

Jeg ønsker at kunne preloade nogle billeder til en liste hvor når musen holdes over et TR element i en tabel, så skifter backgroundimage på rækken til et nyt og på onMouseOut skal det skifte tilbage igen!

Jeg HAR i forvejen lavet kode som skifter billederne ud OG som virker, MEN efter installation af Internet Explorer 6.0 så bliver alle billederne sorte når musen føres hen over!! Det er som om at det selvsamme billede genloades hele tiden. Jeg tolker det som en fejl i IE6, da det aldrig har været et problem i andre udgaver af IE.

Men så tænkte jeg at lave en preload af de 2 billeder jeg skifter imellem for at se om det kan løse problemet!

Jeg har nu følgende kode, men kan dog ikke få det til at skifte billede! Kan nogle hjælpe?

----kode start -----

<HTML>

<HEAD>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="JavaScript">
var cache = new Array();
cache[0] = "";
cache[1] = "";

function loadToCache(img) {
cache[cache.length-1] = new Image();
cache[cache.length-1].src = img;
}

function loadImages() {
loadToCache("billede1.gif");
loadToCache("billede2.gif");
// osv.
}
</script>
</HEAD>

<body onload="loadImages();">

<TABLE>
<TR onmouseover="this.style.backgroundImage.src=cache[0].src" onmouseout="this.style.backgroundImage.src=cache[1].src">
<TD>test</TD>
</TR>
</TABLE>

</BODY>

</HTML>

----kode slut -----

Synes godt om

mm12010 Nybegynder

19. august 2003 - 19:32 #1

prøv at fjerne disse 2 linier:

cache[0] = "";
cache[1] = "";

Synes godt om

mm12010 Nybegynder

19. august 2003 - 19:33 #2

sorry kun:

cache[1] = "";

Synes godt om

roenving Novice

19. august 2003 - 19:34 #3

Funktionen virker nøjagtig ligeså godt med:

<script language="JavaScript">
var cache = new Array();
cache[0] = new Image();
cache[0].src = "billede1.gif";
cache[1] = new Image();
cache[1].src = "billede2.gif";
// osv.

</script>

-- og ihvertfald _kan_ du få fejl på denne konstruktion, da længden på variablen måske er forskellig fra den første kommando til den næste:

cache[cache.length-1] = new Image();
cache[cache.length-1].src = img;

Synes godt om

roenving Novice

19. august 2003 - 19:37 #4

Meneh ...

Jeg har haft fat i en del tilfælde på det sidste, hvor netop preloader-funktionen ikke har givet det ønskede resultat, når jeg selv testede lokalt, hvor indstillingen er, at der skal hentes hver eneste gang ...

Mærkværdigvis fungerer det ganske udmærket, hvis man navigerer videre og så bruger tilbage-knappen -- og så begynder det at blive ret underligt -- og indtil nu uden en forklaring !-)

Synes godt om

loopstudio Nybegynder

19. august 2003 - 19:40 #5

mm12010: Det virker ikke, så siger den: Fejl: 'cache.1.src' er null eller ikke et objekt.

Synes godt om

loopstudio Nybegynder

19. august 2003 - 19:45 #6

roenving:
Følgende kode virker heller ikke, ingenting sker!!

<HTML>

<HEAD>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="JavaScript">
var cache = new Array();
cache[0] = new Image();
cache[0].src = "billede1.gif";
cache[1] = new Image();
cache[1].src = "billede2.gif";

</script>
</HEAD>

<body>

<TABLE>
<TR onmouseover="this.style.backgroundImage.src=cache[0].src" onmouseout="this.style.backgroundImage.src=cache[1].src">
<TD>test</TD>
</TR>
</TABLE>

</BODY>

</HTML>

Jeg kan dog oplyse at jeg HAR browseren sat til ALTID at hente nyt indhold og det er meget vigtigt at netop dette program viser nyt indhold hver gang!
Pt. har jeg også testet det lokalt, jeg prøver lige at uploade + prøve tilbage-knap!

Synes godt om

grunken Nybegynder

19. august 2003 - 19:48 #7

prøv lige sådan ;)

<HTML>

<HEAD>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="JavaScript">
var cache = new Array();

function loadToCache(img) {
img = img.split(",")
for (i=0;i<img.length;i++){
cache[i] = new Image();
cache[i].src = "./"+img[i];}
}

function loadImages() {
loadToCache("billede1.gif,billede2.gif");
}
</script>
</HEAD>

<body onload="loadImages();">

<TABLE>
<TR onmouseover="this.style.backgroundImage='url('+cache[0].src+')';" onmouseout="this.style.backgroundImage='url('+cache[1].src+')';">
<TD>test</TD>
</TR>
</TABLE>

</BODY>

</HTML>

Synes godt om

roenving Novice

19. august 2003 - 19:48 #8

Der er ikke noget som hedder src på et style.backgroundImage, der må den _kun_ angives ved style.backgroundImage="url('billede1.gif')"

Synes godt om

grunken Nybegynder

19. august 2003 - 19:49 #9

enighed fremmer forståelsen ;))

Synes godt om

loopstudio Nybegynder

19. august 2003 - 19:55 #10

grunken:
Det ser MEGET bedre ud! I hvertfald i min lokale test, der virker det! ;o)
MEN hvad er det så egentligt der gør at det nu er preloadet??, for umiddelbart så ser det jo ud som om at jeg er tilbage hvor jeg startede med at sætte URL OG .src direkte nede i onMouseOver & onMouseOut. ?

Synes godt om

grunken Nybegynder

19. august 2003 - 19:56 #11

nå, du kunne jo bare have fortalt du ville have en funktion til tingen ;)

preloaderen gør bare at billedet er hentet inden at du begynde at føre musen ind og ud ;) og noget!

Synes godt om

mm12010 Nybegynder

19. august 2003 - 19:57 #12

dette virker fint hos mig:

<HTML>
<HEAD>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="JavaScript">
var cache = new Array();
cache[0] = new Image();
cache[0].src = "gfx/pic1.gif";
cache[1] = new Image();
cache[1].src = "gfx/pic2.gif";
</script>
</HEAD>
<body>
<TABLE>
<TR>
<TD onmouseover="this.style.backgroundImage='url('+cache[0].src+')'" onmouseout="this.style.backgroundImage='url('+cache[1].src+')'">test</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Synes godt om

grunken Nybegynder

19. august 2003 - 20:00 #13

loop har du flere tr's, og er det de samme billeder der skal skiftes eller hvad ?, eller hvor ligger landet ?

Synes godt om

grunken Nybegynder

19. august 2003 - 20:19 #14

måske sådan her du mener ?

<HTML>

<HEAD>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<script language="JavaScript">
function hvalros(img) {

elm = document.getElementsByTagName('tr')
for (i=0;i<elm.length;i++){
if (elm[i].name.indexOf("hest")!=-1){
elm[i].onmouseover = new Function("this.style.backgroundImage='url(./billede1.jpg)';")
elm[i].onmouseout= new Function("this.style.backgroundImage='url(./billede2.jpg)';")
}
}
}

</script>

</HEAD>

<body onload="hvalros();">

<TABLE>
<TR name="hest1">
<TD>test</TD>
</TR>

<TR name="hest2">
<TD>test</TD>
</TR>

</TABLE>
</BODY>
</HTML>

Synes godt om

loopstudio Nybegynder

19. august 2003 - 21:02 #15

Grunken:

JA, jeg véd hvad det er hensigten er med en "preloader", men jeg spurgte om hvad det så egentligt er i koden som gør at billederne NU skulle være preloadet i stedet for først at blive loadede når musen holdes hen over?

Jeg har nu implementeret dit eksempel i den rigtige kode og det så ved første øjekast meget fint ud! ;o) Men så oplevede jeg alligevel at nogle gange når jeg kører musen hurtigt hen over billederne, så bliver de først sorte, for så derefter at blive vist med rigtigt billede. Det var netop dette jeg ville undgå ved at gå over til preloadede billeder..

Synes godt om

grunken Nybegynder

19. august 2003 - 21:19 #16

cache[0] = new Image();
cache[0].src = "gfx/pic1.gif";

de liner sørger for at billedet bliver preloadede ;D, dette giver så en masse yderlige muligheder så man kan checke for billeders eksistens, bredde o.s.v. ;D

<script language="JavaScript" type="text/javascript">
function hvalros(img) {

var cache = new Array();
cache[0] = new Image();
cache[0].src = "billede1.gif";
cache[1] = new Image();
cache[1].src = "billede2.gif";

elm = document.getElementsByTagName('tr')
for (i=0;i<elm.length;i++){
if (elm[i].name.indexOf("hest")!=-1){
elm[i].onmouseover = new Function("this.style.backgroundImage='url(./billede1.gif)';")
elm[i].onmouseout= new Function("this.style.backgroundImage='url(./billede2.gif)';")
}
}
}
</script>

er vist sådan den skal se ud så!

og en anden grund til at billedet lige står og bliver sort i et kort sekund er at billedet måske er lidt tungt? ;)

Synes godt om

roenving Novice

19. august 2003 - 21:23 #17

Du havde da lige byttet lidt rundt, grunken:

<script language="JavaScript" type="text/javascript">

var cache = new Array();
cache[0] = new Image();
cache[0].src = "billede1.gif";
cache[1] = new Image();
cache[1].src = "billede2.gif";

function hvalros() {
elm = document.getElementsByTagName('tr')
... osv ...

-- eller hvad ?-)

Synes godt om

grunken Nybegynder

19. august 2003 - 21:28 #18

Tjah tjoh, i det her tilfælde er det vil lige møj functionen bliver jo kun eksikveret en gang ;)

Men du får ret, og jeg går på værtshus ;D

Synes godt om

grunken Nybegynder

19. august 2003 - 21:28 #19

Tjah tjoh, i det her tilfælde er det vel lige møj functionen bliver jo kun eksikveret en gang ;)

even ;D

Synes godt om

roenving Novice

19. august 2003 - 21:32 #20

http://øl.nu !-)

Synes godt om

loopstudio Nybegynder

20. august 2003 - 22:33 #21

nå, men uanset hvad, så virker koden jo nu. I hvertfald vil jeg lige lade det køre med den nye kode et stykke tid for at se om det virker "bedre" end min gamle kode uden "preloader".
Tak for hjælpen, Grunken får points.. ;o)

PS: Jeg har dog ikke prøvet de sidste eksempler I er kommet med. Er heller ikke helt klar over hvad elm'en & hvalrossen skulle hjælpe til med, meeen øllerne kan vel altid hjælpe på et eller andet.. ;o)

Synes godt om

loopstudio Nybegynder

20. august 2003 - 22:35 #22

Hov, Grunken, du har jo ikke oprettet et "svar", så du kan ikke få nogen point.

Er der i øvrigt nogle der kan forklare mig det point-system!?

Synes godt om

roenving Novice

21. august 2003 - 02:38 #23

http://www.ebruger.dk/faq/#pointsystem

Synes godt om

loopstudio Nybegynder

21. august 2003 - 12:30 #24

roenving: ok, tak for linket mht. pointsystemet.. ;o)

Synes godt om

grunken Nybegynder

21. august 2003 - 12:49 #25

og så smider jeg lige et svar ;o)

Synes godt om

loopstudio Nybegynder

21. august 2003 - 18:30 #26

NÅ, det ser altså desværre ud til at det IKKE har den store betydning! ;o(
<TR>-elementerne bliver stadigvæk sorte indimellem når musen køres hen over, OGSÅ selv om man har været hen over elementerne tidligere og grafikken således BURDE være indlæst og ikke forsvinde igen.
Det virker som om det er en fejl som er indført i IE6.0 og som man desværre ikke kan løse!?

Synes godt om

grunken Nybegynder

21. august 2003 - 19:00 #27

hvis du evt. kaster et link eller noget, så måske at jeg skulle kiggge lidt på det, for det funker altså 10/4 her, osse i IE

Synes godt om

loopstudio Nybegynder

21. august 2003 - 19:15 #28

Har du version 6? For det var ikke et problem tidligere!

Synes godt om

grunken Nybegynder

21. august 2003 - 19:19 #29

jeps 6.0 sp1 o.s.v.

Synes godt om

loopstudio Nybegynder

31. august 2003 - 12:17 #30

Grunken, jeg kan desværre ikke lægge link til koden op, da det endnu ikke er i drift eller offentliggjort, men måske du har en personlig e-mail adr?

Hvilken metode kan man i øvrigt kode sig til for at se om billedet ER loadet ind i memory?

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS