이미지 맵에서 커서 포인터 표시
관련링크
본문
선배님들 조언을 구합니다.
이미지 맵에서 제품 상세페이지로 연동되게 만들었는데,
마우스를 제품위에 올리면 커서가 손가락 모양으로 변하지가 않아요.
어떤걸 추가해야 하는지 잘 모르겠어요.
스킨 스타일 시트 및 소스의 어느 부분이 잘못되었는지 알려주세요.
이건 스타일 부분이고요,
map {display: inline;}
area {display: inline;}
area:-webkit-any-link {cursor: pointer;}
이건 게시판 소스 일부입니다.
<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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&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&wr_id=7" target="_blank" alt="6516BT">
</map>
답변 2
ie 에서는 안될수도 있어요..
<area shap="rect" coords="7,8,9,10"
onMouseOver="mapid.style.cursor='pointer'"
추가해주세요
답변해주셔서 감사드려요. 질문 하나 더 있습니다.
먼저 답변해주셔서 감사드려요.
아톰빤스님 말씀대로 수정해서 업로드 했는데, 게시판 수정에서는 수정됐는데,
웹상에서 검사하면 수정내용이 반영되지 않네요.
웨일, ie, 크롬 모두 그렇네요.
스타일이 전혀 반영되지 않는건 왜그런걸까요?
이거뿐만 아니라 몇가지 않되는게 있긴했었거든요.
- 게시판 수정 내용
-웹에서 검사내용
안녕하세요~ ^ ^
아마 보안상 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정도로 높게 설정 하셔야 합니다.
게시판으로 페이지를 만들때 대표적인 단점들 입니다.
별도의 페이지를 만드시는 걸 추천드려요~
좋은 하루 되세요
감사합니다. 아톰빤스님. 바쁘신데 답변해주셔서요.
말씀하신대로 해봤는데, 여전히 안되네요. ^^
괜히 보안에 문제가 생길 수도 있다고 말씀하시니,
걍 냅두는 쪽으로 마음을 굳혔습니다.
어쨋든 링크는 걸려서 넘어가니까요..^^
여튼 감사드립니다.
답례로 다음엔 아톰 그려져 있는 빤스를 사서 입으려구요.
그거 보면서 아톰님 기억하겠습니다.
감사합니다.
