Søg
Avatar billede alex15 Nybegynder
01. november 2006 - 12:45 Der er 30 kommentarer og
2 løsninger

Autoskift af billeder

Hej eksperter..

Ville lige høre hvordan man får et billede til at skifte automatisk til en række andre billeder. lige som på denne hjemmeside:

http://www.citygokart.dk/

mvh. Alex
Avatar billede stenger Nybegynder
02. november 2006 - 19:39 #1
Så er du i den forkerte kategori :) Du skal kigge på noget Flash istedet...
Avatar billede jhe-ting Nybegynder
05. november 2006 - 02:45 #2
...medmindre du vil scripte en animation med HTML, CSS og JavaScript/VBScript.
Det kan man godt gøre i mindre omfang.
Avatar billede roenving Novice
06. november 2006 - 02:16 #3
-- og det kan man også i større omfang, eksempelvis kan denne udbygges nærmest uendeligt: http://www.eksperten.dk/spm/364870
Avatar billede jhe-ting Nybegynder
06. november 2006 - 09:07 #4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Billedskift</title>
<script type"text/javascript"><!--
var imgs = new Array('1.gif','2.gif','3.gif','4.gif','5.gif');
var imageIndex=0;
function startShow(){
    if (document.images) setInterval(stepShow,1000);
}
function stepShow(){
    if (document.images){
        document.images[0].src = imgs[imageIndex++];
        imageIndex %= imgs.length
    }
}
//--></script>
</head>

<body onload="startShow();">
<div><img src="1.gif"></div>
</body>
</html>


Testet i IE6 + FF2 ;)
Avatar billede jhe-ting Nybegynder
07. november 2006 - 12:05 #5
Så måtte jeg lige gå lidt videre. Nu skiftes der med blød overtoning.  (:P)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Billedskift</title>
<script type="text/javascript"><!--
// Configuration /////////////////////////////////////////////
var stepDly = 5000;
var imgs = new Array('1.gif','2.gif','3.gif','4.gif','5.gif');
var fadeInc = 0.01;
var fadeDly = 10;
// Configuration end /////////////////////////////////////////

var runningFade = false;
var fadeFrac = 0;
var fadeFront = 0;
var imageIndex=1;

function setOpacity(oElm,nOpa){
    if (typeof oElm.style.filter != "undefined"){
        oElm.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity = "+nOpa+")";
    } else {
        oElm.style.opacity = nOpa;
    }
}

function fadeTo(nOpa){
    setOpacity(document.images[fadeFront],nOpa);
}

function startFadeTo(sSrc){
    if (runningFade){
        clearTimeout(runningFade);
        fadeTo(1)
    }
    var fadeBack = fadeFront;
    fadeFront = fadeFront ? 0: 1;
    fadeTo(fadeFrac=0);
    var frontImg = document.images[fadeFront];
    var backImg =  document.images[fadeBack];
    with (frontImg) {
        style.zIndex = 1;
        src = sSrc;
    }
    backImg.style.zIndex = 0;
    runningFade = setTimeout(stepFade,fadeDly);
}

function stepFade(){
    fadeFrac += fadeInc;
    if (fadeFrac<1){
        fadeTo(fadeFrac);
        runningFade = setTimeout(stepFade,fadeDly);
    } else fadeTo(1);
}

function startShow(){
    if (document.images) setInterval(stepShow,stepDly);
}
function stepShow(){
    if (document.images){
        startFadeTo(imgs[imageIndex++]);
        imageIndex %= imgs.length;
    }
}
//--></script>
</head>

<body onload="startShow();">
<div><img style="position:absolute; z-index:1; top:25px; left:20px" src="1.gif"></div>
<div><img style="position:absolute; z-index:0; top:25px; left:20px" src="1.gif"></div>
</body>
</html>
Avatar billede roenving Novice
07. november 2006 - 16:34 #6
Hvordan kan du sætte samme opacity med filter og .opacity, når den første går fra 0 til 100 og den anden fra 0.0 til 1.0 ?-)
Avatar billede jhe-ting Nybegynder
07. november 2006 - 23:48 #7
Basic image opacity går fra 0 til 1.

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/properties/opacity_1.asp
Avatar billede jhe-ting Nybegynder
07. november 2006 - 23:53 #8
Det overraskede også mig, da de (fleste) andre filtre med opacitet netop går fra 0 til 100.

Når man bruger Alpha-kanalen ( #aarrggbb ) er udfaldsrummet 0 - 255 (0x00 - 0xFF)
eks:
http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm
Avatar billede jhe-ting Nybegynder
08. november 2006 - 00:06 #9
Hov - det var et forkert eksempel. Her er det jeg tænkte på.

Her kan man let se Alpha kanalen i brug:
http://msdn.microsoft.com/workshop/samples/author/filter/gradient.htm
Avatar billede jhe-ting Nybegynder
10. november 2006 - 19:27 #10
alex15 >> Kan du få det til at virke?
Avatar billede jhe-ting Nybegynder
21. november 2006 - 22:47 #11
hallo >> alex15
Hvis du vil godkende et svar, gøres det det at markere de(n) svarer(e) der har givet et svar der kan bruges og klikke acceptér.  ;o)
Avatar billede jhe-ting Nybegynder
21. november 2006 - 22:49 #12
Hvis et svar ikke kan bruges kan du afvise det.
Avatar billede alex15 Nybegynder
26. februar 2007 - 18:34 #13
tak for hjælpen.. og sorry at jeg ikke har svaret tilbage.. har ikke brugt ek.... i laaaang tid :) sorry
Avatar billede jhe-ting Nybegynder
26. februar 2007 - 19:53 #14
Selv tak - Det glæder mig hvis det har været en hjælp med eksemplerne.
Avatar billede alex15 Nybegynder
08. marts 2007 - 18:37 #15
Hvordan får man det til at gå lidt langsomere?? :)
Avatar billede alex15 Nybegynder
08. marts 2007 - 18:58 #16
Okay, det har jeg fundet ud af hvordan man ændre på.. Problemer er bare at når jeg smider "koden" ind på min hjemmeside et sted.. vælger den de forkerte billeder og skifte op.. faktisk de to øverste billeder på hjemmesiden.. Hvad kan det skyldes?
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:04 #17
her denne fine html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Velkommen til Classic Car Club</title>
<link rel="stylesheet" type="text/css" href="skabelon.css">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{position:relative;width:800px;margin:0 auto;height:100%;text-align:center;font-size:24px;background-color:#000000;}
</style>
</head>
<body>
<div id="site">
  <div id="Layer1"><img src="billeder/banner/top/banner700.jpg" alt="banner" width="700" height="75" /></div>
   
  <div id="Layer2"> <p align="left">
 
<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/Knap-forside1.jpg"
alt="Forside" name="bil1" onMouseOver="this.src='billeder/knap/Knap-forside2.jpg'"
onmouseout="this.src='billeder/knap/Knap-forside1.jpg'" width="65" height="25"></A>

<img src="billeder/knap/Knap-mellemrum.jpg" width="12" height="25" />

<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/Knap-biler1.jpg"
alt="biler" name="bil1" onMouseOver="this.src='billeder/knap/Knap-biler2.jpg'"
onmouseout="this.src='billeder/knap/Knap-biler1.jpg'" width="41" height="25"></A>

<img src="billeder/knap/Knap-mellemrum.jpg" width="12" height="25" />

<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/Knap-priser1.jpg"
alt="Priser" name="bil1" onMouseOver="this.src='billeder/knap/Knap-priser2.jpg'"
onmouseout="this.src='billeder/knap/Knap-priser1.jpg'" width="51" height="25"></A>

<img src="billeder/knap/Knap-mellemrum.jpg" width="12" height="25" />

<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/Knap-arrangementer1.jpg"
alt="Arrangementer" name="bil1" onMouseOver="this.src='billeder/knap/Knap-arrangementer2.jpg'"
onmouseout="this.src='billeder/knap/Knap-arrangementer1.jpg'" width="128" height="25"></A>

<img src="billeder/knap/Knap-mellemrum.jpg" width="12" height="25" />

<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/Knap-download1.jpg"
alt="Download" name="bil1" onMouseOver="this.src='billeder/knap/Knap-download2.jpg'"
onmouseout="this.src='billeder/knap/Knap-download1.jpg'" width="81" height="25"></A>

</div>
 
 
 
  <div id="Layer3"><img src="billeder/tekstboks.jpg" alt="" width="520" height="275" /></div>
  <div id="Layer4"><img src="billeder/billedboks.jpg" alt="" width="175" height="275" /></div>
  <div id="Layer5">
 
  <script type="text/javascript"><!--
// Configuration /////////////////////////////////////////////
var stepDly = 5000;
var imgs = new Array('1.jpg','2.jpg','3.jpg');
var fadeInc = 0.01;
var fadeDly = 20;
// Configuration end /////////////////////////////////////////

var runningFade = false;
var fadeFrac = 0;
var fadeFront = 0;
var imageIndex=1;

function setOpacity(oElm,nOpa){
    if (typeof oElm.style.filter != "undefined"){
        oElm.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(opacity = "+nOpa+")";
    } else {
        oElm.style.opacity = nOpa;
    }
}

function fadeTo(nOpa){
    setOpacity(document.images[fadeFront],nOpa);
}

function startFadeTo(sSrc){
    if (runningFade){
        clearTimeout(runningFade);
        fadeTo(1)
    }
    var fadeBack = fadeFront;
    fadeFront = fadeFront ? 0: 1;
    fadeTo(fadeFrac=0);
    var frontImg = document.images[fadeFront];
    var backImg =  document.images[fadeBack];
    with (frontImg) {
        style.zIndex = 1;
        src = sSrc;
    }
    backImg.style.zIndex = 0;
    runningFade = setTimeout(stepFade,fadeDly);
}

function stepFade(){
    fadeFrac += fadeInc;
    if (fadeFrac<1){
        fadeTo(fadeFrac);
        runningFade = setTimeout(stepFade,fadeDly);
    } else fadeTo(1);
}

function startShow(){
    if (document.images) setInterval(stepShow,stepDly);
}
function stepShow(){
    if (document.images){
        startFadeTo(imgs[imageIndex++]);
        imageIndex %= imgs.length;
    }
}
//--></script>

<body onload="startShow();">
<div><img style="position:absolute; z-index:1; top:0px; left:0px" src="1.jpg"></div>
<div><img style="position:absolute; z-index:0; top:0px; left:0px" src="1.jpg"></div>
 
  </div>
 
  <div id="Layer6">
    <p align="right">
 
<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/knap-nede-om_ccc1.jpg"
alt="Om CCC" name="bil1" onMouseOver="this.src='billeder/knap/knap-nede-om_ccc2.jpg'"
onmouseout="this.src='billeder/knap/knap-nede-om_ccc1.jpg'" width="55" height="20"></A>

<img src="billeder/knap/knap-nede-mellemrum.jpg" width="4" height="20" />

<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/knap-nede-kontakt_os1.jpg"
alt="Kontakt os" name="bil1" onMouseOver="this.src='billeder/knap/knap-nede-kontakt_os2.jpg'"
onmouseout="this.src='billeder/knap/knap-nede-kontakt_os1.jpg'" width="72" height="20"></A>

<img src="billeder/knap/knap-nede-mellemrum.jpg" width="4" height="20" />

<A HREF="billeder/alex.jpg"><img border="0" src="billeder/knap/knap-nede-login1.jpg"
alt="Login" name="bil1" onMouseOver="this.src='billeder/knap/knap-nede-login2.jpg'"
onmouseout="this.src='billeder/knap/knap-nede-login1.jpg'" width="37" height="20"></A>
 
  </div>


</div>
</body>

</html>
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:04 #18
Måske du kan se hvad der er galt.. men den skifter billede på de 2 øverste billeder :S
Avatar billede roenving Novice
08. marts 2007 - 19:16 #19
-- du må ikke have to body-tags ...

Derfor skal du klippe det body-tag, der står lige efter scriptet væk og erstatte det øverste med det !-)

-- og scriptet retter sig præcis mod de to første i images-arrayet, så der skal laves noget om:

...
var fadeFront = 8;
...

...
function startFadeTo(sSrc){
    if (runningFade){
        clearTimeout(runningFade);
        fadeTo(1)
    }
    var fadeBack = fadeFront;
    fadeFront = fadeFront == 8 ? 9 : 8;
    fadeTo(fadeFrac=0);
...

Absolut utestet !-)
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:18 #20
hehe.. ja okay.. men hvad nu hvis der kommer flere billeder ind på siden? så har det billede jo ikke længere billede nummer 8 eller sådan noget???
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:22 #21
har også været inde og kigge på det der fadeFront.. men kan man ikke gøre så den bare retter sig præcis mod <div id="Layer5">?
Avatar billede jhe-ting Nybegynder
08. marts 2007 - 19:27 #22
Du kunne lave en liste af ID's på de IMG's der skal skifte, med en tilhørende liste af billeder der skal vises (for hver IMG)...
Avatar billede roenving Novice
08. marts 2007 - 19:28 #23
Joda, så i stedet for det, jeg skrev før:

...
    fadeTo(fadeFrac=0);
    var frontImg = document.getElementById("Layer5").getElementsByTagName("img")[fadeFront];
    var backImg =  document.getElementById("Layer5").getElementsByTagName("img")[fadeBack];
    with (frontImg) {
...
Avatar billede jhe-ting Nybegynder
08. marts 2007 - 19:29 #24
Jeg tror der er lettest at kode, hvis der bruges ID på hvert IMG-tag, så det er let at referere til dem fra script á la:

    var img = document.getElementById(strImgId)
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:32 #25
Men hvor skal jeg sætte alt der der hen??? oppe i heat delen? Eller skal det hele sætte ind under layer5? som jeg også har gjort?

Min første hjemmeside.. eller anden faktisk ;)
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:37 #26
Det er ikke muligt, at man bare kan smide koder ind i min css del?

css:
#Layer1 {
    position:absolute;
    width:700px;
    height:75px;
    z-index:1;
    left: 50px;
    top: 50px;
}
#Layer2 {
    position:absolute;
    width:700px;
    height:25px;
    z-index:6;
    left: 50px;
    top: 130px;
}
#Layer3 {
    position:absolute;
    width:520px;
    height:275px;
    z-index:2;
    left: 50px;
    top: 160px;
}
#Layer4 {
    position:absolute;
    width:175px;
    height:275px;
    z-index:3;
    left: 575px;
    top: 160px;
}
#Layer5 {
    position:absolute;
    width:700px;
    height:100px;
    z-index:4;
    left: 50px;
    top: 440px;
}
#Layer6 {
    position:absolute;
    width:700px;
    height:20px;
    z-index:7;
    left: 50px;
    top: 540px;
}
body {
    background-color: #000000;
}
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:41 #27
Vil altså gerne give lidt mere end de 30 point for det her.. så skal jeg lave en ny tråd? hva siger i til det?
Avatar billede roenving Novice
08. marts 2007 - 19:43 #28
-- du kan vel finde stedet, hvor de variabler sættes, og så ændre dem !-)

-- scriptet kan du sætte der, hvor du skal bruge det eller har lyst til ...

-- jeg plejer at smide scripts i toppen, mens jeg udvikler, og når så tingene funger, som jeg vil have det, lægger jeg dem ud i en ekstern fil ...

-- og nej, du kan ikke smide html-elementer ind i en css-fil !o]
Avatar billede jhe-ting Nybegynder
08. marts 2007 - 19:57 #29
Hvis du laver en ny tråd, så drop lige et link her...
Avatar billede alex15 Nybegynder
08. marts 2007 - 19:58 #30
i en ekstern fil? hvordan gør du det? linker du så til det? eller hva?
Avatar billede alex15 Nybegynder
08. marts 2007 - 20:04 #31
vi kan arbejde videre der:

http://www.eksperten.dk/spm/766920

har ud givet 150 point
Avatar billede roenving Novice
08. marts 2007 - 20:05 #32
<script type="text/javascript" src="minJavascriptFil.js"></script>

-- og så lægges hele alle javascript-funktioner m.m. ind i den fil, som bare er en almindelig tekst-fil !-)

Bemærk bare, at der ikke må være html i en sådan fil, så der må heller ikke være script-tags !o]
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 HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
White papers
Flere white papers »