0

I've a website that displays a table. The table header(s) contain a text description and a question mark image (Users can hover over the image to get some help).

But I've got a request to allow users to highlight the table and copy it without the image (Via click and drag).

Is this possible? I tried the suggestion in here

Preventing an image from being draggable or selectable without using JS

With no luck.

Can I mark an image as 'no-copy' or 'no-select'?

Community
  • 1
  • 1
Shane Gannon
  • 6,770
  • 7
  • 41
  • 64
  • @azrael you might want to consider reading the entire question in stead of only the title. Then you would know that image protection is of no concern to the OP. – timo Oct 08 '14 at 14:03
  • 3
    Instead of `img` tag use a fixed-size `div` with css property `background-image` pointing to your image. – Igor Oct 08 '14 at 14:03

3 Answers3

1

Use a div element and use the background-image property to set the background image to be the question mark for the div element.

The div element contains no text whatsoever, thus cannot be selected.

Just for clarification:

<thead>
  <tr>
    <th>header1</th>
    <th>header2 <div class="question-mark"></div></th>
  </tr>
</thead>


.question-mark{
    height: 100%;
    width: 10px;
    background-image: url("question_mark.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}
Shane Gannon
  • 6,770
  • 7
  • 41
  • 64
albusshin
  • 3,930
  • 3
  • 29
  • 57
  • Thank you - that worked unreasonably well. I also added display: inline-block; to .question-mark to keep the div from wrapping onto a new line in the Table Header. – Shane Gannon Oct 08 '14 at 15:52
  • Sorry I left it out, please feel free to edit the answer to improve. – albusshin Oct 08 '14 at 15:54
0

As other users suggested, you can use a div as an image.

However, if you wish to keep your image an image, you can use 

var img = document.querySelector("#notToDragImg");
img.onselectstart = function(){
                    return false;
                };

to prevent selection of your image (and no jQuery needed)

sn_92
  • 488
  • 3
  • 11
0

Prevent an image from being selected using CSS

img {
  user-select: none !important;
  -webkit-user-drag: none;
}
Dpk
  • 567
  • 5
  • 16