Søg
Avatar billede bongii Nybegynder
13. august 2009 - 11:35 Der er 20 kommentarer og
1 løsning

onclick this.src

Hej.

Jeg kan godt få nedenstående script til at virke hvis jeg laver this.src direkte på onclick på billedet, men det virker ikke hvis jeg placere det i en funktion. Hvad gør jeg forkert?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>Untitled</title>   
</head>
<body>
<script type="text/javascript">
loader66 = new Image(66,66);
loader66.src = "loader.gif"

function load()
{
    this.src= 'loader.gif';
}
</script>

<img onclick="load()" src="nil.gif">



</body>
</html>
Avatar billede keysersoze Ekspert
13. august 2009 - 11:40 #1
din function aner ikke hvad this er i forhold til dit img - så enten skal du føre this med;

function load(var)
{
  var.src = 'loader.gif';
}

load(this);

eller også skal du referere direkte til dit element i funktionen;

function load(var)
{
  document.getElementById('something').src = 'loader.gif';
}

<img id="something">
Avatar billede bongii Nybegynder
13. august 2009 - 12:19 #2
Problemet er, at der er mange billeder funktionen skal kaldes på, så jeg vil være ked at at skulle give alle billeder et unikt ID-nummer.

Hvis jeg nu satser på løsning 1, hvordan kalder jeg så funktionen:

Mit script ser således ud:

<script type="text/javascript">
    function load(var)
    {
      var.src = 'loader.gif';
    }
    load(this);
</script>

<a href="#"><img onclick="load(this)" src="nil.png"></a>
<a href="#"><img onclick="load()" src="nil.png"></a>


... og det virker ikke.
Avatar billede olebole Juniormester
13. august 2009 - 12:28 #3
<ole>

Hvad er det, som ikke fungerer ved den kode?

/mvh
</bole>
Avatar billede olebole Juniormester
13. august 2009 - 12:29 #4
Nu er navnene load og var nok ikke særligt velvalgte, men det burde fungere alligevel  =)
Avatar billede olebole Juniormester
13. august 2009 - 12:34 #5
Denne kode fungerer i hvertfald fint:

<script type="text/javascript">
function swap(oImg) {
    oImg.src = "http://www.eksperten.dk/avatar?267";
}
</script>

<img src="http://www.eksperten.dk/avatar?403" onclick="swap(this)" alt="">

- omend den ikke er særlig køn og i stedet nok burde skrives som:

<script type="text/javascript">
function swap(oImg) {
    oImg.setAttribute("src", "http://www.eksperten.dk/avatar?267");
}
</script>

<img src="http://www.eksperten.dk/avatar?403" onclick="swap(this)" alt="">
Avatar billede bongii Nybegynder
13. august 2009 - 13:01 #6
ahh Perfekt.

Det var fordi jeg havde bruget ' i stedet for " i funktionen.

Nu virker det.

Det kræver jo en eller anden preload funktion.

Er det fint nok sætte nedenstående ind i toppen af scriptet:
loader = new Image(66,66);
loader.src="loader.gif"

Selvom der er brugt andre navne i funktionen
Avatar billede bongii Nybegynder
13. august 2009 - 13:36 #7
Jeg fandt ud af det :)

SwapImg = new Image();
SwapImg.src="loader.gif"
function swap(img)
{
img.setAttribute("src", SwapImg.src);
}

Smider i et svar?
Avatar billede bongii Nybegynder
13. august 2009 - 13:44 #8
Når brugeren klikker på et billede-link, skifter billedet til et loader billede og brugeren sendes videre.
Hvis brugeren klikker tilbage i browseren, står loaderen stadig og kører.

Er der en måde at undgå dette på?
Avatar billede olebole Juniormester
13. august 2009 - 15:06 #9
Du kan også sagtens skrive:

SwapImg = new Image();
SwapImg.src="loader.gif"
function swap(img)
{
img.setAttribute("src", "loader.gif");
}

Det bliver det ligeså godt preloaded af.

Nu ved jeg ikke, hvordan det bruges, men måske du kan skifte billedet ved onload på siden - hvilket dog næppe er en god løsning. Back-knappen bringer brugeren tilbage til forrige side i den tilstand, den blev forladt, så umiddelbart fungerer tingene, som de skal  =)
Avatar billede bongii Nybegynder
13. august 2009 - 15:15 #10
Perfekt tak for hjælpen.
Avatar billede olebole Juniormester
13. august 2009 - 22:28 #11
Selvtak - og tak for points  =)
Avatar billede bongii Nybegynder
18. august 2009 - 09:32 #12
Har lige rodet lidt videre med det.

Det virker ikke i IE, animationen kører ikke. Kan du se hvad der er galt? Det virker i alle andre browsere. typisk.

http://www.movievizion.dk/upload/test.html
Avatar billede olebole Juniormester
18. august 2009 - 14:11 #13
Prøv:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Description" content="">
    <meta name="Keywords" content="">
    <title>Swap test</title>   
   
    <script type="text/javascript">
    //Swap image
    SwapImg = new Image();
    SwapImg.src="loader.gif"
    function swap(img, loc)
    {
        img.setAttribute("src", SwapImg.src);
        img.style.border = "3px solid #fff";
        setTimeout(function(){location.href=loc}, 10);
    }
    </script>
   
    <style type="text/css">
    img.border                         {border:3px solid #fff}
    a:hover img.border                 {border:3px solid #FEBB08}
    </style>
</head>
<body>

<div style="width: 160px"><img src="nilan.png" onclick="swap(this, 'http://www.yahoo.com')" class="border"></div>

</body>
</html>

- og vedr. XHTML:
    http://dengodekode.dk/xhtml
Avatar billede olebole Juniormester
18. august 2009 - 14:13 #14
Eller måske:

<div style="width: 160px"><img src="nilan.png" onclick="swap(this, 'http://www.yahoo.com')" class="border" onmouseover="this.style.borderColor='#FEBB08'" onmouseout="this.style.borderColor='#fff'"></div>
Avatar billede bongii Nybegynder
19. august 2009 - 10:06 #15
De 2 nye forslag fungere ikke, hverken i FF eller IE. Hvor irriterende at IE altid skal give problemer.
Avatar billede olebole Juniormester
19. august 2009 - 11:04 #16
Jeg tror hverken det er IE eller FF, som klodser  =)

Prøv lige at lægge et link til et lille forsøg
Avatar billede bongii Nybegynder
19. august 2009 - 11:48 #17
www.movievizion.dk/upload/testny.html

Loaderen kører ikke i FF eller IE

Det mest optimale vil være at få www.movievizion.dk/upload/test.html til at virke, det er ikke så godt at lave javascript links mht. google.
Avatar billede olebole Juniormester
19. august 2009 - 12:59 #18
Hvis du sætter timeout'en op til mellem 500 og 1000 msek, kan du se, hvad der sker. I det øjeblik, sideskiftet påbegyndes, stopper animationen - hvilket egentlig er helt naturligt, da man jo i dét øjeblik forlader adresserummet, den ligger i.

Sådan virker tingene, og det har du ikke rigtig mulighed for at komme udenom  :o|
Avatar billede olebole Juniormester
19. august 2009 - 13:07 #19
- men både IE og FF har jo deres egen loader animation, der viser, browseren er i gang med at loade en side. Derfor er der ikke brug for en animation ved alm. sideskift.

Det er der derimod ved Ajax og andre asynkrone kald, hvor browserens sideskifts animation ikke kører. Derfor er du blevet vandt til at se en loader animation i mange moderne appliaktioner - men det er misforstået overkill at bruge metoden ved alm. sideskift  ;o)
Avatar billede bongii Nybegynder
20. august 2009 - 11:21 #20
Hmm det er bare underligt at det virker i alle browsere undtagen IE.

Har prøvet alt muligt underligt, men samme problem hver gang. FF viser fint animationen, mens IE er ligeglad med animationen.

Hvis jeg fjerner <a href="">, kører animationen fint i IE, det er kun når der kommer et link med.

Jeg tror ikke der er en måde at undgå dette på desværre.
Avatar billede olebole Juniormester
20. august 2009 - 16:14 #21
Det er et oldgammelt problem, at gif-animationer stopper, når der klikkes på et link. Sådan har det været siden version 4 - og vist endda også i IE3.

Hvad sker der med:
    <a href="en_side.html" onclick="location.href=this.href;return false">LINK</a>

- mon ikke det burde virke bedre?
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 JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Validering af filnavn i formular Af Strawberry i JavaScript 6 14/04/202610:11 I går 22:15
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
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
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 går 19:43 Installation af Adobe Photoshop Elements 2019 Af mort1 i Billedbehandling
17/0418:29 Gendanne slettet partition overskrevet med Windows 11 Af Strawberry i Windows
17/0416:11 Samle data fra flere kolonner i 1 Af FinnLauridsen i Excel
17/0414:44 ny fjernbetjening til DVD afspiller fra 2004 Af Nette i Andet hardware
17/0412:36 Manglende kode Af Bent i Windows
White papers
Flere white papers »