Jscript,... oder nur mit Flash

M

messias

Mitglied
Hi
Ich hab hier nen kleines Problem. Auf meiner Seite habe ich links eine Section mit dem großen Bild und rechts unten kleine Thumbnails. Ich möchte nun, dass bei KLick auf einem der Thumbnails das große Bild links langsam die deckkraft verliert und verschwindet und das Bild, dass rechts unten angeklickt wurde auf der linken seite an deckkraft zunimmt und den Platz des ersten Bildes einnimmt :X
So, ich weiss, dass so aehnliche Sachen ( deckkraft verringern, Diashow etc pp ) mit Jscript moeglich sind, habe aber noch kein tutorial zu meinem Problem gefunden. Die Suchfunktion konnt ich nicht benutzen, da ich nicht weiss, wie man das nennen könnte :)
Danke schon mal im vorraus!

nicholas
 
So wie hier:


  <HTML>
  <HEAD>
  <script type="text/javascript" language="javascript">
  <!--
  function changeImg(imgSrc)
    {
    if(navigator.appName.indexOf('Microsoft') > -1)
      {
      if(document.getElementById('div1').filters.alpha.opacity == "100")
        {
        document.getElementById('img2').src = imgSrc;
        fadeIn('div2');
        }
      else
        {
        document.getElementById('img1').src = imgSrc;
        fadeIn('div1');
        }
      }
    }
  function fadeIn(obj)
    {
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var fadeSpeed = 100;
    var opSpeed = 10;
    if(navigator.appName.indexOf('Microsoft') > -1)
      {
      if(document.getElementById(obj).filters.alpha.opacity <= (100-opSpeed))
        {
        if(obj == "div1")
          {
          div2.filters.alpha.opacity -= opSpeed;
          div1.filters.alpha.opacity += opSpeed;
          setTimeout("fadeIn('div1')",fadeSpeed);
          }
        else
          {
          div1.filters.alpha.opacity -= opSpeed;
          div2.filters.alpha.opacity += opSpeed;
          setTimeout("fadeIn('div2')",fadeSpeed);
          }
        }
      }
    }
  //-->
  </script>
  </HEAD>

  <BODY>
    <div id="div1" style="z-index:10; filter:alpha(opacity=100); width:72px; position:absolute; top:10px; left:10px">
      <img id="img1" src="bild1.gif" width="72" height="60">
    </div>
    <div id="div2" style="z-index: 5; filter:alpha(opacity=0); width:72px; position:absolute; top:10px; left:10px">
      <img id="img2" src="bild2.gif" width="72" height="60">
    </div>
    <br><br><br><br>
    <img src="bild1.gif" onclick="changeImg('bild1.gif')">
    <img src="bild2.gif" onclick="changeImg('bild2.gif')">
  </BODY>
  </HTML>


Mir war grad langweilig und ich liebe Herausforderungen, funktioniert aber bisher nur im IE. Ich weiss jedoch nicht, ob das bei so großen Bildern sinnvoll ist.
 
bei der groeße, die du hast, sieht es meiner meinung nach toll aus, ich werde es gleich mal beim unfertigen design ausprobieren! danke auf jeden fall :D wenn ich mir so den quelltext anschaue macht es sinn, aber selbst draufzukommen *kopf an die tischkante hau*
 
Original geschrieben von Gumbo
Das stimmt, aber ich hab mir schon sofort gedacht das es nur mit zwei Ebnenen geht.
Zum Vergrößern anklicken....

nope, es geht auch mit einer ebene. is sogar besser mit einer ebene, weil es kann mit 2 verschiedenen zu darstellugsfehlern kommen (wie bei mir)
->machs mit innerHTML

Und ich hoffe, dass ihr wisst, dass das nur mit dem IE geht!
 
Fhsalc, die Eigenschaft innerHTML von HTML-Elementen existiert nicht nur im IE, sondern seit Netscape 6/Mozilla auch dort, denn die unterstützen das DOM ebenfalls...

messias, SelfHTML birgt eine Antwort darauf, wie innerHTML für sowas genutzt werden kann.

Geist

P.S.:
Ton, nimm's mir nicht übel, als ich vor kurzem dich über Browserspezifität "belehrt" habe, dort kam es sicher so rüber, als ob eben obige Eigenschaft nur von der Engine des IE interpretiert werden könne...bezog sich aber in dem Falle dann eher auf die Verbreitung des DOM in den Browsern, denn auch dort sollte ggf. ein Hinweis gegeben werden, denke ich. :)
 
Ähm dann hab ich mich wohl falsch ausgedrückt, ich meinte natürlich die Filter

<edit>
Kacke:
Dass die Filter nicht einwandfrei funktionierten liegt nicht am Quellcode sondern an mir!
Irgendwie flimmert mein IE beim Scrollen und Markieren
Weiss jemand woran das liegen könnte (es ist nur im IE)
</edit>
 
Zuletzt bearbeitet von einem Moderator:
----
function Bildwechsel() {
if (Bild == 1) {
Bild = 2;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = Bild2.src;
document.all.Madrid.filters.blendTrans.Play();
}
else {
Bild = 1;
document.all.Madrid.filters.blendTrans.Apply();
document.all.Madrid.src = Bild1.src;
document.all.Madrid.filters.blendTrans.Play();
}
}
----
dieser teil macht mir noch zu schaffen, da ich auf meiner seite die thumbnails rechts unten habe und somit nicht mit if unf else arbeiten kann und eben auch nichtdie bilder als link benutzen kann wie in selfhtml gezeigt wird. wie kann ich nun machen, dass jeweils in das bild gewechselt wird, dass ich unten als thumbnail angeklickt habe ?
 
Nun ja ich gluabe, da würde ausnahmsweise mal :denken: weiterhelfen ;)

Wir (oder ich?) biete(n) uns auch gerna als Hilfe an :)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück