Søg
Avatar billede jakobdo Ekspert
23. oktober 2003 - 10:12 Der er 12 kommentarer og
1 løsning

Javascript Rollover.

Hej,
jeg kunne godt tænke mig noget kode som kan følgende:

Et billede... (WOW)
Når jeg holder musen over, skal det opføre sig som et anim-gif. (men det skal laves i javascript)
Når musen flyttes, skal den kører sekvensen baglæns til billedet som var udgangspunkt...

Kan i følge mig?
Avatar billede jakobdo Ekspert
23. oktober 2003 - 10:16 #1
Min animation skal f.eks. være følgende:
Billede0 = "        " (billedet som loades til start og vises på siden)
Billede1 = ".        "
Billede2 = " .      "
Billede3 = "  .      "
Billede4 = "  .    "
Billede5 = "    .    "
Billede6 = "    .  "
Billede7 = "      .  "
Billede8 = "      . "
Billede9 = "        ."

Jeg holder musen over, og den ændrer billede0 til 1, 2, 3, 4, 5...
Musen fjernes, den skifter til 4, 3, 2.
Mus over igen, 3, 4, 5, 6, 7.
Mus fjernes 6, 5, 4, 3, 2, 1, 0...

Med fjernes og over, mener jeg onMouseOver og onMouseOut.
Avatar billede kinderaeg Nybegynder
23. oktober 2003 - 11:26 #2
var down = 0;
var up = 0;
var pos = 0;
var pics = new Array("1.jpg", "2.jpg"..."n.jpg");

function drawUp() {
  pos++;
  document.getElementById('Billedet').src = pics[pos];
  if(up<pics.length&&up==1) {
    drawUp();
  } else {
    up = 0;
  }
}

function drawDn() {
  pos++;
  document.getElementById('Billedet').src = pics[pos];
  if(down>0.length&&down==1) {
    drawUp();
  } else {
    down = 0;
  }
}

function dUp() {
  up = 1;
  down = 0;
  drawUp();
}

function dDn() {
  down = 1;
  up = 0;
  drawDn();
}

Det burde kunne klare det. Så skal du kalde funktionerne dUp og dDn fra mouseover og mouseout og i øvrigt kalde det billede (dets id) det samme som du søger på i getelementbyid. I dette tilfælde 'Billedet'.

/Migselv
Avatar billede jakobdo Ekspert
23. oktober 2003 - 11:51 #3
Jeg har nu lagt din kode ind, og lavet følgende i body:

<body>

<img name="Billedet" id="Billedet" onMouseOver="dDn();" onMouseOut="dUp();" src="head.gif">

</body>

Men jeg får fejlen:
Line: 64
Char: 1
Error: Object Expected
Code: 0
URL: http://www.damgaard-olsen.dk/test/test.html

Hvorfor vil den nu have et object?
Avatar billede kinderaeg Nybegynder
23. oktober 2003 - 13:07 #4
Jeg kan se at du har glemt at rette det ene 'billedet' til 'head1', og så er der sneget sig et par copy&paste fejl ind. If-sætningen i drawDn() skal se ud som følger:

if(down>0&&down==1) {

i stedet for

if(down>0.length&&down==1) {

Yderligere skal funktionskaldet rettes til drawDn(); i funktionen drawDn() og pos++; skal rettes til pos--;

Men det er sådan set ikke her dit problem er. Du laver nogle kald til et par alert, med er ved et uheld kommet til at sætte et kolon (:) i stedet for et semikolon (;) efter den ene alert. Ret det, og det skulle gerne køre :)

/Migselv
Avatar billede jakobdo Ekspert
23. oktober 2003 - 13:21 #5
Det med : til ; hjalp en del... :o)

Tilgengæld får jeg nu en ny fejl...
http://www.damgaard-olsen.dk/test/test.html

Ser ud til at være noget overrun eller andet skidt! :o(
Avatar billede kinderaeg Nybegynder
23. oktober 2003 - 14:03 #6
Up og down vender forkert, i forhold til den måde du bruger dem. Down er til onMouseOver og omvendt.
Når du sætter værdier ind i array'et, skal du ikke bruge .src

Det kan godt være du skal sætte et timeout ind, hvis du vil nå at se billederne skifter, ellers går det nok lige stærkt nok ;)

setTimeout(funktionskald, delay i millisekunder)
Avatar billede jakobdo Ekspert
23. oktober 2003 - 14:33 #7
Hele koden er nu sådan, og fejlen fåes stadig:

<HTML>
<HEAD>
<TITLE>JAKOB</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

var down = 0;
var up = 0;
var pos = 0;
var pics = new Array("head_1.gif", "head_2.gif", "head_3.gif", "head_4.gif", "head_5.gif", "head_6.gif", "head_7.gif");

function drawUp()
{
  pos++;
  document.getElementById('head1').src = pics[pos];
  if ( up < pics.length && up == 1)
  {
    setTimeout(drawUp(), 100);
  }
  else
  {
    up = 0;
  }
}

function drawDn()
{
  pos--;
 
  document.getElementById('head1').src = pics[pos];
  if ( down > 0 && down == 1)
  {
    setTimeout(drawDn(), 100);
  }
  else
  {
    down = 0;
  }
}

function dUp()
{
  up = 1;
  down = 0;
  drawUp();
}

function dDn()
{
  down = 1;
  up = 0;
  drawDn();
}

</SCRIPT>
</HEAD>
<BODY>
<a href="http://www.damgaard-olsen.dk"
  onMouseover="dUp()"
  onMouseout="dDn()"><img src="head_1.gif" name="head1" border=0></a>
</BODY>
</HTML>
Avatar billede jakobdo Ekspert
23. oktober 2003 - 14:34 #8
Fejlen kommer i linie 14 og 29...
Det er disse linier:

document.getElementById('head1').src = pics[pos];
og
document.getElementById('head1').src = pics[pos];
Avatar billede kinderaeg Nybegynder
23. oktober 2003 - 14:38 #9
Lav array'et således, så får jeg i hvert fald ingen fejl:

var pics = new Array(7);
pics[0] = "head_1.gif";
pics[1] = "head_2.gif";
pics[2] = "head_3.gif";
pics[3] = "head_4.gif";
pics[4] = "head_5.gif";
pics[5] = "head_6.gif";
pics[6] = "head_7.gif";
Avatar billede jakobdo Ekspert
23. oktober 2003 - 15:11 #10
Jeg kører Internet Explorer 6...
Her er koden som du siger:

http://www.damgaard-olsen.dk/test/test2.html

Og det virker ikke efter hensigten! .o(
Jeg får fejlen: Out Of Memory At Line BLABLA...
Avatar billede kinderaeg Nybegynder
23. oktober 2003 - 15:25 #11
Gider ikke lige til at lede efter fejlen. Den her virker i hvert fald.

<HTML>
<HEAD>
<TITLE>JAKOB</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var down = 0;
var up = 0;
var pos = 0;
var pics = new Array(7);
pics[0] = "head_1.gif";
pics[1] = "head_2.gif";
pics[2] = "head_3.gif";
pics[3] = "head_4.gif";
pics[4] = "head_5.gif";
pics[5] = "head_6.gif";
pics[6] = "head_7.gif";

function drawUp()
{
  document.getElementById('head1').src = pics[pos];
  if ( pos < (pics.length-1) && up == 1)
  {
      pos++;
    setTimeout('drawUp()', 100);
  }
  else
  {
    up = 0;
  }
}

function drawDn()
{
  document.getElementById('head1').src = pics[pos];
  if ( pos > 0 && down == 1)
  {
  pos--;
    setTimeout('drawDn()', 100);
  }
  else
  {
    down = 0;
  }
}

function dUp()
{
  up = 1;
  down = 0;
  drawUp();
}

function dDn()
{
  down = 1;
  up = 0;
  drawDn();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<a href="zero.shtml" onMouseover="dUp()" onMouseout="dDn()"><img src="head_1.gif" name="head1" id="head1" border=0></a>
</BODY>
</HTML>
Avatar billede jakobdo Ekspert
23. oktober 2003 - 15:32 #12
Tak Kinder... Det virker nu... :o( Men hvorfor ved jeg ikke... sammenligner lige kode!

Pos++ og Pos-- står forskellige steder...
Men takker for hjælpen! (ved godt jeg er en pain in the ass... )
Avatar billede kinderaeg Nybegynder
23. oktober 2003 - 15:58 #13
Det kunne sagtens ha' været værre. Jeg har haft koden til at virke et stykke tid, synes bare du skulle ha' lov at kigge lidt på det, i stedet for at få stukket løsningen i hånden. Det er jo for nemt, og man lærer ikke noget af det ;)
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
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.

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 21:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
I går 20:06 email adresse Af Malm i Forslag til ændringer
I går 19:54 problem med google crome Af Malm i Andet software
I går 09:36 Alternativ holder til to skærme... Af Don G i Skærme
20/0815:01 Samsung smart TV Af postpeter@outlook.dk i Fri debat
White papers
Flere white papers »