Hintergrundbild einblenden/ausblenden (statt Flash)

[mr.jones]

Hallo Community

Ich suche nach einer Möglichkeit, Flash zu umgehen - und zwar geht es lediglich um einen Effekt des Hintergrundbildes, das sich beim Laden der Seite einblenden und beim Verlassen der Seite wieder ausblenden soll. Möglich wäre auch, den gesamten Seiteninhalt aus- und wieder einzublenden.

Gibt es da mit Bordmitteln oder einfach möglichst simpel eine Lösung?

Vielen Dank im Voraus
Richard Jones

[wiese]

Mootools?!

http://demos.mootools.net/Mouseenter

den Effekt vielleicht, weiß jetzt nicht direkt was du gerne haben möchtest. Musst es halt an deine Seite anpassen..

[mr.jones]

Danke - ich bin zuwenig vertraut mit mootools um abzuschätzen, wie weit "Mouseenter" und "Beim Laden und Verlassen der Seite" miteinander zu tun haben.

Meine Frage war: "Hintergrundbild, das sich beim Laden der Seite einblenden und beim Verlassen der Seite wieder ausblendet" - lässt sich das mit Mootools umsetzen?

[schman]

Ich kenne mich selbst nicht mir mootools aus, bin aber fast sicher das sich das realisieren lässt. was meint den dr google dazu?

[JanoschSkuplik]

Hallo Richard Jones,

ich hatte mal sowas ähnliches mit Mootools realisiert. War zwar kein Faden eines Hintegrundbildes, sondern das "einfliegen" des Inhaltes eines divs.

Hier der Code von damals, vielleicht hilft dir das ja weiter:

window.addEvent('domready', function() {
  $('slideOut').setStyle('margin-left', 600);
  var a = new Date();
  a = new Date(a.getTime() +1000*60*60*24*365);	
  document.cookie = '1a-javascript=1; expires='+a.toGMTString()+';';  
  //Cookie wird von css.php abgefangen und verhindert ein "Flackern" beim Reload
});
  

window.addEvent('domready', function(){

  var marginChange = new Fx.Morph('slideOut', {duration:1000});
  marginChange.start({'margin-left': [600,0]});
  
  $$('a').each(function(link){

    link.addEvent('click',function(e){
    var check = (this.className.indexOf('slide'));
    if(check==0){
    e = new Event(e);
    var get_direction = this.href;
    toggle_jsk(get_direction);
	  e.stop();
    }
    });
  });
}); 


function   toggle_jsk(direction){

    var myFx = new Fx.Slide('slideOut', {
    mode: 'horizontal',
    duration: 300,
    onComplete: function(){
         window.location.href = direction;
    }
    }).slideOut();
}

Hier müsstest du sicherlich die Angaben zum slide in die passenden von fade umbasteln. Auch die Elemente (Klassen, IDs, usw) werde natürlich nicht passen.

Vielleicht hilft dir dies ja als Input.

Gruß Janosch

[mr.jones]

Danke - ich werde damit mal herumbasteln. Ich habe - zumindest im Moment - noch keine Ahnung, wie ich das Bild in den Hintergrund bringe oder dem eine Klasse oder eine ID zuweisen kann...

[JanoschSkuplik]

Ich habe - zumindest im Moment - noch keine Ahnung, wie ich das Bild in den Hintergrund bringe

Vielleicht, indem du dem Element eine ID zuordnest (siehe unten) und dann per css passend positionierst und per z-index die Ebenen passend "stapelst".

oder dem eine Klasse oder eine ID zuweisen kann...

Auf welche Art und Weise möchtest du das Hintergrundbild denn gerne einfügen (Modul, ContenElement, HardCodiert,...)? Bei den meisten Möglichkeiten hast du doch die Möglichkeit direkt eine css-Klasse oder -ID einzugeben. Wichtig ist nur, dass die für diesen Zweck das Hintergrundbild nicht als Hintegrund von body, #container oder #wrapper hast, da du diese dann ja auch mit ausfaden würdest. Es sei denn, du willst dies auch ;-)

Gruß Janosch