Announcement

Collapse
No announcement yet.

[RESOLVED] Making an image unselectable?

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • [RESOLVED] Making an image unselectable?

    Hello all,

    I'm trying to make an image unselectable, when you press CTRL + A (select all) I don't want it to highlight blue or when you drag on the image. I can't find anything about it on google, and I've seen it done before.. anyone know how to do this?

    Thanks,
    Zaroth
    Last edited by Zaroth; 07-12-2011, 12:39 AM. Reason: Solved

  • #2
    In Firefox and Webkit you can set the CSS properties -moz-user-select and -webkit-user-select to none. This will restrict users from selecting text with the mouse or with CTRL-A, assuming there's no override in the user stylesheet.

    Code:
    <style>
    body {
    	-moz-user-select: none;
    	-webkit-user-select: none;
    	user-select: none;
    }
    </style>
    Internet Explorer and Opera only support the inferior, proprietary HTML attribute unselectable. When given a value of "on" these browsers don't allow the user to select text with the mouse, though CTRL-A will still select all inline content in the page. Additionally, the attribute isn't inherited, which means that you have to include it with every single element which you want to restrict. Make special note of paragraph four in the example below.

    HTML Code:
    <body>
    	<p unselectable="on">Lorem ipsum...</p>
    	<p unselectable="on">Dolor sit amet...</p>
    	<p unselectable="on">Consectetur adipisicing elit...</p>
    	<p unselectable="on">This can't be selected <i>(but this can)</i>.</p>
    </body>
    Internet Explorer and Webkit also respond to the onselectstart event. If you cancel the default action on this event, text selection with the mouse won't work. CTRL-A will still work, but at least this can be attached to the body element and not every single child like the previous method requires.

    Code:
    <script>
    window.onload = function() {
    	document.body.onselectstart = function() {
    		return false;
    	}
    }
    </script>

    Further reading:
    -moz-user-select property | -webkit-user-select property

    Comment

    Working...
    X