CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede default Nybegynder
05. september 2008 - 20:17 Der er 14 kommentarer og
2 løsninger

Bygge fade ind i dette script

Hejsa jeg har et script er skifter billede og link efter 10 sek. Er der mulighed for at kunne bygge fadein mellem billeder?

<body onLoad="setTimeout('skiftBilleder()',10000)">
<script>
<!--
kategoriEt = new Array()
linkEt = new Array()

kategoriEt[0] = "billede.gif"
kategoriEt[1] = "billede1.gif"
kategoriEt[2] = "billede2.gif"
kategoriEt[3] = "billede3.gif"
kategoriEt[4] = "billede4.gif"
kategoriEt[5] = "billede5.gif"
kategoriEt[6] = "billede6.gif"
kategoriEt[7] = "billede7.gif"
linkEt[0] = "2"
linkEt[1] = "3"
linkEt[2] = "4"
linkEt[3] = "5"
linkEt[4] = "6"
linkEt[5] = "7"
linkEt[6] = "8"
linkEt[7] = "9"

if (document.all) {
brw = document.all
}
else if (document.layers) {
brw = document
}

nr = 0
kat = 1

function skiftBilleder() {
if (nr == 10) {
nr = 0
}
katg = kategoriEt[nr]
linkkat = linkEt[nr]
brw.mitLink1.href = linkkat
document.mitBillede1.src = katg
nr++

setTimeout("skiftBilleder()", 10000)
}
//-->
</script>
<a href="1" name="mitLink1"><img src="billede8.gif" name="mitBillede1" border="0"></a>
Avatar billede w13 Novice
06. september 2008 - 09:56 #1
Noget i denne stil måske:

<body onload="tSlideshow=window.setInterval('skiftBilleder()', 3000)">

<script type="text/javascript">
var aKategori = aLink = [], iNr = 0, tSlideshow=null;

aKategori[0] = "billede.gif";
aKategori[1] = "billede1.gif";
aKategori[2] = "billede2.gif";
aKategori[3] = "billede3.gif";
aKategori[4] = "billede4.gif";
aKategori[5] = "billede5.gif";
aKategori[6] = "billede6.gif";
aKategori[7] = "billede7.gif";
aKategori[8] = "billede8.gif";

aLink[0] = "1";
aLink[1] = "2";
aLink[2] = "3";
aLink[3] = "4";
aLink[4] = "5";
aLink[5] = "6";
aLink[6] = "7";
aLink[7] = "8";
aLink[8] = "9";

function fadeSlideshow(i){
    o = document.getElementById("mitBillede1");
    if(i == 0){
        o.setAttribute("src",document.getElementById("slideshowbehind").getAttribute("src"));
        o.style.opacity = 1;
        o.style.filter = "alpha(opacity=100)";
        return false;
    }

    o.style.opacity = i / 100;
    o.style.filter = "alpha(opacity=" + i + ")";
    window.setTimeout("fadeSlideshow(" + parseInt(i-5) + ")",50);
}

function skiftBilleder(){
    if(iNr == aKategori.length-1)iNr = 0;

    document.getElementById("mitLink1").setAttribute("href", aLink[iNr]);
    document.getElementById("slideshowbehind").setAttribute("src", aKategori[iNr]);

    fadeSlideshow(100);

    iNr++;
}
</script>

<a style="position:relative" id="mitLink1" href="1">
    <img style="position:absolute;top:0;left:0" id="slideshowbehind" src="billede8.jpg" alt="Slideshow" border="0">
    <img style="position:absolute;top:0;left:0" id="mitBillede1" src="billede8.jpg" alt="Slideshow" border="0">
</a>

Jeg har også gjort koden noget mere up-to-date.
Avatar billede w13 Novice
06. september 2008 - 09:57 #2
Du skal lige rette nogle af billedstierne, da jeg har brugt jpg-billeder.
Avatar billede lifeenergy Nybegynder
06. september 2008 - 14:58 #3
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>



<Script language="JavaScript" type="text/javascript">
<!--
var img = new Array(7),links = new Array(7),nr = 0, d = document;

var fadespeed=40;

img[0] = "images/1.jpg"
img[1] = "images/2.jpg"
img[2] = "images/3.jpg"
img[3] = "images/4.jpg"
img[4] = "images/5.jpg"
img[5] = "images/6.jpg"
img[6] = "images/7.jpg"
links[0] ="2"
links[1] = "3"
links[2] = "4"
links[3] = "5"
links[4] = "6"
links[5] = "7"
links[6] = "7"

function fadeimg(f){
  if (!f)opac = 0;
  if (f && opac < 100) {
      opac += 5;
      var ft = setTimeout('fadeimg(true);',fadespeed);
  }
 
if (d.getElementById){
    style = d.getElementById('curImg').style;
    style.filter = 'alpha(opacity:'+opac+')';    // Safari<1.2, Konqueror
    style.KHTMLOpacity = opac / 100;    // Older Mozilla and Firefox
    style.MozOpacity = opac / 100;    // Safari 1.2, newer Firefox and Mozilla, CSS3
    style.opacity = opac / 100;
    }   
}


function skiftBilleder() {
  if(nr == img.length)nr = 0;
  fadeimg(false);
  document.getElementById("imgLink").setAttribute("href", links[nr]);
  document.getElementById("curImg").setAttribute("src", img[nr]);
  fadeimg(true);
  nr++
  setTimeout("skiftBilleder()", 5000)
}
//-->
</script>
<body onload="skiftBilleder();">

<a href="#" id="imgLink"><img src="images/7.jpg" style="filter: alpha(opacity=0);
-moz-opacity: 0;  -khtml-opacity: 0; border: none;"  id="curImg"></a>
</body>
</html>
Det virker i IE og Mozilla, og skulle også virke i Safari. Har ikke testet.
Stierne til billederne og links skal du selv ændre.
Avatar billede w13 Novice
06. september 2008 - 15:05 #4
lifeenergy>> En fornuftig kode, men script-tag'et bør vel lægges i enten body- eller head-sektionen, så det ikke bare "hænger" løst i html-tag'et.
Avatar billede lifeenergy Nybegynder
06. september 2008 - 15:06 #5
Ja det skulle have været inde i <head></head>
Avatar billede lifeenergy Nybegynder
06. september 2008 - 15:24 #6
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<title>slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<Script language="JavaScript" type="text/javascript">
<!--
var img = new Array(7),links = new Array(7),nr = 0, d = document;
// Hvor hurtigt skal den fade
var fadespeed=40;
// step for fade
var step = 5;
// Hvor lang tid skal der gå inden næste billede?
var pause = 5;

// Stierne til billederne
img[0] = "images/1.jpg"
img[1] = "images/2.jpg"
img[2] = "images/3.jpg"
img[3] = "images/4.jpg"
img[4] = "images/5.jpg"
img[5] = "images/6.jpg"
img[6] = "images/7.jpg"
// Stierne til links
links[0] ="test2"
links[1] = "test23"
links[2] = "test34"
links[3] = "test25"
links[4] = "612"
links[5] = "7334"
links[6] = "7434"

function fadeimg(f){
  if (!f)opac = 0; // Nulstil filtre
  if (f && opac < 100) {
      opac += step;
      var ft = setTimeout('fadeimg(true);',fadespeed);
  }
  if (d.getElementById){
    style = d.getElementById('curImg').style; // Filtre til fade
    style.filter = 'alpha(opacity:'+opac+')';    // Safari<1.2, Konqueror
    style.KHTMLOpacity = opac / 100;    // Older Mozilla and Firefox
    style.MozOpacity = opac / 100;    // Safari 1.2, newer Firefox and Mozilla, CSS3
    style.opacity = opac / 100;
    }   
}


function skiftBilleder() {
  if(nr == img.length)nr = 0;
// Nulstil fade
  fadeimg(false);
  // Sæt link og billede -sti
  document.getElementById("imgLink").setAttribute("href", links[nr]);
  document.getElementById("curImg").setAttribute("src", img[nr]);
// Fade ind
  fadeimg(true);
// Forøg nr med en
  nr++
// Kald funktionen igen efter en pause
  setTimeout("skiftBilleder()", pause * 1000)
}
//-->
</script>
</head>
<body onload="skiftBilleder();">

<a href="#" id="imgLink"><img src="images/7.jpg" style="filter: alpha(opacity=0);
-moz-opacity: 0;  -khtml-opacity: 0; border: none;"  id="curImg"></a>
</body>
</html>

Så har jeg skrevet nogle kommentarer til hvad der sker, samt lavet en step variabel, så man kan indstille følsomheden for fade.
Avatar billede default Nybegynder
07. september 2008 - 15:05 #7
Tak, begge scripts virker! Hvem vil have points?
Avatar billede w13 Novice
07. september 2008 - 15:15 #8
Vi kan måske dele så? :)
Avatar billede default Nybegynder
07. september 2008 - 15:31 #9
Hvordan laver jeg så den ikke starter fra første billede hver gang med opdatere? men den startter fra et random billede
Avatar billede w13 Novice
07. september 2008 - 18:15 #10
Det må nok blive et nyt spørgsmål. Det kræver noget omkodning.

Og Lifeenergy du kan få dine point her: http://www.eksperten.dk/spm/844573
Avatar billede lifeenergy Nybegynder
10. september 2008 - 13:32 #11
w13 >> Jeg kan ikke få dit script til at virke helt
Avatar billede lifeenergy Nybegynder
10. september 2008 - 13:38 #12
Jeg fandt fejlen:

Her står der at aKategori er det samme som aLink:
var aKategori = aLink = [], iNr = 0, tSlideshow=null;

Det har jeg ændret til:
var aKategori = [] ,aLink = [], iNr = 0, tSlideshow=null;

Så virker det!
Avatar billede lifeenergy Nybegynder
10. september 2008 - 13:59 #13
w13>> Også fint script.

Der var lige en ting mere jeg har stødt på:

For at den gennemløber alle billeder i et array der indeholder 6 billeder og starter på 0, skal denne linje:

if(iNr == aKategori.length-1)iNr = 0;

ændres til:
if(iNr == aKategori.length)iNr = 0;

Da billederne i array'et går fra 0 -6 er længden af array'et 7, derfor skal "iNr" gå tilbage til 0 når "iNr" er lig med 7, og ikke 6.
Avatar billede lifeenergy Nybegynder
18. september 2008 - 15:24 #14
w13 >> Du kan godt se hvad jeg mener?
Avatar billede w13 Novice
18. september 2008 - 18:38 #15
Jup. =)
Avatar billede w13 Novice
18. september 2008 - 18:38 #16
Jeg var for doven til at teste det rigtigt med billeder, så det opdagede jeg aldrig.
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
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
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 17:06 Sort skærm Af luffe1955 i Windows
I går 15:18 WM-bus Minomess Single Jet vandmåler Brunata/Zenner Af kulawig i Andet hardware
I går 14:23 Navn i stifinder til ny bruger: C:\Users\defaultuser100000 Af Jørgen Kirkegaard i Windows
I går 11:44 Sti og filnavn i sidefod Af boro23 i Word
I går 11:02 Zyxel Multy U netværk Af jcr18 i Wifi
White papers
Flere white papers »


Premium
Teaser billede
Netcompany udsat for endnu et datalæk
Læs mere »
Leverandør til 50 danske kommuner ramt af ransomware: "Det er ikke sjovt," siger direktør Thomas à Porta
Norlys-kunder har store problemer efter sammenlægning af it-systemer: Internet, tv og telefoni crasher i lange baner
Meldes til politiet for grove GDPR-brud og elendig sikkerhed: Mere end 1.000 tidligere ansatte har haft fri adgang til centralt KMD-system
Se alle »
Computerworld
Teaser billede
Stort Microsoft-nedbrud rammer flere kunder: Problemer med Teams og mails
Læs mere »
Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse
Kæmpe datalæk på hospital: 750.000 patienters fortrolige data lækket
Et ”mareridt for privatlivets fred”: Kontroversiel Windows-funktion er udkommet i en test-version
Se alle »
CIO
Teaser billede
Microsoft hæver priserne på M365: Sådan kommer de nye priser til at ramme
Læs mere »
Stort Microsoft-nedbrud rammer flere kunder: Problemer med Teams og mails
Leverandør til 50 danske kommuner ramt af ransomware: "Det er ikke sjovt," siger direktør Thomas à Porta
Konsulenthus vil rulle Microsoft 365 Copilot ud til 200.000 ansatte
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Twoday er rykket til et af de dyreste postnumre i Danmark – og det kan betale sig, siger topchef Lars Berthelsen
Se alle »
White paper
Teaser billede
Er din cybersikkerhed klar til AI-revolutionen?
Læs mere »
Sådan gør du: Elektronisk dokumentudveksling i praksis
Governance, Risk & Compliance: Knyt stærke bånd mellem forretning og sikkerhed
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »