웹 페이지에서 이미지가 선택되는 것을 방지 할 수 있습니까?

테이블을 표시하는 웹 사이트가 있습니다. 표 머리글에는 텍스트 설명과 물음표 이미지가 있습니다 (사용자가 이미지 위에 마우스를 올려 놓으면 도움이 될 수 있음).웹 페이지에서 이미지가 선택되는 것을 방지 할 수 있습니까?

하지만 사용자가 테이블을 강조 표시하고 이미지없이 복사 할 수 있도록 요청했습니다 (클릭하여 드래그하여 볼 수 있음).

이것이 가능합니까? 여기

Preventing an image from being draggable or selectable without using JS

행운에 제안을했습니다.

이미지를 'no-copy'또는 'no-select'로 표시 할 수 있습니까?

출처

2014-10-08 Shane Gannon

. 그렇다면 이미지 보호가 OP에 아무런 관련이 없음을 알 수 있습니다. – timo

'img' 태그 대신에 이미지를 가리키는'background-image' CSS 속성을 가진 고정 크기의'div'를 사용하십시오. – Igor

는 div 요소를 사용하고 background-image를 사용 속성을 사용하여 배경 이미지를 div 요소의 물음표로 설정합니다.

div 요소는 텍스트가 전혀 없으므로 선택할 수 없습니다. 그냥 해명

: 당신은 단지 제목의 대신에 전체 질문을 읽어 고려하는 것이 좋습니다 @azrael

<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; 
}

출처

2014-10-08 14:07:36 albusshin

고마워요. 그건 부당하게 잘 돌아갔습니다. 나는 또한 display : inline-block을 추가했다. .question-mark를 사용하여 div가 테이블 머리글의 줄 바꿈되지 않도록합니다. –

죄송합니다. 답변을 수정하지 않으셔도됩니다. – albusshin

다른 사용자가 제안 했으므로 div를 이미지로 사용할 수 있습니다. 당신이 당신의 이미지 이미지를 유지하고자하는 경우

그러나, 당신은 당신의 이미지 선택을 방지하기 위해

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

을 사용할 수 있습니다 (더 jQuery를 필요 없음)

출처

2014-10-08 14:06:32

웹 페이지에서 이미지가 선택되는 것을 방지 할 수 있습니까?

답변

관련 문제