Avatar billede alex15 Nybegynder
08. marts 2007 - 20:00 Der er 38 kommentarer og
2 løsninger

Autoskift af billeder2

Hey eksperter..

Jeg har nu fået et scrips.. som jeg skal have sat ind i min html..

Hvor skal jeg sætte det ind henne?? så det fungere?
Avatar billede alex15 Nybegynder
08. marts 2007 - 20:03 #1
Kode jeg har fået "sendt":

<!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 alex15 Nybegynder
08. marts 2007 - 20:03 #2
min 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 - 20:04 #3
Min 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"><img src="billeder/banner/under/clio-v6.jpg" alt="" width="700" height="100" /></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 jhe-ting Nybegynder
09. marts 2007 - 00:12 #4
Hej igen Alex.

Eksemplet fra http://www.eksperten.dk/spm/742126 er kun et eksempel.
Det er lavet sådan, at to billeder er absolut placeret oven i hinanden.
Der skifter så imellem hvilket der er forrest og 'fader' ind.

Her er så et nyt og bedre eksempel, der lettere kan tilpasses din side.
Der er et større script i HEAD-sektionen, og et par små i BODY-sektionen.
På den måde kan man have flere billeder på siden der skifter automatisk.

<!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 where = "";
function assert(val,msg){
    if (!val){
        alert(where+msg);
        return false;
    } else {
        return true;
    }
}

function gEl(idStr){
    return document.getElementById(idStr);
}

function crEl(strTag){
    return document.createElement(strTag);
}

function crTx(strTxt){
    return document.createTextNode(strTxt);
}

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

var showsAry = [];

var current = 0;

function startSlides(){
    where = "startSlides() "
    if (!assert(showsAry.length, "no shows defined")) return;
    showsAry[0].startShow();
}

function SlideShow(args){
    var stepDly = args.stepDly ? args.stepDly : 5000;

    where = "SlideShow() ";
    if (!assert(args.imgs && args.imgs.length, "imgs must be array (of img files)")) return null;
    var imgs = args.imgs;

    if (!assert(args.top, "top must be specified")) return null;
    var top = args.top;

    if (!assert(args.left, "left must be specified")) return null;
    var left = args.left;

    var fadeInc = args.fadeInc ? args.fadeInc : 0.01;
    var fadeDly = args.fadeDly ? args.fadeDly : 10;

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

    var idx = showsAry.length;
    showsAry[idx]=this;
    var imgId = "show"+idx;

    document.write("<img id='"+imgId+"_0' src='"+imgs[0]
        +"' style='position:absolute; z-index:0; top:"+top+"; left:"+left+"'>");
    document.write("<img id='"+imgId+"_1' src='"+imgs[0]
        +"' style='position:absolute; z-index:1; top:"+top+"; left:"+left+"'>");

    var frontImg, backImg;
   
    var fadeTo = function (nOpa){
        setOpacity(frontImg,nOpa);
    }

    var startFadeTo = function (sSrc){
        if (runningFade){
            clearTimeout(runningFade);
            fadeTo(1)
        }
        var fadeBack = fadeFront;
        fadeFront = fadeFront ? 0: 1;
        frontImg = gEl(imgId+"_"+fadeFront);
        backImg =  gEl(imgId+"_"+fadeBack);
        fadeTo(fadeFrac=0);
        with (frontImg) {
            style.zIndex = 1;
            src = sSrc;
        }
        backImg.style.zIndex = 0;
        runningFade = setTimeout(stepFade,fadeDly);
    }

    var stepFade = function (){
        fadeFrac += fadeInc;
        if (fadeFrac<1){
            fadeTo(fadeFrac);
            runningFade = setTimeout(stepFade,fadeDly);
        } else {
            fadeTo(1);
            runningFade = false;
            runningStep = setTimeout(
                showsAry[ (idx+1)%showsAry.length ].startShow,
                stepDly);
        }
    }
   
    this.stopShow = function (){
        if (runningFade) {
            clearTimeout(runningFade);
            fadeTo(1);
        }
        if (runningStep) {
            clearTimeout(runningStep);
        }
    }

    this.startShow = function (){
        current = idx;
        startFadeTo(imgs[imageIndex++]);
        imageIndex %= imgs.length;
    }

}

//--></script>
</head>

<body onload="startSlides();">
<script type="text/javascript"><!--
new SlideShow(
    { top:"25px",
      left:"20px",
      stepDly:5000,
      imgs:["1.gif","2.gif","3.gif"]
    }
);
//--></script>
<script type="text/javascript"><!--
new SlideShow(
    { top:"250px",
      left:"320px",
      stepDly:7000,
      imgs:["4.gif","5.gif"]
    }
);
//--></script>
</body>
</html>
Avatar billede jhe-ting Nybegynder
09. marts 2007 - 00:16 #5
Læg mærke til hvodan parametrene til SlideShow constructor-funktionen tillader fuld kontrol over hvilke billeder der skal vises og hvor der skal vises.
Avatar billede alex15 Nybegynder
09. marts 2007 - 01:36 #6
Okay.. Nu har jeg siddet og kigget et stykke tid på det?? Kan simpelhen ikke få det til at fungere..! jo det virker fint nok hvis jeg laver det i en fil for sig selv.. men når jeg putter det ind i min html fil.. virker det ikke.. har sat det ind på følgende måde:
Avatar billede alex15 Nybegynder
09. marts 2007 - 01:37 #7
<!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>
<script type="text/javascript"><!--
var where = "";
function assert(val,msg){
    if (!val){
        alert(where+msg);
        return false;
    } else {
        return true;
    }
}

function gEl(idStr){
    return document.getElementById(idStr);
}

function crEl(strTag){
    return document.createElement(strTag);
}

function crTx(strTxt){
    return document.createTextNode(strTxt);
}

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

var showsAry = [];

var current = 0;

function startSlides(){
    where = "startSlides() "
    if (!assert(showsAry.length, "no shows defined")) return;
    showsAry[0].startShow();
}

function SlideShow(args){
    var stepDly = args.stepDly ? args.stepDly : 5000;

    where = "SlideShow() ";
    if (!assert(args.imgs && args.imgs.length, "imgs must be array (of img files)")) return null;
    var imgs = args.imgs;

    if (!assert(args.top, "top must be specified")) return null;
    var top = args.top;

    if (!assert(args.left, "left must be specified")) return null;
    var left = args.left;

    var fadeInc = args.fadeInc ? args.fadeInc : 0.01;
    var fadeDly = args.fadeDly ? args.fadeDly : 10;

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

    var idx = showsAry.length;
    showsAry[idx]=this;
    var imgId = "show"+idx;

    document.write("<img id='"+imgId+"_0' src='"+imgs[0]
        +"' style='position:absolute; z-index:0; top:"+top+"; left:"+left+"'>");
    document.write("<img id='"+imgId+"_1' src='"+imgs[0]
        +"' style='position:absolute; z-index:1; top:"+top+"; left:"+left+"'>");

    var frontImg, backImg;
   
    var fadeTo = function (nOpa){
        setOpacity(frontImg,nOpa);
    }

    var startFadeTo = function (sSrc){
        if (runningFade){
            clearTimeout(runningFade);
            fadeTo(1)
        }
        var fadeBack = fadeFront;
        fadeFront = fadeFront ? 0: 1;
        frontImg = gEl(imgId+"_"+fadeFront);
        backImg =  gEl(imgId+"_"+fadeBack);
        fadeTo(fadeFrac=0);
        with (frontImg) {
            style.zIndex = 1;
            src = sSrc;
        }
        backImg.style.zIndex = 0;
        runningFade = setTimeout(stepFade,fadeDly);
    }

    var stepFade = function (){
        fadeFrac += fadeInc;
        if (fadeFrac<1){
            fadeTo(fadeFrac);
            runningFade = setTimeout(stepFade,fadeDly);
        } else {
            fadeTo(1);
            runningFade = false;
            runningStep = setTimeout(
                showsAry[ (idx+1)%showsAry.length ].startShow,
                stepDly);
        }
    }
   
    this.stopShow = function (){
        if (runningFade) {
            clearTimeout(runningFade);
            fadeTo(1);
        }
        if (runningStep) {
            clearTimeout(runningStep);
        }
    }

    this.startShow = function (){
        current = idx;
        startFadeTo(imgs[imageIndex++]);
        imageIndex %= imgs.length;
    }

}

//--></script>

</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">
 
  <body onload="startSlides();">
<script type="text/javascript"><!--
new SlideShow(
    { top:"25px",
      left:"20px",
      stepDly:5000,
      imgs:["1.gif","2.gif","3.gif"]
    }
);
//--></script>
<script type="text/javascript"><!--
new SlideShow(
    { top:"250px",
      left:"320px",
      stepDly:7000,
      imgs:["4.gif","5.gif"]
    }
);
//--></script>

</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 jhe-ting Nybegynder
09. marts 2007 - 02:05 #8
1) ret din BODY tag så den kommer til at se sådan ud:

<body onload="startSlides();">

NB: Der må kun være EN BODY tag, og den skal være lige efter </HEAD>

2) I "Layer5" skal du kun have et kald til "new SlideShow(..." pr. vist billedelement. !!! OG der må IKKE stå BODY igen !!!

<div id="Layer5"><script type="text/javascript"><!--
new SlideShow(
    { top:"440px",
      left:"0px",
      stepDly:5000,
      imgs:["billeder/banner/under/clio-v6.jpg","1.gif","2.gif","3.gif"]
    }
);
//--></script></div>
NB: top skal have samme værdi som i #Layer5, mens left er 0px.
PS: "1.gif" og de andre billed-adresser skal selvfølgelig rettes ...
Avatar billede alex15 Nybegynder
09. marts 2007 - 09:15 #9
Men hvor i min body skal jeg sætte (  <body onload="startSlides();">    ) ind henne??

Er den øverste del af rigtig nok ellers?
Avatar billede roenving Novice
09. marts 2007 - 09:22 #10
Et absolut minimalt html-dokument ser således ud:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Din titel</title>
</head>
<body>

</body>
</html>

-- og af ovenstående tags er der ikke eet eneste, der må forekomme mere end een gang !-)
Avatar billede alex15 Nybegynder
09. marts 2007 - 11:41 #11
men det er da der heller ikke i mit html document vel??? eller hva?
Avatar billede roenving Novice
09. marts 2007 - 11:43 #12
Jo, du har flere body-tags ...
Avatar billede alex15 Nybegynder
09. marts 2007 - 12:27 #13
hmm ja okay, hvilke nogle af dem kan jeg så slette??? sorry, men er altså ikke særlig haj til det her.. Kan du ikke rette i min html så den er rigtig.. for nu har jeg prøvet en del.. og det virker stadigvæk ikke :S
Avatar billede roenving Novice
09. marts 2007 - 12:40 #14
I head-sektionen må der vare link-, title-, meta- og styletags (og de må _ikke_ være andre steder !-) samt script-tags -- plus nogle andre ikke særlig brugte, ellers er den udtømmende ...

_Al_ anden html-kode skal befinde sig imellem <body> og </body>, og som jhe-ting skriver _skal_ <body>-tagget komme umiddelbart efter </head>-tagget !o]
Avatar billede jhe-ting Nybegynder
11. marts 2007 - 10:16 #15
Til trods for fejlen med flere HEAD-tag's vises din kode "rigtigt" i både FF2 og IE6, på betingelse af at billederne (1 2 3 4 5).gif er placeret i samme mappe som htm-filen.

For at nøjes med ét billede der skifter skal du slette linjerne 194-202.

For at være standardiseret skal du:


1) rette linje 142 fra:

      <body>

    til:

      <body onload="startSlides();">


2) linje 184 skal slettes:

      <body onload="startSlides();">

For at se dine "egne" billeder skal du rette linje 190:

        imgs:["1.gif","2.gif","3.gif"]

    til

        imgs:[
            "billeder/banner/under/clio-v6.jpg",
            "billeder/banner/under/bilmrkX.jpg",
            "billeder/banner/under/bilmrkY.jpg",
            "billeder/banner/under/bilmrkZ.jpg",
            "billeder/banner/under/bilmXXX.jpg",
            "billeder/banner/under/bilmXXY.jpg",
            "billeder/banner/under/bilmXYX.jpg",
            "billeder/banner/under/bilXXXX.jpg",
            "billeder/banner/under/bilXCVX.jpg",
            "billeder/banner/under/bil2CVX.jpg",
            "billeder/banner/under/bil9999.jpg"]
Avatar billede alex15 Nybegynder
12. marts 2007 - 08:50 #16
Men når jeg retter de fejl som i siger ("og gør det rigtig") tror jeg selv..

Men som bliver hele designet på hjemmesiden, total fucked up..! Arh, går snart død i det her.. hvorfor er det lige at det skal være så svært?!? :D hehe..
Avatar billede alex15 Nybegynder
12. marts 2007 - 08:55 #17
Nu ser dokumentet således ud:

<!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>
<script type="text/javascript"><!--
var where = "";
function assert(val,msg){
    if (!val){
        alert(where+msg);
        return false;
    } else {
        return true;
    }
}

function gEl(idStr){
    return document.getElementById(idStr);
}

function crEl(strTag){
    return document.createElement(strTag);
}

function crTx(strTxt){
    return document.createTextNode(strTxt);
}

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

var showsAry = [];

var current = 0;

function startSlides(){
    where = "startSlides() "
    if (!assert(showsAry.length, "no shows defined")) return;
    showsAry[0].startShow();
}

function SlideShow(args){
    var stepDly = args.stepDly ? args.stepDly : 5000;

    where = "SlideShow() ";
    if (!assert(args.imgs && args.imgs.length, "imgs must be array (of img files)")) return null;
    var imgs = args.imgs;

    if (!assert(args.top, "top must be specified")) return null;
    var top = args.top;

    if (!assert(args.left, "left must be specified")) return null;
    var left = args.left;

    var fadeInc = args.fadeInc ? args.fadeInc : 0.01;
    var fadeDly = args.fadeDly ? args.fadeDly : 10;

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

    var idx = showsAry.length;
    showsAry[idx]=this;
    var imgId = "show"+idx;

    document.write("<img id='"+imgId+"_0' src='"+imgs[0]
        +"' style='position:absolute; z-index:0; top:"+top+"; left:"+left+"'>");
    document.write("<img id='"+imgId+"_1' src='"+imgs[0]
        +"' style='position:absolute; z-index:1; top:"+top+"; left:"+left+"'>");

    var frontImg, backImg;
   
    var fadeTo = function (nOpa){
        setOpacity(frontImg,nOpa);
    }

    var startFadeTo = function (sSrc){
        if (runningFade){
            clearTimeout(runningFade);
            fadeTo(1)
        }
        var fadeBack = fadeFront;
        fadeFront = fadeFront ? 0: 1;
        frontImg = gEl(imgId+"_"+fadeFront);
        backImg =  gEl(imgId+"_"+fadeBack);
        fadeTo(fadeFrac=0);
        with (frontImg) {
            style.zIndex = 1;
            src = sSrc;
        }
        backImg.style.zIndex = 0;
        runningFade = setTimeout(stepFade,fadeDly);
    }

    var stepFade = function (){
        fadeFrac += fadeInc;
        if (fadeFrac<1){
            fadeTo(fadeFrac);
            runningFade = setTimeout(stepFade,fadeDly);
        } else {
            fadeTo(1);
            runningFade = false;
            runningStep = setTimeout(
                showsAry[ (idx+1)%showsAry.length ].startShow,
                stepDly);
        }
    }
   
    this.stopShow = function (){
        if (runningFade) {
            clearTimeout(runningFade);
            fadeTo(1);
        }
        if (runningStep) {
            clearTimeout(runningStep);
        }
    }

    this.startShow = function (){
        current = idx;
        startFadeTo(imgs[imageIndex++]);
        imageIndex %= imgs.length;
    }

}

//--></script>

</head>
<body onload="startSlides();">

<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"><!--
new SlideShow(
    { top:"440px",
      left:"0px",
      stepDly:5000,
      imgs:[
            "billeder/banner/under/clio-v6.jpg",
            "billeder/banner/under/bilmrkX.jpg",
            "billeder/banner/under/bilmrkY.jpg",
            "billeder/banner/under/bilmrkZ.jpg",
            "billeder/banner/under/bilmXXX.jpg",
            "billeder/banner/under/bilmXXY.jpg",
            "billeder/banner/under/bilmXYX.jpg",
            "billeder/banner/under/bilXXXX.jpg",
            "billeder/banner/under/bilXCVX.jpg",
            "billeder/banner/under/bil2CVX.jpg",
            "billeder/banner/under/bil9999.jpg"]
    }
);
//--></script></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
12. marts 2007 - 10:17 #19
Okay, nu ser det lidt bedre ud.. har fået smidt alle koderne ind (tror jeg) og hjemmesiden ligner stadigvæk en hjemmeside ;)

Lige nu se den således ud:
http://www.fluii.dk/uploadok.asp?name=FluiiDK-1717.jpg&size=72408&titel=CCC1&nick=Alex&id=1717

Og min html fil ser således ud:

<!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>

<script type="text/javascript"><!--
var where = "";
function assert(val,msg){
    if (!val){
        alert(where+msg);
        return false;
    } else {
        return true;
    }
}

function gEl(idStr){
    return document.getElementById(idStr);
}

function crEl(strTag){
    return document.createElement(strTag);
}

function crTx(strTxt){
    return document.createTextNode(strTxt);
}

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

var showsAry = [];

var current = 0;

function startSlides(){
    where = "startSlides() "
    if (!assert(showsAry.length, "no shows defined")) return;
    showsAry[0].startShow();
}

function SlideShow(args){
    var stepDly = args.stepDly ? args.stepDly : 5000;

    where = "SlideShow() ";
    if (!assert(args.imgs && args.imgs.length, "imgs must be array (of img files)")) return null;
    var imgs = args.imgs;

    if (!assert(args.top, "top must be specified")) return null;
    var top = args.top;

    if (!assert(args.left, "left must be specified")) return null;
    var left = args.left;

    var fadeInc = args.fadeInc ? args.fadeInc : 0.01;
    var fadeDly = args.fadeDly ? args.fadeDly : 10;

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

    var idx = showsAry.length;
    showsAry[idx]=this;
    var imgId = "show"+idx;

    document.write("<img id='"+imgId+"_0' src='"+imgs[0]
        +"' style='position:absolute; z-index:0; top:"+top+"; left:"+left+"'>");
    document.write("<img id='"+imgId+"_1' src='"+imgs[0]
        +"' style='position:absolute; z-index:1; top:"+top+"; left:"+left+"'>");

    var frontImg, backImg;
   
    var fadeTo = function (nOpa){
        setOpacity(frontImg,nOpa);
    }

    var startFadeTo = function (sSrc){
        if (runningFade){
            clearTimeout(runningFade);
            fadeTo(1)
        }
        var fadeBack = fadeFront;
        fadeFront = fadeFront ? 0: 1;
        frontImg = gEl(imgId+"_"+fadeFront);
        backImg =  gEl(imgId+"_"+fadeBack);
        fadeTo(fadeFrac=0);
        with (frontImg) {
            style.zIndex = 1;
            src = sSrc;
        }
        backImg.style.zIndex = 0;
        runningFade = setTimeout(stepFade,fadeDly);
    }

    var stepFade = function (){
        fadeFrac += fadeInc;
        if (fadeFrac<1){
            fadeTo(fadeFrac);
            runningFade = setTimeout(stepFade,fadeDly);
        } else {
            fadeTo(1);
            runningFade = false;
            runningStep = setTimeout(
                showsAry[ (idx+1)%showsAry.length ].startShow,
                stepDly);
        }
    }
   
    this.stopShow = function (){
        if (runningFade) {
            clearTimeout(runningFade);
            fadeTo(1);
        }
        if (runningStep) {
            clearTimeout(runningStep);
        }
    }

    this.startShow = function (){
        current = idx;
        startFadeTo(imgs[imageIndex++]);
        imageIndex %= imgs.length;
    }

}

//--></script>

</head>
<body onload="startSlides();">
<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"><!--
new SlideShow(
    { top:"440px",
      left:"0px",
      stepDly:500,
            imgs:[
            "billeder\banner\Under\clio-v6.jpg",
            "billeder\banner\Under\clio-v61.jpg",
            "billeder\banner\Under\clio-v62.jpg",
            "billeder\banner\Under\clio-v63.jpg"]"
              }
);
//--></script></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 jhe-ting Nybegynder
12. marts 2007 - 11:16 #20
Der er et anførselstegn for meget i linjen:

    "billeder\banner\Under\clio-v63.jpg"]"

ret til:

            "billeder\banner\Under\clio-v63.jpg"]
Avatar billede alex15 Nybegynder
13. marts 2007 - 13:23 #21
Hjælper ikke.. Den viser stadigvæk ikke billede?!?
Avatar billede jhe-ting Nybegynder
14. marts 2007 - 13:30 #22
Får du stadig "no shows defined" ?
Avatar billede alex15 Nybegynder
15. marts 2007 - 14:10 #23
nope..! nu viser den bare ikke længere noget billede..
Avatar billede jhe-ting Nybegynder
16. marts 2007 - 12:27 #24
Er der nogen fejl i FireFox's fejlkonsol?

Se evt. mit katte-galleri:
    http://heiltech.homepage.dk/Galleri/index.htm
(Mangler endnu at tilføje en 'preloader' ...)
Avatar billede alex15 Nybegynder
16. marts 2007 - 17:36 #25
Hvad er firefox fejlkonsol???
Avatar billede alex15 Nybegynder
16. marts 2007 - 17:37 #26
Dit katte-galleri, ser godt nok nice ud.. Kunne jeg godt tænke mig.. hehe.. Arh..! det er efterhånden lige før at jeg dropper det der så den automatisk skifter logo..!!!
Avatar billede jhe-ting Nybegynder
18. marts 2007 - 15:47 #27
Fejlkonsollen i FireFox åbnes ved at klikke på et lille ikon øverst til hæjre.

Grønt hak = OK
Gul udråb = Advarsler
Rødt kryds = Fejl

Giv ikke op, der ER en løsning for den tålmodige.

;0)
Avatar billede jhe-ting Nybegynder
18. marts 2007 - 15:51 #28
Opdager lige endnu en fejl!

Brug IKKE "\" til mapper men derimod "/"


            imgs:[
            "billeder/banner/Under/clio-v6.jpg",
            "billeder/banner/Under/clio-v61.jpg",
            "billeder/banner/Under/clio-v62.jpg",
            "billeder/banner/Under/clio-v63.jpg"]



I en streng-konstant i '"' bruges "\" som 'escape' for efterfølgende:

    "\"" = "

;o)  :-P
Avatar billede alex15 Nybegynder
18. marts 2007 - 23:09 #29
arh......

Der var jo ikke ANDET end fejl.. eller advarsler :S

---
Advarsel: Fejl i tolkning af værdi for 'cursor'.  Erklæring droppet.
Kildefil: http://mail.google.com/mail/?view=page&name=gp&ver=sh3fib53pgpk
Linje: 2
---

Dem er der rigtig mange af..!

Hva så?
Avatar billede alex15 Nybegynder
19. marts 2007 - 08:22 #30
Tænkte på hvad du havde skrevet dit katte gallari i? bare normal html? eller er det også et script?
Avatar billede jhe-ting Nybegynder
19. marts 2007 - 10:42 #31
Fik du rettet \ til / ?

For at finde fejl bør du bruge et separat vindue, så alle advarslerne fra f.eks. google ikke forvirrer (som du viser).

Kattegalleriet er lavet med (D)HTML (d.v.s. HTML, CSS og JavaScript) efter jeg lavede billedskift-eksemplet med fade-in.
Avatar billede alex15 Nybegynder
19. marts 2007 - 20:05 #32
hmmm ja, det gjorde jeg.. og det virkede stadigvæk ikke.. underligt nok..!

Ville den kode være nem og smide ind i en html som min? eller lige så svær som den anden?
Avatar billede jhe-ting Nybegynder
19. marts 2007 - 20:17 #33
Det ER den kode vi arbejder med her. Se katte-galleriet som en 'working-demo'. Jeg er ved at teste en image-preloader på den nu.
Jeg bruger selv ofte Notepad++ som er en glimrende 'open-source' syntaks-farvende kode-editor.
Kan du blive 'enig' med FireFox om fejlfinding?
Avatar billede alex15 Nybegynder
19. marts 2007 - 23:01 #34
Hvad menr du med om vi kan blive enig om firefox fejlfinding?

Har fundet den.. Men den kom jo med jeg ved ikke hvor mange fejl medelser!!
Avatar billede jhe-ting Nybegynder
20. marts 2007 - 15:20 #35
Alle åbne faneblades fejl kommer i samme fejlfindingsvindue.
Den fejl du citerede kommer jo tydeligvis fra google som har været åben i et andet faneblad.

Test din side i et SEPARAT FireFox-vindue UDEN ANDRE FANDEBLADE.  !-}

Hvad med at lægge et link til siden så jeg kan se den med billeder?
Avatar billede jhe-ting Nybegynder
20. marts 2007 - 15:34 #36
- og hjælpe dig med fejlfinding ...
Avatar billede alex15 Nybegynder
25. marts 2007 - 22:26 #37
åhh.. giver op..! fatter det altså ikke..!

Er det svært og lave sådan hvis man har et stort billede og 5 små billeder.. at når man trykker på et af de små billeder, så skifter det store billede til det bilelde man trykkede på.. lidt lige som det du havde lavet??
Avatar billede roenving Novice
25. marts 2007 - 22:56 #38
Avatar billede alex15 Nybegynder
26. marts 2007 - 15:02 #39
Ser altså lige så svært ud som det jeg ligge og siddet med?

nogle som vil tjene nogle point. På at få det til at virke for mig? Så kunne jeg sende hele hjemmesiden (0,9 mb) til jeres mail..?
Avatar billede alex15 Nybegynder
27. marts 2007 - 14:58 #40
Okay, nu har jeg siddet og kigget lidt på det.. Men kan jo næsten se at jeg får de samme problemer en til gang?!? ikke?
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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