CODEWITHSUNDEEP
css
Phillip Senn
Phillip Senn

Reputation: 47595

Transparent div over text

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.

Upvotes: 0

Views: 838

Answers (2)

Dale Rollinson
Dale Rollinson

Reputation: 308

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 :-)

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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.

Upvotes: 6

Related Questions