CSS slideshow - How can I add a link to the image? -

-

how can add link these images. i've tried many variations of slideshows find when add links starts not displaying every other image. in code below have links commented out. if remove links images display fine.

i have repeated images twice trying debug , have _parent tag in link because page displayed in iframe.

your appreciated. thank time reading post.

html

<div class="slider">     <a href="" target="_parent"><img class='photo' src="featuredproducts/on-semi-python-sensors-sm.png"/></a> </div>

css

.slider {     margin: 0;     width: 180px;     height: 1504px;     overflow: hidden;     position: relative; } .photo {     position: absolute;     -webkit-animation: round 16s infinite;     opacity: 0;     width: 100%; } @-webkit-keyframes round {     25% {         opacity: 1;     }     40% {         opacity: 0;     } }  .slider img:nth-child(4) {     -webkit-animation-delay: 12s;     -moz-animation-delay: 12s;     -ms-animation-delay: 12s;     -o-animation-delay: 12s;     animation-delay: 12s; }  .slider img:nth-child(3) {     -webkit-animation-delay: 8s;     -moz-animation-delay: 8s;     -ms-animation-delay: 8s;     -o-animation-delay: 8s;     animation-delay: 8s; }  .slider img:nth-child(2) {     -webkit-animation-delay: 4s;     -moz-animation-delay: 4s;     -ms-animation-delay: 4s;     -o-animation-delay: 4s;     animation-delay: 4s; }  .slider img:nth-child(1) {     -webkit-animation-delay: 0s;     -moz-animation-delay: 0s;     -ms-animation-delay: 0s;     -o-animation-delay: 0s;     animation-delay: 0s; }

the problem correctly links.
have <img> inside anchor, try hide img , leaves parent anchor visible.
impossiple after make image visible until left parent anchor hidden. see blank white area until time passes hide left anchor , new img can appear.
solution hide parent anchor of each img have right effect.
there 2 steps:
html : change class photo img anchor
css : change selector .slider a:nth-child(...)

this modified code works

<!doctype html> <html> <head> <title>test</title> <link rel="stylesheet" href="test.css" type="text/css"> </head> <body> <div class="slider"> <!-- <img class='photo' src="1.jpg" alt="" /> <img class='photo' src="2.jpg" alt="" /> <img class='photo' src="3.jpg" alt="" /> --> <a class='photo' href="http://www.google.com" target="_parent" ><img         src="1.jpg" alt="on semi python sensors" /></a> <a class='photo' href="http://www.youtube.com" target="_parent" ><img src="2.jpg" alt="" /></a> <a class='photo' href="http://www.pinterest.com" target="_parent" ><img src="3.jpg" alt="" /></a> <a class='photo' href="http://www.facebook.com" target="_parent" ><img src="4.jpg" alt="" /></a>  </div> </body> </html>

css

.slider { margin: 0; width: 180px; height: 1504px; overflow: hidden; position: relative; } .photo { position: absolute; -webkit-animation: round 16s infinite; opacity: 0; width: 100%; } @-webkit-keyframes round { 25% { opacity: 1; } 40% { opacity: 0; } }  .slider a:nth-child(4) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -ms-animation-delay: 12s; -o-animation-delay: 12s; animation-delay: 12s; }  .slider a:nth-child(3) { -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -ms-animation-delay: 8s; -o-animation-delay: 8s; animation-delay: 8s; }  .slider a:nth-child(2) { -webkit-animation-delay: 4s; -moz-animation-delay: 4s; -ms-animation-delay: 4s; -o-animation-delay: 4s; animation-delay: 4s; }  .slider a:nth-child(1) { -webkit-animation-delay: 0s; -moz-animation-delay: 0s; -ms-animation-delay: 0s; -o-animation-delay: 0s; animation-delay: 0s; }

Comments

Post a Comment

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

-
i have method method discussed , successful data entered 1 when more 1 can not database this programs my php form : <form class="form-horizontal" id="form-produk"> <div class="control-group" > <label class="control-label" for="kelas">kategori</label> <div class="controls"> <select class='form-control' name='id_kategori'> <?php $tampil=mysql_query("select * kategori order nama_kategori"); if ($id_kat==0){ echo "<option value=0 selected>- pilih kategori -</option>"; } while($w=mysql_fetch_array($tampil)){ if ($id_kat==$w[id_kategori]){ echo "<option value=$w[id_kategori] selected>$w[nama_kategori]</option>"; } else{ echo "<option value=$w[id_kategori]>$...
Read more

multithreading - Exception in Application constructor -

-
i wanna write snake game javafx , there exception don't know , want know how fix it. ( know it's not complete yet ) and want know , class extends application ( start override ) main in other programs? see , here not static void main bc didn't need, if want add main shoud do? it's exeption... exception in application constructor exception in thread "main" java.lang.nosuchmethodexception: main_snake.main([ljava.lang.string;) @ java.lang.class.getmethod(class.java:1819) @ com.intellij.rt.execution.application.appmain.main(appmain.java:125) and code : import javafx.animation.animationtimer; import javafx.application.application; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.canvas.canvas; import javafx.scene.canvas.graphicscontext; import javafx.scene.input.keyevent; import javafx.scene.layout.borderpane; import javafx.scene.paint.color; import javafx.stage.stage; import java.util.arraylist; /** * creat...
Read more

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -

-
i realize similar post others (e.g. this one ), there details missing posts might significant case. to start with, here's simplified program: #include "stdafx.h" #include <windows.h> #include <wincrypt.h> int _tmain(int argc, _tchar* argv[]) { // usage: certextract certpath char keyfile[] = "c:\\certificates\\public.crt"; byte lp[65536]; security_attributes sa; handle hkeyfile; dword bytes; pccert_context certcontext; sa.nlength = sizeof(sa); sa.lpsecuritydescriptor = null; sa.binherithandle = false; hkeyfile = createfile(keyfile, generic_read, file_share_read, &sa, open_existing, file_attribute_normal, null); if (hkeyfile) { if (readfile(hkeyfile, lp, getfilesize(hkeyfile, null), &bytes, null) && bytes > 0) { certcontext = certcreatecertificatecontext(x509_asn_encoding, lp, bytes); if (certcontext) { printf("yay...
Read more