>> Startseite >> Scripting >> Bildwechsel mit weichem Übergang**

Bilderwechsler mit weichem Fadingübergang in Netobjects

Ein einfacher Bildwechsler mit weichen Übergang. Eine nette Übung um erste eigene HTML-Befehle in Netobjects Fusion einzufügen und sich etwas mit der Asset-Verwaltung zu beschäftigen.

Vorbereitungen:

Der Wechsler besteht aus zwei Scriptschnipseln, die sich ohne Probleme einfügen lassen - einfach die in verschiedene Bereiche des Layout-HTML kopieren. Alle Bilder sollten die gleichen Maße haben. Damit die Bilder im Asset-Ordner integriert sind, müssen sie entweder als Asset eingebunden (siehe hier) werden oder auf einer Unterseite die von der Navigation ausgeschlossen ist, eingefügt werden.

Dieser Schnipsel kommt between Headtags

wir drücken F9, um das Layout-Eigenschaftenfenster zu öffnen und drücken auf den HTML-Button - es öffnet sich ein Fenster - dort auf den Reiter zwischen den Head-Tags

////ab hier muss nix mehr geändert werden/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>

Bei fadeimages müsst ihr natürlich eure Bildnamen eintragen, für weitere Bilder einfach entsprechend weiterzählen.

Startseite oder Unterseite: Bild richtig referenzieren

Der obige Code gilt für Unterseiten bei Publzierung nach Assets (die normale Voreinstellung in NOF) . Der Pfad für die Bilder muss nicht geändert werden. Möchtest ihr den Bildwechsler auf der Startseite integrieren muss ein Punkt entfernt werden. Wer Probleme mit dem Referenzieren des Bildpfades hat, sollte sich hier einlesen

Für die Startseite: ./assets/images/bild.jpg
Für die Unterseiten: ../assets/images/bild.jpg

Achtet unbedingt auf:

Groß/kleinschreibung im Namen und Datei-Endung muss identisch sein

keine Umlaute, Leerzeichen oder Sonderzeichen im Namen des Bildes

Die Bilder lassen sich verlinken und wenn gewünscht lässt sich auch das Ziel angeben. Achtet auf die Kommentare hinter den Bildpfaden im ersten Scriptschnipsel.

Dieser Schnipsel kommt an die gewünschte Stelle - entweder ins HTML eines Textfeldes oder einer Tabellenzelle

Folgende Änderungen sind möglich

    * 140 ist die Breite
    * 225 ist die Höhe
    * 0 ist kein Rahmen - ansonsten 1 ist 1px breit und so weiter
    * 3000 ist die Delay-Zeit in Millisekunden - 3000 ist also 3 Sekunden
    * 1 heißt: das Bild bleibt bei Mouseover stehen - ansonsten hier 0 eintragen
    * R heißt, dass die Reihefolge der Bilder zufällig ist - ansonsten einfach rausnehmen

fertisch

Wer sich auskennt kann nach seinen Bedürfnissen anpassen - das Originalscript (englisch) zeigt, wie sich mehrere Bilder auf einer Seite faden lassen - als Denkansatz für vielfältige Spielereien - siehe hier http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

dieses tutorial

version: alle versionen
Schwierigkeitsgrad: mittel
Bildmaterial: Nettes Ekel

Neue Tutorials

Suchfunktion einbauen
MLR kopieren
SuMa-Optimierung
Alle Filme wieder online
Weicher Bildwechsler mit Text
Die 2-Minuten-Newsbox
Das erste eigene Buttonset
Datepicker für Formulare
Includieren in NOF
Bildkomprimierung
Publizierungseinstellungen
Assetverwaltung

Content Management für Netobjects Fusion

Inhalte und Bilder ohne NOF aktualisieren
Fusion Content 3

Shop für Netobjects Fusion

Der kleine nahtlose Shop für eure NOF-Projekte
dank php und einer Datenbank ist eure NOF-Datei schlank und alle Daten bleiben bei eventuellen Crashes oder Layoutumstellungen unberührt
NOF-Shop 1.1

Haste mal nen Euro?

Die NOF-Tips sind werbefrei
Wenn die Tutorials geholfen haben, freuen wir uns auf deine kleine Spende via PayPal an paby@paby.de

Online-Support

Werktags: 9.00 - 14.00h
0160 37 87 652
WE oder Abends nach Absprache möglich
Schnelle Hilfe via Online-Tool 1,00 euro/min

Schulungen & Seminare

Online-Schulungen ab 35,00 Euro/Std.

Friendship (suma-hilfe)

Burlesque Korsetts und mehr
Triumed
Lebensfreude-konzept
Sportfotos
Fliegenruten