There is a manuscript book. I need to publish this book in the website. I have text version of this book, and I have the letter positions on the page. I'm trying to let users to select the text over the page image. But users must see only manuscript page image. I did a little workaround like that:
<div style="background:url(manuscript_page_with_text.jpg)">
<p style="color: transparent; position: relative; top:...px; left:...px">The text of the page</p>
</div>
I can move this transparent text to exact position on the page image which contains manuscript version of the text. But, when I select the text, it appears over the page image.
When a user selects the text on the image, he/she must see only selection color over the image and actually must select the hidden text. By this way, users can use text operations like ctrl+c.
I need a CSS or Javascript solution for this work. I'm waiting your precious answers.
It seems like this page has the solution:
p::-moz-selection { color: transparent }
p::-webkit-selection { color: transparent }