Safari 및 Chrome에서 클라이언트 측 이미지 맵이 작동하지 않습니다. Firefox에서 잘 작동합니다.

Firefox에서 제대로 작동하지만 Safari 및 Chrome (Mac OS)에서 작동하지 않는 클라이언트 측 이미지 맵이 있습니다. 나는 왜 내가 문법적 권리를 가지고 있으며 클라이언트 측 이미지 맵이 거의 모든 브라우저에서 지원된다는 것을 알고 있기 때문에 이것이 왜 일어나고 있는지를 놓치고있다. 내가 PNG를 사용하고있을 수 있습니까? 코드는 다음과 같습니다.Safari 및 Chrome에서 클라이언트 측 이미지 맵이 작동하지 않습니다. Firefox에서 잘 작동합니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
    <title>My Image Map Page</title> 
    <style type="text/css"> 
    body 
    { 
    background-image:url('images/stripe-background.jpg'); 
    background-position:center; 
    background-attachment:fixed; 
    } 
    </style> 
</head> 
<body> 

    <center><img src="images/homepage-image-transparent.png" usemap="#homepagemap" ismap /></center> 
    <map id="homepagemap" name="homepagemap"> 
     <area shape="rect" coords="633,531,917,736" href="page1.html" alt="Page 1" /> 
     <area shape="rect" coords="321,531,606,736" href="page2.html" alt="Page 2" /> 
     <area shape="rect" coords="10,531,296,736" href="page3.html" alt="Page 3" /> 
     <area shape="rect" coords="732,478,849,505" href="page4.html" alt="Page 4" /> 
    </map> 

</body> 
</html>

나는 뭔가를 놓쳐 버린 것 같습니다. 도움을 주셔서 감사합니다.

출처

2011-09-20 webworm

을 의미? 나 한테 잘됐다. –

"작동하지 않는다"는 것은 링크 중 아무 것도 클릭 할 수 없다는 것입니다. 마우스 커서는 링크를 가리키면 바뀌지 않습니다. 마치 이미지 맵이 존재하지 않는 것입니다. 이미지 만 표시됩니다. – webworm

어리석은 질문 시간 : 당신은 실제로 적당한 반점에 mousing인가? 나는이 어젯밤을 로컬에서 테스트했다. (단지 코드에 대해 * 주석 달기는 아니었지만) 분명히 내 자신의 이미지를 제공해야했다. 이미지가 일치하지 않거나 영역 좌표가 꺼질 가능성이 있습니까? –

나는 작동하게 만들었지 만, 나는 왜 당황 스럽다. 배경 이미지를 다루는 CSS 스타일 규칙을 주석 처리했습니다.

//background-image:url('images/stripe-background.jpg'); 
//background-position:center; 
//background-attachment:fixed;

처음으로 웹 사이트의 배경 이미지를 사용했습니다. 아마도 CSS 규칙의 일부가 문제를 일으키는 것으로 생각했습니다. 일단 CSS 규칙을 주석 처리하면 Safari와 Chrome에서 모든 것이 잘 작동합니다. 정말 혼란스러운 점은 어떤 CSS 규칙이 문제를 일으키고 있는지, 그리고 여전히 모든 것이 효과가 있는지 파악하려고 CSS 규칙을 하나씩 유엔에 주석 처리 한 것입니다. 그들 모두와 함께 유엔 주석. 이제 원래 코드로 돌아 왔고 이미지 맵이 작동합니다. 나는 뭔가가 작동하는 곳과 같은 솔루션을 싫어하고 왜 이전에 그렇게하지 않았는지 알 수 없습니다.

어쨌든 .. 도움을 주셔서 감사합니다.

출처

2011-09-20 19:56:58 webworm

이 같은 CSS 시도 : 정확히 "작동하지 않는"무엇

background-image:url(images/stripe-background.jpg);

출처

2012-04-24 21:36:48 friglob

Safari 및 Chrome에서 클라이언트 측 이미지 맵이 작동하지 않습니다. Firefox에서 잘 작동합니다.

답변

관련 문제