채택완료

이미지 맵에서 커서 포인터 표시

2020-12-12 (토) 10:08:00 2,680

선배님들 조언을 구합니다.

이미지 맵에서 제품 상세페이지로 연동되게 만들었는데,

마우스를 제품위에 올리면 커서가 손가락 모양으로 변하지가 않아요.

어떤걸 추가해야 하는지 잘 모르겠어요.

스킨 스타일 시트 및 소스의 어느 부분이 잘못되었는지 알려주세요.

이건 스타일 부분이고요,

Copy
map {display: inline;}
area {display: inline;}
area:-webkit-any-link {cursor: pointer;}

이건 게시판 소스 일부입니다.

Copy
<div class="editor">
    <p align="center" style="text-align: left; font-size: 14px;"><strong>*제품 사진을 클릭하면, 해당 제품의 상세 페이지로 이동합니다. </strong><br><img src="/download/products/application/app_1.png" width="750" height="965" usemap="#app_1.png" style="margin-top: 20px;">
    <map name="app_1.png">
    <area shape="rect" coords="437,56,480,123" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0101&amp;wr_id=15" target="_blank" alt="1020R">
    
    <area shape="rect" coords="417,164,500,200" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0102&amp;wr_id=15" target="_blank" alt="2046R">

    <area shape="rect" coords="591,184,633,253" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0109&amp;wr_id=3" target="_blank" alt="8035">

    <area shape="rect" coords="600,300,650,370" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0110&amp;wr_id=2" target="_blank" alt="171">

    <area shape="rect" coords="577,401,657,443" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0102&amp;wr_id=2" target="_blank" alt="2413R">

    <area shape="rect" coords="259,234,293,297" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0111&amp;wr_id=4" target="_blank" alt="5202">

    <area shape="rect" coords="66,242,141,310" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0107&amp;wr_id=3" target="_blank" alt="5410">

    <area shape="rect" coords="40,354,130,406" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0107&amp;wr_id=2" target="_blank" alt="4140">

    <area shape="rect" coords="51,450,133,520" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0103&amp;wr_id=3" target="_blank" alt="3128">

    <area shape="rect" coords="205,460,249,520" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0102&amp;wr_id=34" target="_blank" alt="2060BT">

    <area shape="rect" coords="396,451,436,498" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0112&amp;wr_id=19" target="_blank" alt="8178">

    <area shape="rect" coords="324,501,375,580" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0105&amp;wr_id=6" target="_blank" alt="6315">

    <area shape="rect" coords="377,517,443,562" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0102&amp;wr_id=35" target="_blank" alt="5050">

    <area shape="rect" coords="645,576,709,623" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0103&amp;wr_id=18" target="_blank" alt="3552BT">

    <area shape="rect" coords="614,736,677,782" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0102&amp;wr_id=13" target="_blank" alt="2056R">

    <area shape="rect" coords="339,750,383,822" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0108&amp;wr_id=1" target="_blank" alt="6207">

    <area shape="rect" coords="222,847,289,887" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0104&amp;wr_id=2" target="_blank" alt="4202">

    <area shape="rect" coords="53,644,137,719" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0104&amp;wr_id=3" target="_blank" alt="4106">

    <area shape="rect" coords="293,619,365,677" href="http://xn--9d0bk8u22g.xn--3e0b707e/bbs/board.php?bo_table=0106&amp;wr_id=7" target="_blank" alt="6516BT">
    </map>

답변 2개 / 댓글 3개

채택된 답변
+20 포인트
2020-12-12 (토) 13:16:17

ie 에서는 안될수도 있어요..

<area shap="rect" coords="7,8,9,10"

onMouseOver="mapid.style.cursor='pointer'"

추가해주세요

답변에 대한 댓글 1개

답변해주셔서 감사드려요. 질문 하나 더 있습니다.

먼저 답변해주셔서 감사드려요.

아톰빤스님 말씀대로 수정해서 업로드 했는데, 게시판 수정에서는 수정됐는데,

웹상에서 검사하면 수정내용이 반영되지 않네요.

웨일, ie, 크롬 모두 그렇네요.

스타일이 전혀 반영되지 않는건 왜그런걸까요?

이거뿐만 아니라 몇가지 않되는게 있긴했었거든요.

  - 게시판 수정 내용

2040532503_1607899734.5816.png

-웹에서 검사내용

2040532503_1607899778.3381.png

답변에 대한 댓글 2개

안녕하세요~ ^ ^

아마 보안상 php 단에서 막힌것 같습니다.
질문상 에디터를 사용하신다는 말은 없으셔서, 그렇게 답변드린거구요..

죄송하지만
원질문에 사용하신 이미지맵 그대로 사용하셔도 별 문제 없어보이십니다.
다만 그누 보드에서 자체적으로 map 이하를 보여줄때 출력하지 않습니다.

html 을 내의도대로 사용하시려면.

그누보드 > bbs > view.php 폴더에

$view['content'] = conv_content($view['wr_content'], $html);
이부분을 찾아
$view['content'] = conv_content($view['wr_content'], $html, false);
이렇게 변환 하셔야 할거 같습니다.
html을 변환하지 않는다는 의미입니다.


다만 남들도 님페이지에
html 로 장난을 칠수 있을테니까
권장 하지는 않습니다.

어드민 게시판 설정에서
HTML 쓰기 권한 은 항상 10정도로 높게 설정 하셔야 합니다.

게시판으로 페이지를 만들때 대표적인 단점들 입니다.
별도의 페이지를 만드시는 걸 추천드려요~
좋은 하루 되세요
감사합니다. 아톰빤스님. 바쁘신데 답변해주셔서요.

말씀하신대로 해봤는데, 여전히 안되네요. ^^

괜히 보안에 문제가 생길 수도 있다고 말씀하시니,

걍 냅두는 쪽으로 마음을 굳혔습니다.

어쨋든 링크는 걸려서 넘어가니까요..^^

여튼 감사드립니다.

답례로 다음엔 아톰 그려져 있는 빤스를 사서 입으려구요.

그거 보면서 아톰님 기억하겠습니다.

감사합니다.

답변을 작성하려면 로그인이 필요합니다.