Links in CSS-Überblendung funktionieren nicht

beyou · 15 Oktober 2012

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.

threadi · 15 Oktober 2012

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?

Tronjer · 15 Oktober 2012

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.

beyou · 16 Oktober 2012

@ 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... .

Tronjer · 16 Oktober 2012

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>

beyou · 16 Oktober 2012

Wie meinst du das genau?

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

Bitte, wenn möglich, den ganzen Code hier posten... .

Tronjer · 16 Oktober 2012

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>

beyou · 16 Oktober 2012

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>

Tronjer · 16 Oktober 2012

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. ^^

Links in CSS-Überblendung funktionieren nicht

beyou

Neues Mitglied

threadi

Moderator

Tronjer

Senior HTML'ler

beyou

Neues Mitglied

Tronjer

Senior HTML'ler

beyou

Neues Mitglied

Tronjer

Senior HTML'ler

beyou

Neues Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge