Links: Image replacement methods
Hello,
are there any CSS methods for image replacement that work for epub files?
I tried something like:
a {
background: url(images/linkArrow.png) no-repeat left center;
display: block;
float: left;
height: 14px;
text-indent: -5000px;
width: 14px;
}
which lets the image appear and the text disappear, but unfortunately the link is not working anymore (in ADE). I guess Digital Editions (and maybe the Sony Reader, too) moves the "hot area" of that link together with the text outside of the screen.
I tried as well:
a {
background: url(images/linkArrow.png) no-repeat left center;
display: block;
float: left;
height: 14px;
overflow: hidden;
padding-top: 16px;
width: 14px;
}
Without "overflow: hidden;" the image appeared, but the text that is pushed down by the padding-top was visible as well. But with "overflow: hidden;" the arrow and the topmost part of the link text disappear and only the lower portion of the text are visible.
For now I will have to insert the images directly into the links and delete the text. For future versions of course I would like to do this with CSS, because the way the link text is still there, only invisible.
But is there a CSS method that works in ADE and Sony Reader?
Best regards,
Christian Kirchhoff
|