Horizontale lichtkrant

Status
Niet open voor verdere reacties.

Lourens

Gebruiker
Lid geworden
10 aug 2006
Berichten
87
Ik ben op zoek naar een horizontale lichtkrant welke ik kan vullen met afbeeldingen. Ik heb er 1 gevonden maar deze is maar 750 px breed meer foto's erin maakt hem niet automatisch breder. En ik kan ook nergens in de code vinden hoe ik hem breder maak.
Dit is de code welke ik nu gebruik:

Iemand een idee hoe ik deze kan aanpassen? Of waar ik een soortgelijke code kan vinden voor een scherm vullende "lichtkrant"
En neen de eerste var breddte van 300 aanpassen helpt niet.

[js]
//Instellen van het veld:
var breedte=300
var hoogte=105
var snelheid=1
agrondkleur="#FFFFFF"
//Invoegen van de afbeeldingen met eventuele hyperlinks:
var afbeelding=new Array()
afbeelding[0]='<a href="#"><img src="foto1.jpg" width=150 height=100 border=0></a>'
afbeelding[1]='<a href="#"><img src="foto2.jpg" width=150 height=100 border=0></a>'
afbeelding[2]='<a href="#"><img src="foto3.jpg" width=150 height=100 border=0></a>'
afbeelding[3]='<a href="#"><img src="foto4.jpg" width=150 height=100 border=0></a>'
afbeelding[4]='<a href="#"><img src="foto5.jpg" width=150 height=100 border=0></a>'

//Hieronder niets wijzigen
var kopieersnelheid=snelheid
afbeelding='<nobr>'+afbeelding.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+afbeelding+'</span>')
var huidige_breedte=''

function opvullen(){
if (iedom){
afb=document.getElementById? document.getElementById("test2") : document.all.test2
afb2=document.getElementById? document.getElementById("test3") : document.all.test3
afb.innerHTML=afb2.innerHTML=afbeelding
huidige_breedte=document.all? afb.offsetWidth : document.getElementById("temp").offsetWidth
afb2.style.left=huidige_breedte+4
}
else if (document.layers){
ns_slide=document.netscape.document.netscape2
ns_slide2=document.netscape.document.netscape3
ns_slide.document.write(afbeelding)
ns_slide.document.close()
huidige_breedte=ns_slide.document.width
ns_slide2.left=huidige_breedte+4
ns_slide2.document.write(afbeelding)
ns_slide2.document.close()
}
lefttime=setInterval("schuiflinks()",30)
}
window.onload=opvullen

function schuiflinks(){
if (iedom){
if (parseInt(afb.style.left)>(huidige_breedte*(-1)+8))
afb.style.left=parseInt(afb.style.left)-kopieersnelheid
else
afb.style.left=parseInt(afb2.style.left)+huidige_breedte+4

if (parseInt(afb2.style.left)>(huidige_breedte*(-1)+8))
afb2.style.left=parseInt(afb2.style.left)-kopieersnelheid
else
afb2.style.left=parseInt(afb.style.left)+huidige_breedte+4

}
else if (document.layers){
if (ns_slide.left>(huidige_breedte*(-1)+8))
ns_slide.left-=kopieersnelheid
else
ns_slide.left=ns_slide2.left+huidige_breedte+4

if (ns_slide2.left>(huidige_breedte*(-1)+8))
ns_slide2.left-=kopieersnelheid
else
ns_slide2.left=ns_slide.left+huidige_breedte+4
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+breedte+';height:'+hoogte+';overflow:hidden">')
write('<div style="position:absolute;width:'+breedte+';height:'+hoogte+';background-color:'+agrondkleur+'" onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+breedte+' height='+hoogte+' name="netscape" bgColor='+agrondkleur+'>')
write('<layer name="netscape2" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('<layer name="netscape3" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
[/js]
 
Laatst bewerkt door een moderator:
De breedte van de var breedte aanpassen en de width van de images aanpassen...
Als je dan ook de hoogte wilt aanpassen moet je de var hoogte en height van de images aanpassen..

Mvg, Ruben
 
Ik weet niet of het volgende is wat je zoekt, maar het zou wel een heel makkelijke oplossing kunnen zijn. Namelijk het html element MARQUEE.

Voorbeeld:
HTML:
<marquee>
  <img src="images/img1.jpg" alt="" />
  <img src="images/img2.jpg" alt="" />
  <img src="images/img3.jpg" alt="" />
</marquee>

Deze lichtkrant gebruikt standaard de hele breedte van het beeldscherm (of de div container waarin hij staat), maar als je wilt kun je hem met css nog opmaken om hem smaller, hoger, of bijvoorbeeld een andere kleur te geven.

(zie deze site voor meer informatie over marquee)

Ik hoop dat dit je geholpen heeft,
Ben
 
Marquee tool is niet html valid, aangezien het een goed werkende lichtkrant is kan hij volgens mij gewoon de breedtes van de images en de lichtkrant aanpassen en dan werkt het..

Ik heb mijn voorbeeld even online gezet:
http://ruben.site40.net/voorbeeld/

Mvg, Ruben
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan