Avatar billede rasta123 Nybegynder
31. maj 2003 - 00:35 Der er 20 kommentarer og
1 løsning

Automatisk udskiftning af billeder

Hejsa..

Nu har jeg endnu engang et spg!

I stedet for at lave en gif animation, vil jeg gerne have et javascript, hvor et billede bliver vist, 3 sek. efter bliver det udskiftet med et andet, 3 sek efter med et 3... Derved kan man nemlig have et bestemt link ved hvert billede også!

Altså et lille slideshow..

Slideshowet skal bestå af alle billederne i en bestemt mappe, som f.eks. images, så man er fri for at kende filnavnet på billedet....

Filnavnene på billederne vil være f.eks. være:

www.yahoo.com.jpg

Så er det jo forholdvist nemt, at linke videre, da man ikke har brug for database opslag..

Dvs. at når jeg ligger et nyt billede ind i min mappe : images, så vil det automatisk blive vist i mit slideshow, og hedder billedet: "www.test.dk.jpg", vil man ende på siden www.test.dk, når man klikker på billedet..

Jeg håber jeg har gjort mig klar nok, og jeg tror den kan lade sig gøre rimelig nemt, når man kender javascript

På forhånd tak!
Avatar billede jytte Nybegynder
31. maj 2003 - 09:03 #1
Det med de 3 sekunder kan godt lade sig gøre i javascript.

Men i javascript kan du ikke hente alle billeder i en mappe. Javascript skal vide hvilke billeder det handler om på forhånd.

Så enten skal du over i serversideprogrammering eller du skal manuelt (hver gang du putter et billed i mappen) også tilføje navnet på billedet til dit javascript.
Avatar billede rasta123 Nybegynder
31. maj 2003 - 18:28 #2
ok!.. Det tænkte jeg nok!.. Php er ikke noget problem for mig.. Så der vil jeg så hente navnene..

Dvs... At navnene er stadig som før.. Dvs. i scriptet skal der stadig være en funktion, linker vha. billedets navn..

I scriptet kender jeg nu bare navnene (vha. php)

Er der nogen der kan hjælpe mig med ovenstående, når man kender navnene på filerne i biblioteket??
Avatar billede rasta123 Nybegynder
02. juni 2003 - 00:59 #3
Saadan... Nu har jeg fordoblet pointtallet!.. Saa haaber jeg, at der er nogen, der vil hjaelpe mig!..

Paa forhaand tak!
Avatar billede roenving Novice
02. juni 2003 - 01:20 #4
<?Dit database-opslag?>

<HTML>
<HEAD>
<TITLE>Skift billederne</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<SCRIPT LANGUAGE="javascript">

var imgs = new Array();
var links = new Array();

<?for (i osv... hvert opslag
imgs[i]= new Image();
imgs[i].src='<?rs_et_eller_andet?>';
links[i] ='<?rs_et_link?>';

?>
var lAct = -1;
var nu = new Date();
var start = 3;//3 sek.
var snartmsek = 0;
var ids = 0;

function startTael() {
  ids=setInterval(taelNed,1000);
}

function taelNed(){
  nu = new Date();
  msek = snartmsek - nu.getTime();
  if (msek <=0){
    lAct++;
    document.getElementById("mitBillede").innerHTML="<a href='"+links[lAct]+"'><IMG src='"+eval("imgs["+lAct+"].src")+"'></a>"
    snartmsek = nu.getTime()+start*1000;
    if (lAct==links.length-1)lAct=-1;
  }
  var sek = Math.floor(msek/1000);
  var min = Math.floor(sek/60);
  sek = sek%60;
  min = min%60;
}

</SCRIPT>
</HEAD>

<BODY ONLOAD='startTael()'>
Tæl ned til skift:<BR>
Nyt billede åbnes snart:&nbsp;&nbsp;<SPAN id="mitBillede"></SPAN><BR>
</BODY>
</HTML>

-- jeg har overhovedet ikke prøvet om det virker -- fik bare inspirationen fra et andet opdateringsscript ...

hth
jes
Avatar billede rasta123 Nybegynder
04. juni 2003 - 00:07 #5
Mange tak for det!... Det virker lige præcis sådan som jeg vil have det!.. Lavede lidt php kode, der laver linkene og finder navnene på billederne!.. Det virker fint! Mange tak!
Avatar billede roenving Novice
04. juni 2003 - 00:14 #6
Velbekomme -- og tak for points ;~}
Avatar billede rasta123 Nybegynder
04. juni 2003 - 00:37 #7
du øh.. Er du der stadig.. Har et lille problem!.. Når det kører, så kører min newsscroller ikke!
Avatar billede roenving Novice
04. juni 2003 - 00:41 #8
Hvordan fungerer din newsscroller -- vi skal jo lige være sikker på, at de ikke konflikter !-)
Avatar billede rasta123 Nybegynder
04. juni 2003 - 00:43 #9
her er min kode.. Jeg fandt newsscrolleren inde på DHTML central...


<style type="text/css">
#divNewsCont {width:170px; height:100px; clip:rect(0px 170px 100px 0px);

visibility:hidden; overflow:hidden;}
#divNews    {position:absolute;}
</style>

<SCRIPT LANGUAGE="javascript">

var imgs = new Array();
var links = new Array();

imgs[0]= new Image();
imgs[0].src='testbillede1.gif';
links[0] ='<www.yahoo.com>';

imgs[1]= new Image();
imgs[1].src='testbillede2.gif';
links[1] ='<www.test.com>';



var lAct = -1;
var nu = new Date();
var start = 3;//3 sek.
var snartmsek = 0;
var ids = 0;

function startTael() {
  ids=setInterval(taelNed,1000);
}

function taelNed(){
  nu = new Date();
  msek = snartmsek - nu.getTime();
  if (msek <=0){
    lAct++;
    document.getElementById("mitBillede").innerHTML="<a

href='"+links[lAct]+"'><IMG border=0

src='"+eval("imgs["+lAct+"].src")+"'></a>"
    snartmsek = nu.getTime()+start*1000;
    if (lAct==links.length-1)lAct=-1;
  }
  var sek = Math.floor(msek/1000);
  var min = Math.floor(sek/60);
  sek = sek%60;
  min = min%60;
}

</SCRIPT>

<script language="JavaScript" type="text/javascript">
/**************************************************************************

******** 
NewsSlideFade
*  Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas

Brattli</a>
*  This script was released at DHTMLCentral.com
*  Visit for more great scripts!
*  This may be used and changed freely as long as this msg is intact!
*  We will also appreciate any links you could give us.
*
*  Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
***************************************************************************

******/

function lib_bwcheck(){ //Browsercheck (needed)
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=this.agent.indexOf("Opera 5")>-1
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom &&

!this.opera5)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom &&

!this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6

|| this.opera5)
    return this
}
var bw=new lib_bwcheck()



/**************************************************************************

*
Use the style tag to change the placement and width of the layers.
If you are trying to place this into a table cell or something make the
position of the divNewsCont layer relative...Remeber that that might crash
Netscape 4 though, Good luck!
***************************************************************************

*****/

/****
Variables to set
****/

//How do you want the script to work?
//0 = Fade in - Fade out
//1 = Slide in - Fade out
//2 = Random
nWorks = 1

//If you use the slide set these variables:
nSlidespeed = 5 //in px
nNewsheight = 80 //This is how long down it should start the slide.

nBetweendelay = 1000 //The delay before fading out.
nFont = 'arial,helvetiva' //The font for the news.
nFontsize = 12 //Font size in pixel.
nFadespeed = 100 //The speed to fade in, in milliseconds.

//Set the colors, first color is same as background, last color is the

color it stops at:
//You can have as many colors you want
nColor=new Array('#FFFFFF',

'#EEEEEE','#CCCCCC','#999999','#666666','#333333','#000000')

//This is the news you wanna have, set the link and the text. If you don't

wan't it to link anywhere
//use a # as the link
nNews=new Array()
//Copy there three lines and change the info and numbers to get more news.
nNews[0]=new Array()
nNews[0]["text"]="Interaction Solutions et eller andet lort og møg!

lksajlkfejsljkjsdslkjlksjdlkfj.."
nNews[0]["link"]="/"

nNews[1]=new Array()
nNews[1]["text"]="New homepage up!.. Click to view the improvements in the

new version!"
nNews[1]["link"]="/"

nNews[2]=new Array()
nNews[2]["text"]="Og endnu et eller andet møg!!!"
nNews[2]["link"]="http://www.yahoo.com"

/**************************************************************************

******
Object code...Object constructors and functions...
***************************************************************************

*****/
function

makeNewsObj(obj,nest,font,size,color,news,fadespeed,betweendelay,slidespeed

,works,newsheight){
    nest=(!nest) ? "":'document.'+nest+'.'
      this.css=bw.dom?

document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?ev

al(nest+"document.layers." +obj):0;   
      this.writeref=bw.dom?

document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"doc

ument.layers." +obj+".document"):0;
    if(font){this.color=new Array(); this.color=eval(color);

this.news=new Array(); this.news=eval(news)
        this.font=font; this.size=size; this.speed=fadespeed;

this.delay=betweendelay; this.newsheight=newsheight;
        this.fadeIn=b_fadeIn;this.fadeOut=b_fadeOut;

this.newsWrite=b_newsWrite; this.y=1
        this.slideIn=b_slideIn; this.moveIt=b_moveIt;

this.slideSpeed=slidespeed; this.works=works
        if(bw.dom || bw.ie4){this.css.fontFamily=this.font;

this.css.fontSize=this.size; this.css.color=this.color[0]}
    }
    this.obj = obj + "Object";     eval(this.obj + "=this"); return

this
}

// A unit of measure that will be added when setting the position of a

layer.
var px = bw.ns4||window.opera?"":"px";

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px;

this.css.top=this.y+px;}

function b_newsWrite(num,i){
    if (bw.ns4){
        this.writeref.write("<a href=\""+this.news[num]['link']+"\"

target=\"myTarget\" style=\"text-decoration:none;

font-size:"+this.size+"px\">"
            +"<font face=\""+this.font+"\"

color=\""+this.color[i]+"\">"+this.news[num]['text']+"</font></a>")
        this.writeref.close()
    }else this.writeref.innerHTML = '<a id="'+this.obj+'link' +'"

target="myTarget"  style="text-decoration:none; font-size:'+this.size+'px;

color:'+this.color[i]+'"

href="'+this.news[num]['link']+'">'+this.news[num]['text']+'</a>'
}
//Slide in
function b_slideIn(num,i){
    if (this.y>0){
        if (i==0){this.moveIt(0,this.newsheight);

this.newsWrite(num,this.color.length-1)}
        this.moveIt(this.x,this.y-this.slideSpeed)
        i ++
        setTimeout(this.obj+".slideIn("+num+","+i+");",50)
    }else

setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+")",this.dela

y)
}
//The fade functions
function b_fadeIn(num,i){
    if (i<this.color.length){
        if (i==0 || bw.ns4) this.newsWrite(num,i)
        else{
            obj =

bw.ie4?eval(this.obj+"link"):document.getElementById(this.obj+"link")
            obj.style.color = this.color[i]
        }
        i ++
        setTimeout(this.obj+".fadeIn("+num+","+i+")",this.speed)
    }else

setTimeout(this.obj+".fadeOut("+num+","+(this.color.length-1)+")",this.dela

y)
}

function b_fadeOut(num,i){
    if (i>=0){
        if (i==0 || bw.ns4) this.newsWrite(num,i)   
        else{
            obj =

bw.ie4?eval(this.obj+"link"):document.getElementById(this.obj+"link")
            obj.style.color = this.color[i]
        }
        i --
        setTimeout(this.obj+".fadeOut("+num+","+i+")",this.speed)
    }else{
        num ++
        if(num==this.news.length) num=0
        works =

!this.works?0:this.works==1?1:Math.round(Math.random())
        if(works==0) setTimeout(this.obj+".fadeIn("+num+",0)",500)
        else if (works==1){this.y=1;

setTimeout(this.obj+".slideIn("+num+",0)",500)
        }
    }
}
/**************************************************************************

******************
The init function. Calls the object constructor and set some properties and

starts the fade
***************************************************************************

******************/
function fadeInit(){
    oNews = new

makeNewsObj('divNews','divNewsCont',nFont,nFontsize,"nColor","nNews",nFades

peed,nBetweendelay,nSlidespeed,nWorks,nNewsheight)
    oNewsCont = new makeNewsObj('divNewsCont')
    works = !oNews.works?0:oNews.works==1?1:Math.round(Math.random())
    if (works==0) oNews.fadeIn(0,0)
    else if (works==1) oNews.slideIn(0,0)
    oNewsCont.css.visibility = "visible"
}

//Calls the init function on pageload.
if(bw.bw) onload = fadeInit
</script>

Øverst er din kode.. Og under kommer koden for newsscrolleren.. Den bliver i body sat ind næsten ligesom slideshowet, bare med div, istedet for span..

Jeg tror det har noget at gøre med hvad der står til sidst: //Calls the init function on pageload.
if(bw.bw) onload = fadeInit

Fordi din står jeg under body onload??

Men det forstår jeg mig ikke rigtig på!
Avatar billede roenving Novice
04. juni 2003 - 00:53 #10
Måske er det, da du pastede koden her, der er sket denne fejl (det må ikke være i flere linjer):

    document.getElementById("mitBillede").innerHTML="<a

href='"+links[lAct]+"'><IMG border=0

src='"+eval("imgs["+lAct+"].src")+"'></a>"

-- men det ville blive hurtigere at finde evt. fejl, hvis du tog html-objekterne med .-)
Avatar billede rasta123 Nybegynder
04. juni 2003 - 00:57 #11
Hmm.. Det angår sådan set ikke spørgsmålet mere.. Har du icq eller messenger?? Så kan jeg give dig min ip adresse, så du lige kan kigge på siden, hvis du har lyst?
Avatar billede roenving Novice
04. juni 2003 - 01:02 #12
Nej jeg sidder på en semi-offentlig computer, så jeg vil ikke være på aktive udefra-kommende, men min Eksperten-mail er roenving@hotmail.com
Avatar billede rasta123 Nybegynder
04. juni 2003 - 01:06 #13
You have mail! :)
Avatar billede roenving Novice
04. juni 2003 - 01:11 #14
:)
Avatar billede roenving Novice
04. juni 2003 - 01:22 #15
Der er en konflikt -- og min onload kaldes så senest :-)

Udkommenter disse linjer (// foran):

//Calls the init function on pageload.
//if(bw.bw) onload = fadeInit

og ret onload til:

<body background="image/background.gif" style="background-repeat: no-repeat;" ONLOAD='startTael();fadeInit();'>

-- jeg manglede for meget til at jeg kunne teste, men prøv lige den -- jeg skal nok kigge videre .-)
Avatar billede rasta123 Nybegynder
04. juni 2003 - 01:30 #16
hejsa.. Mange tak!:. Jo nu virker det! Tak for det!!
Avatar billede roenving Novice
04. juni 2003 - 01:32 #17
bingo ;O)
Avatar billede roenving Novice
04. juni 2003 - 01:33 #18
-- jeg ville jo nok sætte tider og intervaller en anelse længere ;-)
Avatar billede roenving Novice
04. juni 2003 - 01:36 #19
-- og jeg vil lige arbejde en anelse med billed/linksscriptet, for jeg kan da se, at vi lige kan optimere det en hel masse ...
Avatar billede roenving Novice
04. juni 2003 - 01:49 #20
function taelNed(){
  nu = new Date();
  msek = snartmsek - nu.getTime();
  if (msek <=0){
    lAct++;
    document.getElementById("linkBilledet").src=eval("imgs["+lAct+"].src");
    document.getElementById("linkBilledet").onclick="location.href="+links[lAct];"
    snartmsek = nu.getTime()+start*1000;
    if (lAct==links.length-1)lAct=-1;
  }
  var sek = Math.floor(msek/1000);
  var min = Math.floor(sek/60);
  sek = sek%60;
  min = min%60;
}

jeg er lidt usikker på, om vi bliver nødt til at bruge javascripts evalueringsfunktion i linjen med onclick -- der var simpelthen for meget jeg skulle sætte op for lige at gå efter -- men ellers skulle den være meget kvikkere ;-)
Avatar billede roenving Novice
04. juni 2003 - 01:50 #21
Og så skal det se sådan ud i html-koden:

<DIV id="mitBillede"><IMG id="linkBilledet" onclick=""></DIV>
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