Bild-Wechsel | Webstatt.org Community

user-333

06.07.2007 15:55

Hallo zusammen,

ich habe folgende situation:

<div id="bild">

    <img src="bild1.jpg">

</div>



<a href="link1">link1</a>

<a href="link2">link2</a>

<a href="link3">link3</a>

Sobald ich mit der Maus über Link1 drüberfahre, soll bild1.jpg mit link1.jpg ersetzt werden - mit einem blendeffekt ähnlich wie bei den javascript-slideshows.

Wie kann ich so etwas machen?
Vorzüglich würde ich einen codeschnippsel nehmen, ansonsten gerne eine art schritt-für-schritt anleitung, wie ich das machen kann - evtl. vllt. tutorials?!

Vielen user-158k!

user-343

06.07.2007 16:05

Spontan einfallen würde mir:
- Neues Bild drüber legen mit voller Transparenz
- Altes Bild transparenter werden lassen, neues Bild weniger transperant werden lassen
- Fertig

Geht leider nicht in allen Browsern =/

user-290

06.07.2007 17:40

Ein Workaround für IE und Mozilla für diese Eigenschaften:
filter:Alpha()
-moz-opacity

Ich selbst hab keine Erfahrungen damit. Ich hab auch keine Ahnung was mit Opera ist lächeln

...du kannst auch warten, bis css3 vollständig fertig ist. Kann aber dauern ^^

user-343

06.07.2007 19:15

Eventuell unterstützen neuere Operas "opacity".

user-290

07.07.2007 00:50

Ich hab ma was gebastelt. Ist aber noch recht optimierungsbedürftig. Funktioniert aber bereits für IE und Firefox. Opera zickt noch, wie zu erwarten war.
Ich poste ma das Script hier rein und hänge eine Demo an mit Beispielbildern.
Hätte ich gewusst, dass das so lang würd, hätt ich damit garnicht erst angefangen Fettes Grinsen



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <meta name="generator" content="PSPad editor, www.pspad.com">

  <title></title>

  

  

  

  <script type="text/javascript">

  

/* ------------------ WEBSTATT.ORG ----------------------- */



  var Starterbild = "Bild1" //Name vom Starterbild eintragen!

  

  



  

  var check = 0; //Verhindert Mehrfachladen...





  // Browser-Check //

  function init(BildNr) {

    if(navigator.appName=="Netscape" {

    Bumper = new MozillaBumper(BildNr); return; }

    if(navigator.appName=="Microsoft Internet Explorer" {

    Bumper = new IEBumper(BildNr); return; }

  }

  

  // .... -> Mozilla Init //

  function MozillaBumper(BildNr) {

     if(MozSlider.BildName=='' {

    MozSlider.BildName=Starterbild; }

    if((BildNr==MozSlider.BildName) || (check==1)) { return; }

  check=1;

  MozSlider.BildName2=BildNr;

  document.images[BildNr].style.zIndex=0;

  MozSlider.HideWert=1.0;

  MozSlider.ShowWert=0;

  MozSlider.MozHide();

  MozSlider.MozShow();

  }

  

  // .... -> IE Init //

  function IEBumper(BildNr) {

  if(IESlider.BildName=='' {

  IESlider.BildName=Starterbild; }

  if((BildNr==IESlider.BildName) || (check==1)) { return; }

  check=1;

  IESlider.BildName2=BildNr;

  document.images[BildNr].style.zIndex=0;

  IESlider.HideWert=100;

  IESlider.ShowWert=0;

  IESlider.IEHide();

  IESlider.IEShow();

  

  }

  

  

  // Script für Mozilla //

 MozSlider = {

  

  HideWert : 0, ShowWert : 0,

  BildName : '', BildName2 : '',

  

  // Verstecke 1. Bild //

  MozHide : function() {

    MozSlider.HideWert-=0.03;

      if(MozSlider.roundedMzWert(MozSlider.HideWert)>0) {

      document.images[MozSlider.BildName].style.MozOpacity=MozSlider.roundedMzWert(MozSlider.HideWert);

      setTimeout("MozSlider.MozHide()", 100); }

        else { 

        document.images[MozSlider.BildName].style.MozOpacity=0; 

        document.images[MozSlider.BildName].style.zIndex=-1

        }

   },

   

   // Zeige 2. Bild //

   MozShow : function() {

     MozSlider.ShowWert+=0.03;

       if(MozSlider.roundedMzWert(MozSlider.ShowWert)<1) {

       document.images[MozSlider.BildName2].style.MozOpacity=MozSlider.roundedMzWert(MozSlider.ShowWert);

       setTimeout("MozSlider.MozShow()", 100); }

          else { 

          document.images[MozSlider.BildName2].style.MozOpacity=1;

          document.images[MozSlider.BildName2].style.zIndex=1;

          MozSlider.BildName=MozSlider.BildName2;

          check=0;

          }

     },

    

   // Del Rundungsfehler // 

   roundedMzWert : function(Wert) {

     Wert=Wert.toString();

     Wert=Wert.substr(0,4);

     return Wert;

   }

  

 },

 

 

  // Script für IE //

 IESlider = {

 HideWert : 100, ShowWert: 0,

 BildName : '', BildName2 : '',

 

 // Verstecke 1. Bild //

 IEHide : function() {

   IESlider.HideWert-=10;

      if(IESlider.HideWert>0) {

      document.images[IESlider.BildName].style.filter="Alpha(opacity="+IESlider.HideWert+"";

      setTimeout("IESlider.IEHide()", 100); }

        else { 

        

        document.images[IESlider.BildName].style.filter="Alpha(opacity=0)"; 

        document.images[IESlider.BildName].style.zIndex=-1

        }

        

      

   },

   

   // Zeige 2. Bild //

  IEShow : function() {

     IESlider.ShowWert+=5;

       if(IESlider.ShowWert<100) {

       document.images[IESlider.BildName2].style.filter="Alpha(opacity="+IESlider.ShowWert+"";

       setTimeout("IESlider.IEShow()", 100); }

          else { 

          document.images[IESlider.BildName2].style.filter="Alpha(opacity="+100+"";

          document.images[IESlider.BildName2].style.zIndex=1;

          IESlider.BildName=IESlider.BildName2;

          check=0;

          }

     }

   

 }

  

  </script>

  

  

  </head>

  <body>







<img name="Bild1" src="bild1.gif" style="z-index:1; position:absolute; left:10px; top: 10px;">

<img name="Bild2" src="bild2.gif" style="z-index:0; position:absolute; left:10px; top: 10px;">

<img name="Bild3" src="bild3.gif" style="z-index:-1; position:absolute; left:10px; top: 10px;">



<div id="Links" style="position:absolute; top: 400px;">

<a href="javascript:init('Bild1'">Link 1 </a><br>

<a href="javascript:init('Bild2'">Link 2 </a><br>

<a href="javascript:init('Bild3'">Link 3 </a><br>

<br>

</div>

  </body>

</html>

Gruß
René

user-333

07.07.2007 09:17

jaaaa.... mooin! Vielen Vielen Vielen user-158k!
Ich probier's direkt mal aus =)