Transparent div over text

Question

How do you put a (transparent) image over text to keep it from being selected? I want my students to type what they see, not just copy/paste.

I'm not worried about them viewing source and copy/pasting from there - if they're that savvy I don't need to worry about them knowing the material.

Perhaps you could make the text simply unselectable? http://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable — bozdoz, Dec 18 '11 at 21:07

David Thomas · Accepted Answer · 2011-12-18T22:45:17.487

I don't believe that this is a great idea, and nor will it work particularly well. Also, without seeing what elements you're using, I'm going to guess, with the following:

<p>Something not to copy...<img src="path/to/image.png" /></p>

CSS:

p {
    position: relative;
}

p img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

JS Fiddle demo.

A slightly easier way:

p {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JS Fiddle demo.

A slightly more reliable way (that doesn't rely on updated/'modern' browsers, but which isn't requested in your question, as it uses JavaScript:

var paras = document.getElementsByTagName('p');

for (var i=0, len=paras.length; i<len; i++){
    paras[i].onmousedown = function(){
        return false;
    };
}

JS Fiddle demo.

Dang David. This is a very complete answer. Thank you very much! — Phillip Senn, Dec 18 '11 at 22:22

score 0 · Answer 2 · answered Dec 19 '11 at 04:45

0

Could this be done in a simpler way using z-index? E.g. higher z-index value for the transparent image.

It's an interesting concept you are proposing, though perhaps not 'in the spirit' of website accessibility :-)

answered Dec 19 '11 at 04:45

Dale Rollinson

298
1
5
10

Transparent div over text

2 Answers2