• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Links in CSS-Überblendung funktionieren nicht

B

beyou

Neues Mitglied
Moin,

ich sitze an einer CSS-Slideshow - die funktioniert auch schon richtig großartig, nun möchte ich bloß noch, daß die einzelnen Bilder jeweils mit einer separaten Verlinkung versehen werden.

Dachte ich, nehm ich den HTML-Code her, da stehen die Bilder einzeln aufgelistet in <div>-Elementen. Also mit <a href></a> die <img src=""> "eingekreist", und dann dachte ich, sollte das funktionieren.

Das war falsch, nur die Verlinkung mit dem höchsten z-index funktioniert - alle anderen werden ignoriert.

Der HTML-Code sieht folgendermaßen aus:

<div id="1" class="shadow" style="z-index:1"><a href="http://cgi.ebay.de/1"><img src="gransfors.jpg"></a></div>
<div id="2" class="shadow" style="z-index:2"><a href="http://cgi.ebay.de/2"><img src="induktionskochfeld.jpg" /></a></div>
<div id="3" class="shadow" style="z-index:3"><a href="http://cgi.ebay.de/3"><img src="karcher.jpg" /></a></div>
<div id="4" class="shadow" style="z-index:4"><a href="http://cgi.ebay.de/4"><img src="vakuumierer.jpg" /></a></div>
<div id="5" class="shadow" style="z-index:5"><a href="http://cgi.ebay.de/5"><img src="schneeschieber.jpg" /></a></div>

Das CSS Sheet


#stage{position:relative;height:281px;width:450px;margin:0 auto;} #stage div {position:absolute;left:60;} @-webkit-keyframes cf4FadeInOut { 0% {opacity:1;} 13% {opacity:1;} 20% {opacity:0;} 93% {opacity:0;} 100%{opacity:1;} } @-moz-keyframes cf4FadeInOut { 0% {opacity:1;} 13% {opacity:1;} 20% {opacity:0;} 93% {opacity:0;} 100% {opacity:1;} } @-o-keyframes cf4FadeInOut { 0% {opacity:1;} 13% {opacity:1;} 20% {opacity:0;} 93% {opacity:0;} 100% {opacity:1;} } @keyframes cf4FadeInOut { 0% {opacity:1;} 13% {opacity:1;} 20% {opacity:0;} 93% {opacity:0;} 100% {opacity:1;} } #stage div { -webkit-animation-name: cf4FadeInOut; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 15s; -moz-animation-name: cf4FadeInOut; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 15s; -o-animation-name: cf4FadeInOut; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count: infinite; -o-animation-duration: 15s; animation-name: cf4FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 15s; }
#stage div:nth-of-type(1) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; }
#stage div:nth-of-type(2) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; animation-delay: 9s; }
#stage div:nth-of-type(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; animation-delay: 6s; }
#stage div:nth-of-type(4) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; animation-delay: 3s; }
#stage div:nth-of-type(5) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }
Witzigerweise funktioniert die Verlinkung, sobald das CSS-Sheet außen vor ist.

Mit der Bitte um Hilfe,

B.
 
Ich verstehe die Frage nicht wirklich. Könnte vlt. auch an den merkwürdig formatierten Quellcode liegen die Du hier platziert hast. Könntest Du die vlt. formatiert hier einfügen oder (besser noch) einen Link zur Seite zeigen damit man sich das mal vorstellen kann?
 
Hmm, ich würde mal Folgendes versuchen:

- Die keyframes nicht auf #stage, sondern in eine Klasse und diese dann allen Bildern zuweisen.
- anstatt nth-of-type() fünf unterschiedliche CSS-Klassen mit den jeweiligen Werten für animation.
 
@ threadi:

konkret geht es um 5 Bilder, die hintereinander mit einer Überblendung dargestellt werden. Dabei handelt es sich um eBay-Angebote - und jedes Angebot (ergo: Bild) soll mit dem jeweiligen eBay-Angebot im Web per Link verknüpft werden. Die Bilder werden mit dem Z-Index gestapelt, dabei ergibt sich jedoch die Problematik, daß nur der Link des Bildes mit dem höchsten Z-Index funktioniert - alle anderen Links werden ignoriert.

Nehme ich das CSS raus, funktionieren die Links, aber nicht mehr die Animation - logischerweise.

@ Tronjer:

Kannst du das, was du da vorschlägst, etwas deutlicher oder anders formulieren? Was muß ich wo genau ändern? Sorry, bin Anfänger im CSS-Animationsbereich... .
 
Ich habe es mir noch mal angeschaut und man kann auch bei Verwendung von Klassen wohl nicht dieselben keyframes gleichzeitig mehrfach aufrufen. Die richtige Syntax müsste dann so aussehen, auch wenn das mit den ganzen vendor prefixes natürlich elend lang wird.

HTML: 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #imageOne {
      -moz-animation: imageOne 5s
    }
    
    #imageTwo {
      -moz-animation: imageTwo 5s
    }
    
    @-moz-keyframes imageOne{
      0% {opacity: 0;}
      100% {opacity: 1;}
    }
    
    @-moz-keyframes imageTwo{
      0% {opacity: 0;}
      100% {opacity: 1;}
    }
</style>
</head>
<body>
    <a><img id="imageOne" src="eins.jpg" /></a>
    <a><img id="imageTwo" src="zwei.jpg" /></a>
</body>
</html>
 
Wie meinst du das genau?

Bin Anfänger in dem Bereich der CSS Animation... .

Bitte, wenn möglich, den ganzen Code hier posten... .
 
Zuletzt bearbeitet:
Das wäre ein Wall of Text und etwas Eigeninitiative solltest du schon bringen. Zumal du den Code ja bereits geschrieben hast und diesen nur erweitern und umbauen musst.

Jedes image erhält eine eigene ID, deren Name mit der Animation und den dazugehörigen Keyframes korrespondiert. Das ist doch nicht schwer zu verstehen.

HTML: 
#imageOne {
      -moz-animation imageOne: // Hier die Werte für die Animation
    }

@-moz-keyframes imageOne{
      0% {}
      100% {} // Hier das CSS für die Keyframes
    }

<a><img id="imageOne" src="eins.jpg" /></a>
 
Zuletzt bearbeitet:
Der CSS-Code sieht nun so aus:

Code: 
    #stage{position:relative;height:auto;width:960px;margin:0 auto;}
    #stage div {position:absolute;left:60;}
#1
    @-webkit-keyframes cf4FadeInOut {
        0%  {opacity:1;}
        17% {opacity:1;}
        20% {opacity:0;}
        97% {opacity:0;}
        100%{opacity:1;}
    }
    @-moz-keyframes cf4FadeInOut {
        0% {opacity:1;}
        17% {opacity:1;}
        20% {opacity:0;}
        97% {opacity:0;}
        100% {opacity:1;}
    }
    @-o-keyframes cf4FadeInOut {
        0% {opacity:1;}
        17% {opacity:1;}
        20% {opacity:0;}
        97% {opacity:0;}
        100% {opacity:1;}
    }
    @keyframes cf4FadeInOut {
        0%  {opacity:1;}
        17% {opacity:1;}
        20% {opacity:0;}
        97% {opacity:0;}
        100% {opacity:1;}
    }
#2 
 ...
#3 
 ...
#4 
 ...
#5 
 ...
                    
#1 div {
    -webkit-animation-name: cf4FadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 35s;

    -moz-animation-name: cf4FadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 35s;

    -o-animation-name: cf4FadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 35s;

    animation-name: cf4FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 35s;
    }
#2 div {
  ...
#3 div {
  ...
#4 div {
  ...
#5 div {
  ...

#1 div:nth-of-type(1) {
            -webkit-animation-delay: 28s;
            -moz-animation-delay: 28s;
            -o-animation-delay: 28s;
            animation-delay: 28s;
        }
    

#1 div:nth-of-type(2) {
            -webkit-animation-delay: 21s;
            -moz-animation-delay: 21s;
            -o-animation-delay: 21s;
            animation-delay: 21s;
        }
    

#1 div:nth-of-type(3) {
            -webkit-animation-delay: 14s;
            -moz-animation-delay: 14s;
            -o-animation-delay: 14s;
            animation-delay: 14s;
        }
    

#1 div:nth-of-type(4) {
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }
    

#1 div:nth-of-type(5) {
            -webkit-animation-delay: 0s;
            -moz-animation-delay: 0s;
            -o-animation-delay: 0s;
            animation-delay: 0s;
        }

#2 div:nth-of-type(1) {
         ...
        
#3 div:nth-of-type(1) {
         ...

#4 div:nth-of-type(1) {
          ...

#5 div:nth-of-type(1) {
           ...

im HTML:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK REL="stylesheet" TYPE="text/css" HREF="stylesheet3.css">

<title>Fader</title>
</head>

<body>
<div id="stage">
<div id="1" class="shadow" style="z-index:1"><img src="gransfors.jpg" /></div>
<div id="2" class="shadow" style="z-index:2"><img src="induktionskochfeld.jpg" /></div>
<div id="3" class="shadow" style="z-index:3"><img src="karcher.jpg" /></div>
[B]<a href="http://ebay.de"><div id="4" class="shadow" style="z-index:4"><img src="vakuumierer.jpg" /></div></a>[/B]
<div id="5" class="shadow" style="z-index:5"><img src="schneeschieber.jpg"/></div>
</div>
</body>
</html>
 
Lass mich raten, es funktioniert immer noch nicht?

Warum nimmst du nicht mein posting #4 als Template und vollziehst das mit einem einzigen Bild nach? Ansonsten gibt es hier auch eine einfache und kurze Erläuterung zu CSS animations.

CSS3 Animations

Möchtest du hingegen, dass dir jemand den kompletten Code schreibt, dann musst du den Auftrag in die Jobbörse stellen. Das wäre dann eine angefangene Arbeitsstunde. ^^
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben