Bilder
milla
- zu diesem forum
0 ossi0 milla0 Mathias Bigge0 Z.N.S.
0 Bilderbuch
Maxx- javascript
Hi
Ich würde gerne bilder auf meiner homepage
anzeigen, aber so das sie automatisch ablaufen
und immer an der selben stelle sind, ich meine
z.B. man sieht ein bild und nach 5 sek wechselt das bild
zu einen anderen u.s.w. vieleicht sogar mit einen
harmonischen übergang.
bloß mir fällt nicht ein wie man das codet und im
Inet hab ich auch nix gefunden deshalb frag ich euch mal
Ps: könnte man dan dort noch ein ein kommentar einfügen
ich mein das unter dem bild steht was man sieht.
hat da wer ne idee
hy du versuche ma bitte dieses scrip das müste funktionieren:
</head>
<body>
<script type="text/javascript">
//Breite der Grafiken (in Pixeln)
var trans_width='100px'
//Hoehe der Grafiken (in Pixeln)
var trans_height='75px'
//Anzeigedauer (1000=1 Sekunde)
var pause=3000
//Animationsgeschwindigkeit, je hoeher, desto schneller
var degree=10
var slideshowcontent=new Array()
// Grafiken und Links
// Syntax: grafik, optionaler Link, optionales Ziel (target)
slideshowcontent[0]=["1.gif", "http://www.grammiweb.de", "_new"]
slideshowcontent[1]=["2.gif", "", ""]
slideshowcontent[2]=["5.gif", "http://www.grammiweb.de", ""]
// Hintergrundfarbe
var bgcolor='white'
//// Keine weiteren Aenderungen erforderlich /////////////
var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideshowcontent[i][0]
}
var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
if (ie4||dom)
document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}
var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1
function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}
function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}
function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}
function jumptoslide(which){
curindex=which
rotateslide()
}
function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}
function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}
if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)
window.onload=startit
</script>
</body></html>
Liebe grüsse ossi
danke!!!!,
das doofe ist ur bin auf arbeit
und kann es erst gegen 15.30 ausprobieren,
aber ich werde noch mal schreiben ob es geklappt hat
Ps: hast du jetzt schnell geschrieben oder
wo haste das her
Hi milla,
Ps: hast du jetzt schnell geschrieben
Zwischen 9.23 und 9.37? *g*
Viele Grüße
Mathias Bigge
abend,
Ps: hast du jetzt schnell geschrieben
Zwischen 9.23 und 9.37? *g*
zwischen 9.23 und 9.37 g ?
ne, is klar dass das dann so schnell geht ;-)
mfg,
(tanz das)
Z.N.S.
Hallo,
Ich würde gerne bilder auf meiner homepage
anzeigen, aber so das sie automatisch ablaufen
und immer an der selben stelle sind, ich meine
z.B. man sieht ein bild und nach 5 sek wechselt das bild
zu einen anderen u.s.w. vieleicht sogar mit einen
harmonischen übergang.
das Beispiel von ossi ist ja ganz nett. Ich würde dir aber ein etwas einfacheres Script vorschlagen.
Kennst du das Bilderbuch? Es eignet sich hervorragend für das was du vorhast.
Wenn du jetzt neben dem manuellen Umblättern eine Automatik möchtest, kombinierst du das Ganze mit setTimeout()
HTH
Jochen