• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

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

P

pogonaut

New member
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
 
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...
 
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
 
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: 
document.getElementById("Bildid").onclick = function (event){ window.location="blabla.html"; };

oder

var elements = document.getElementsByTagName("Tag"); 
for (var i = 0; i < elements.length; i++){
    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.
 
@Poehli: warum soll es besser sein, etwas kompliziert in JS zu machen, wenn das in HTML viel einfacher und konsistenter funktioniert?
 
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.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben