질문/조언질답게시판

먼저 개발자가 아니라 이런 질문 남기는 걸 이해 바랍니다.

 

이미지를 분할해서 링크를 넣을려고 포토샵에서 1차 작업하고, html 파일로는 이미지가 정상적으로 출력됩니다.

스크린샷 2018-07-05 오후 5.23.47.png

원래는 이런 이미지이고, 각 이름에 링크를 걸어놨습니다.

 

스크린샷 2018-07-05 오후 5.24.13.png

xe 게시판에서 html 소스를 복사하고 확인해보면 이렇게 이미지 간격이 벌어지는 문제가 있습니다.

 

 

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- Save for Web Slices (Seoul.psd) -->
<table border="0" cellpadding="0" cellspacing="0" height="868" id="Table_01" width="651">
    <tbody>
        <tr>
            <td colspan="15"><img alt="" height="219" src="http://musote.cdn3.cafe24.com/senn/Seoul_01.jpg" width="650" /></td>
            <td><img alt="" height="219" src="http://musote.cdn3.cafe24.com/senn/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="7"><img alt="" height="104" src="http://musote.cdn3.cafe24.com/senn/Seoul_02.jpg" width="220" /></td>
            <td colspan="2" rowspan="2"><a href="http://www.earphoneshop.co.kr/shop/shopbrand.html?type=N&amp;xcode=121&amp;mcode=051" target="new tab"><img alt="" border="0" height="105" src="http://musote.cdn3.cafe24.com/senn/Seoul_03.jpg" width="135" /></a></td>
            <td colspan="6" rowspan="3"><img alt="" height="145" src="http://musote.cdn3.cafe24.com/senn/Seoul_04.jpg" width="295" /></td>
            <td><img alt="" height="104" src="http://musote.cdn3.cafe24.com/senn/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="5"><img alt="" height="191" src="http://musote.cdn3.cafe24.com/senn/Seoul_05.jpg" width="65" /></td>
            <td colspan="3" rowspan="3"><a href="http://www.catsline.co.kr/product/search.html?banner_action=&amp;keyword=sennheiser" target="new tab"><img alt="" border="0" height="69" src="http://musote.cdn3.cafe24.com/senn/Seoul_07.jpg" width="128" /></a></td>
            <td colspan="2" rowspan="7"><img alt="" height="297" src="http://musote.cdn3.cafe24.com/senn/Seoul_07-08.jpg" width="27" /></td>
            <td><img alt="" height="1" src="http://musote.cdn3.cafe24.com/senn/spacer.gif" width="1" /></td>
        </tr>
        <tr>
            <td colspan="2" rowspan="7"><img alt="" height="356" src="http://musote.cdn3.cafe24.com/senn/Seoul_08.jpg" width="135" /></td>
            <td><img alt="" height="40" src="http://musote.cdn3.cafe24.com/senn/spacer.gif" width="1" /></td>
        </tr>
        <tr>

 

 

 

소스는 이런 형태인데, 해결 방법이 없을까요?? ㅠㅠ

 

 

 

 

 

  • ?

    맨 밑에 
    <style>
    .bTable td {
        display: initial;
    }
    .bTable tr{
        display: flex;
    }
    </style>를 붙여보세요.

     

    사진이 반만 나와있어서 제대로 먹힐지는 모르겠네요.

  • ?

    position:relative 스타일을 가지고 있는 div 안에 a를 넣어서 스타일 속성을 position:absolute를 줘도 됩니다.

  • profile
    테이블 안쪽으로 붙여 봤더니, 테이블 상단으로 코드가 이동하는데, 해결은 안되네요. ;;

    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- Save for Web Slices (Seoul.psd) -->
    <style type="text/css">.bTable td {
    display: initial;
    }
    .bTable tr{
    display: flex;
    }
    </style>
    <table border="0" cellpadding="0" cellspacing="0" height="868" id="Table_01" width="651">
    <tbody>
  • profile ?
    새로 올린 첨부파일을 확인해주세요.
  • ? profile
    아! 이건 이미지맵을 쓰는게 아니고, 이미지 내에서 픽셀을 지정해서 링크로 연결하는 방법인건가요?
  • profile ?
  • profile
    http://xe.sketchbook.kr/freeboard/89074
    스케치북의 문제인거 같은데, 해결 방법이 없을까요??
  • ?

    게시글 안에 넣으실건가요 아니면 따로 페이지를 만들어서 넣으실 생각이신가요?

     

    필요하시면 첨부파일에 올려드렸던걸 완성해서 드리겠습니다.

  • ? profile

    게시글안에 넣을 생각입니다.

    원본 이미지 파일과 html 파일 첨부해 드립니다.

  • ?

    1.FTP에서 modules/board/skins/sketchbook5/css에 첨부파일에 있는 mapview.png, mapview.css를 업로드하시고

     

    2.modules/board/skins/sketchbook5/_read.html 파일을 열어서 아래에 있는 한줄을 붙여넣기합니다.

    <load target="css/mapview.css" />

     

    3.글쓰기를 해서 다음과 같이 입력합니다.

    <div class="link_table">
        <div class="box">
            <img src="/modules/board/skins/sketchbook5/css/mapview.png"></img>
            <a href="earphone" class="earphoneshop"/>
            <a href="esoriworld" class="esoriworld"/>
            <a href="sharkwave" class="sharkwave"/>
            <a href="hanyanghihi" class="hanyanghihi"/>
            <a href="headphoneshop" class="headphoneshop"/>
            <a href="joyaudio" class="joyaudio"/>
            <a href="sherazard" class="sherazard"/>
        </div>
    </div>

  • ?

    테이블은 해결하기 번거로워서 좀 걸립니다.

    저렇게 돼있는건 처음보는지라...

  • ? profile
    고맙습니다. 테스트해보겠습니다.

서버에 요청 중입니다. 잠시만 기다려 주십시오...