Ergebnis 1 bis 7 von 7
  1. #1
    pogonaut ist offline Grünschnabel
    registriert
    20-02-2014
    Beiträge
    5

    Question Links einfügen in sehr einfache Slideshow! (CODE INSIDE)

    hey leute.

    Ich bin neu und versuche gerade JS zu erlernen.

    Habe eine Slideshow die 6 bilder nacheinander anzeigt per ausblenden effekt.

    jetzt möchte ich, das jedes bild einen eigenen link bekommt.
    ein einfaches href vor den eingebettenen img tags klappt nicht!


    wer kann mir helfen???

    Habe den ganzen Code beigelegt:

    ----

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    
      <script type="text/javascript">
            function fade(step) {
                var imgs = document.getElementById("meinFader").getElementsByTagName("img");
    
                step = step || 0;
    
                imgs[counter].style.opacity = step/100;
                imgs[counter].style.filter = "alpha(opacity=" + step + ")"; // 
    
                step = step + 2;
    
                if (step <= 100) {
                    window.setTimeout(function () { fade(step); }, 1);
                } else {
                    window.setTimeout(next, 4500);
                }
            }
    
            function next() {
                var imgs = document.getElementById("meinFader").getElementsByTagName("img");
    
                if (typeof(counter) != "number") {
                    counter = 0;
                }
    
                counter++;
    
                if (counter < imgs.length) {
                    fade();
                }
            };
    		
    
        </script>
    
    </head>
    
    <body text="#333" link="#333" vlink="#FF5C49" alink="#333">
    <center>
    <table width="950" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="720" colspan="2" align="left" valign="bottom">
        
    <div id='cssmenu'>
    <ul>
       <li class='has-sub'><a href='index.html'><span>
      <br />Immobilienservice</span></a>
          <ul>
             <li><a href='kaufen-verkaufen.html'><span>Verkaufen / Kaufen</span></a></li>
             <li><a href='mieten-vermieten.html'><span>Mieten/Vermieten</span></a></li>
             <li><a href='marktwertanalyse.html'><span>Marktwertanalyse</span></a></li>
             <li><a href='seniorenservice.html'><span>Seniorenservice</span></a></li>
             <li><a href='sanieren.html'><span>Sanieren</span></a></li>
             <li class='last'><a href='tippgeber.html'><span>Tippgeber</span></a></li>
          </ul>
       </li>
       <li class='has-sub'><a href='hausverwaltung.html'><span><br />
    Hausverwaltung</span></a>
          <ul>
             <li><a href='hausverwaltung.html'><span>Hausverwaltung</span></a></li>
             <li class='last'><a href='leistungen.html'><span>Leistungen</span></a></li>
          </ul>
       </li>
          <li><a href='ueber-uns.html'><span><br />
    Über uns</span></a></li>
       <li><a href='/angebote' target="_blank"><span><br />
    Angebote</span></a></li> <li><a href='kontakt.html'><span><br />
    Kontakt</span></a></li>
    </ul>
    </div>
        </td>
        <td width="230" align="right"><a href="index.html"><img src="img/testprojekt-immobilien-logo.png" width="270" height="160"  border="0" alt="testprojekt Immobilien" /></a></td>
      </tr>
      <tr>
        <td colspan="3" bgcolor="#333333"><img src="img/trennbalken.jpg" width="950" height="5" alt="testprojekt" /></td>
      </tr>
      <tr>
        <td colspan="3" bgcolor="#262626">
        
          <p id="meinFader">
           <img src="slideshow/5.jpg" alt="Slideshow bild">
             <img src="slideshow/2.jpg" alt="Slideshow bild" class="next">
            <img src="slideshow/3.jpg" alt="Slideshow bild" class="next">
            <img src="slideshow/4.jpg" alt="Slideshow bild" class="next">
            <img src="slideshow/5.jpg" alt="Slideshow bild" class="next">
            <img src="slideshow/6.jpg" alt="Slideshow bild" class="next">
            <img src="slideshow/7.jpg" alt="Slideshow bild" class="next">
        </p>
        
        </td>
      </tr>
      <tr>
        <td colspan="3"><img src="img/trennbalken.jpg" width="950" height="5" alt="testprojekt" /></td>
      </tr>
      <tr class="teaser">
        <td width="33%">
    	
    	
    <script type="text/javascript">next();</script>
    </body>
    </html>
    ----

    DANKE SEHR

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.681

    AW: Links einfügen in sehr einfache Slideshow! (CODE INSIDE)

    Eigentlich sollte es funktionieren, wenn du jedes <img> in ein <a href="URL"> packst.

    PS: globale Variablen, besonders solche mit häufig verwendeten Namen, wie "counter", sind eine große Fehlerquelle für schwer zu findende Fehler.
    PPS: wie versteckst du denn die <img>s am Anfang? Ich habe den Verdacht, dass da das Problem liegt.
    PPPS: Das alte Bild wird ja gar nicht wieder ausgeblendet...

  3. #3
    pogonaut ist offline Grünschnabel
    registriert
    20-02-2014
    Beiträge
    5

    AW: Links einfügen in sehr einfache Slideshow! (CODE INSIDE)

    Naja, habe das script aus einem beispiel - kann da nicht soviel zu sagen nur das es funzt!

    das mit den A HREF vor <img> klappt nicht (keine sorge, korrekt geschrieben war es - kann html aber kein JS)


    Andere idee?
    brauche wirklich hilfe, kann ggf. bisschen dafür zahlen

  4. #4
    Poehli ist offline Doppel-As
    registriert
    18-04-2009
    Beiträge
    111

    AW: Links einfügen in sehr einfache Slideshow! (CODE INSIDE)

    Die Lösung sollte funktionieren, zeig mal den Code.

    Meiner Meinung nach aber keine schöne Lösung, besser (ich sag besser und nicht gut) fände ich es wenn man in JavaScript einen Listener aufstellt, und dann window.location ändert oder sowas in der Art. Und da du gleich am Anfang sagtest du wollest JavaScript erlenern, bringt es dir ja nichts mit irgendwelchen Tags um dich zu werfen
    Wenn du keine Library verwenden willst würde es in etwa so aussehen:

    PHP-Code:
    document.getElementById("Bildid").onclick = function (event){ window.location="blabla.html"; };

    oder

    var elements document.getElementsByTagName("Tag"); 
    for (var 
    0elements.lengthi++){
        
    elements[i].onclick = function (even){ window.location "blablubb.html";}

    Das kann natürlich beliebig geändert werden. Z.b. kannst du ein eigenes Attribut einführen, in dem der Link steht, oder du generierst dir ein Array, mit dazugehörigen Links, oder oder oder...
    Kleiner Hinweis, den ich früher gerne gehabt hätte: Javascript läuft auch dann ab, wenn die Seite noch nicht fertig geladen ist. Heißt also, guck dir das onload event genau an.

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.681

    AW: Links einfügen in sehr einfache Slideshow! (CODE INSIDE)

    @Poehli: warum soll es besser sein, etwas kompliziert in JS zu machen, wenn das in HTML viel einfacher und konsistenter funktioniert?

  6. #6
    Sempervivum ist offline Banned
    registriert
    11-12-2012
    Beiträge
    555

    AW: Links einfügen in sehr einfache Slideshow! (CODE INSIDE)

    Habe auch den Eindruck, dass da das CSS fehlt.
    Dein Problem mit den Links liegt wahrscheinlich an folgendem: Die Bilder liegen alle übereinander. Wenn man jetzt draufklickt, wirkt der Klick auf das oberste Bild, auch wenn es transparent und nicht sichtbar ist.
    Die Lösung für dieses Problem findest Du hier:
    css - Click through a DIV to underlying elements - Stack Overflow
    d. h. wenn ein Bild vollständig transparent ist, muss du pointer-events:none darauf setzen.

  7. #7
    Sempervivum ist offline Banned
    registriert
    11-12-2012
    Beiträge
    555

    AW: Links einfügen in sehr einfache Slideshow! (CODE INSIDE)

    PS: Sehe gerade, dass pointer-events vom IE nicht unterstützt wird. visibility:hidden müsste bei dir aber denselben Zweck erfüllen:
    css - javascript - does a click event fire on an element if it&#39;s not visible? - Stack Overflow

Ähnliche Themen

  1. Code im schon vorhandenen Code einfügen?
    Von bossy im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 05-11-2011, 01:20
  2. html code in diesen... Java script code einfügen
    Von Jenny123456 im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 09-02-2011, 16:29
  3. einfache Slideshow
    Von Cobra 11 Modder im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 09-09-2010, 22:43
  4. Ajax Slideshow mit Links
    Von Hannynanny im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 04-10-2006, 12:01
  5. Links als Slideshow
    Von TurboLarsen im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 03-03-2001, 00:44

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •