I'm making an epub3 fixed layout. Basically it is an HTML/CSS absolute positioning.
I'm trying to link the images to a website but the link doesn't work. It only works in the third image (img.seed).
It doesn't work in Chrome or firefox for example.
Here is code snippet:
@font-face { font-family: "Source"; src: url("../fonts/Source.ttf"); }
body {
width: 800px;
height: 800px;
margin: 0;
background-color: #ffffff;
}
img {
position: absolute;
margin: 0;
z-index: -1;
height: auto;
width: auto;
}
p {
position: absolute;
z-index: 10;
margin: 0;
padding: 0;
font-family: "Source";
}
img.seed { top: 15.88%; left: 63.77%; }
img.bacteria { top: 15.39%; left: 7.32%; }
img.bee { top: 15.19%; left: 35.45%; }<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=800, height=800" />
<title>Tittle</title>
<link href="../Style/style.css" type="text/css" rel="stylesheet" />
</head>
<body epub:type="backmatter bibliography">
<a href="http://www.booksbeck.com/travelling-seeds"><img class="seed" src="../Image/P999_seed.jpg" alt="page 23" /></a>
<a href="http://www.booksbeck.com/bees-like-flowers"><img class="bee" src="../Image/P999_bee.jpg" alt="page 23" /></a>
<a href="http://www.booksbeck.com/meet-bacteria"><img class="bacteria" src="../Image/P999_bacteria.jpg" alt="page 23" /></a>
</body>
</html>https://jsfiddle.net/chuux72f/
body {
width: 800px;
height: 800px;
margin: 0;
background-color: #ffffff;
}
a {
position: absolute;
}
a.seed {
top: 15.88%;
left: 63.77%;
}
a.bacteria {
top: 15.39%;
left: 7.32%;
}
a.bee {
top: 15.19%;
left: 35.45%;
}
remove your z-index and target the anchor tags, not the imgs