I have looked all over the internet, but have found nothing that works.

I want my image not to be selected, like a div with a background image (<div style = "background-image : 'moo.png';"> </div>)

I can't use a background image, because I need an image map for functionality.

my code looks like this:

css,

.filmmakers #map {

-moz-user-select : -moz-none;
-khtml-user-select : none;
-webkit-user-select : none;
-ms-user-select : none;
-o-user-select : none;
user-select : none;

}

.filmmakers #map::selection {

   color : rgba(0, 0, 0, 0);

}

html,

<img id = "map" src = "WorldMap.png" alt = "Map" unselectable = "on" style = "left : 0px; top : 0px;" />

javascript,

var map = document.getElementById('map');

makeUnselectable(map);

function makeUnselectable(node) {

if (node.nodeType == 1) {

   node.setAttribute("unselectable", "on");

}

   var child = node.firstChild;

while (child) {

   makeUnselectable(child);
   child = child.nextSibling;

}

}

As you can see, I still get the drag icon and it messes with the functionality of the map:

.html

Please help and thanks for taking the time to read my post, I really appreciate your kind attention.

Cheers!

Mithos

I have looked all over the internet, but have found nothing that works.

I want my image not to be selected, like a div with a background image (<div style = "background-image : 'moo.png';"> </div>)

I can't use a background image, because I need an image map for functionality.

my code looks like this:

css,

.filmmakers #map {

-moz-user-select : -moz-none;
-khtml-user-select : none;
-webkit-user-select : none;
-ms-user-select : none;
-o-user-select : none;
user-select : none;

}

.filmmakers #map::selection {

   color : rgba(0, 0, 0, 0);

}

html,

<img id = "map" src = "WorldMap.png" alt = "Map" unselectable = "on" style = "left : 0px; top : 0px;" />

javascript,

var map = document.getElementById('map');

makeUnselectable(map);

function makeUnselectable(node) {

if (node.nodeType == 1) {

   node.setAttribute("unselectable", "on");

}

   var child = node.firstChild;

while (child) {

   makeUnselectable(child);
   child = child.nextSibling;

}

}

As you can see, I still get the drag icon and it messes with the functionality of the map:

https://dl.dropbox./u/107533178/CampusRoyal/Filmmakers.html

Please help and thanks for taking the time to read my post, I really appreciate your kind attention.

Cheers!

Mithos

• javascript
• image
• select
• drag

2 Answers 2

You need:

window.ondragstart = function() { return false; } 

If you are using jQuery

$("img").mousedown(function(){
    return false;
});

Answer here : https://stackoverflow./a/11135622/1722914

User this css :

-moz-user-select: none;
-webkit-user-select: none;
user-select: none;