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.
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%; } A slightly easier way:
p { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } 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; }; } 
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 :-)
