이미지맵 하이라이트시에 이미지 정렬
본문
이미지맵을 도움받아서 성공하고,
검색을 통해서 하이라이트 까지 설치했습니다.
한참을 작업하면서 뭔가 자꾸 이상한것 같은대 했는대
어! 이미지가 좌측으로 옮겨졌습니다.
http://parts.needpartsinc.com/bbs/board.php?bo_table=9001&wr_id=13
이미지가 3개 인대 첫번째 작업중입니다.
아래 이미지는 중앙에 제대로 있는대,....
이미지맵 적용까지는 괜찮습니다.
하이라이트 적용하면 이미지 정렬이 무효화 되는대요...
이미지맵 소느는
<p style="text-align: center;">
<img src="/data/editor/1908/20190829132105_ead7030e0bb5716697363e6f7fdcd405_2ok5.jpg" border="0" usemap="#a1" />
<map name="a1">
<area shape="rect" coords="55,62,425,200" href="/bbs/board.php?bo_table=1001&wr_id=6" target="_blank" />
</map>
</p>
하이라이트 소스는
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(function() {
$.fn.maphilight.defaults = {
fill: true,
fillColor: 'CCCCCC',
fillOpacity: 0.5,
stroke: false,
}
$('img[usemap]').maphilight();
});
</script>
어디를, 어떻게 수정하면 될까요?
아니면 하이라이트 시키는 다른소스가 있을까요?
부탁드립니다. 감사합니다.
답변 1
여기에 센터 주신거 한번 지워보세요
<div id="bo_v_con"><center>
감사합니다.
하도 않되서 이미지맵 소스위에 넣어 봤던 건대요.
삭제해도 정렬되지 않는대요. ㅠㅠㅠ
<div style="display: block;background-image: url.....">
여기에서 margin: auto; 추가해서 한번 해보세요
혹시 무슨파일인지 알수 있을까요?
여러파일 찾기를 단어별로 시도해도 못찾아서,
구글브라우저의 마우스오른쪽 검색에서 나오는 모든부분에 적용해봐도
적용하는대로 해당 (첫번째)이미지가 사라지내요.
이미지맵좌표는 남아서 두번째 이미지에서 작동하내요...
부탁드립니다.
f12 개발자 모드 열어서 확인해보시면
<p style="text-align: center;"> 여기밑에
<div style="......">이 있던데요 저부분에서 margin:auto; 값을 줘보세요
열심히 알려주시는대, 따라가지 못해서 죄송합니다.
<div style="display: block;background-image: url.....">
문구를 롯도 조합하듯이 이렇게, 저렇게 해서 에디터플러스에서
여러피일 칮기로 찾았지만 "스마트에디터2"안에서만 검색이 되내요.
저는 스마트에디터를 사용하지 않는대요.
그래서 개발자모드 에서 이곳, 저곳 삽입해 보면
적용하는대로 해당 (첫번째)이미지가 사라지내요.
이미지맵좌표는 남아서 두번째 이미지에서 작동하내요...
참! 개발자 모드가, 검사(N)이랑 다른가요?
개발자 모드에서 이상없이 나오시는지요?
한번 부탁드립니다.
참고로 위 소스 중에서 usemap="#a1"를 삭제하면 이미지가 정상적으로 중앙으로 옵니다.
그렇지만 이미지맵을 사용하기 위해서 하는건대 밸수도 없구요,,,
아마 퉁돌을 일으키는것 같은대..........
태스트한번 부탁드립니다.
혹시 어느파일인지 찾아주실수 있으신지...........
그는 5.3.3.2 이고요 베이직 게시판 입니다.
