2012-06-17 2 views
1

2 일 전에 나는 자연스럽게 도메인을 구입했습니다. 그 전날 나는 도메인이 실제로 무엇인지 알지도 못했습니다. 그 이후로, 나는 처음으로 HTML을 스스로 가르치려고 노력해 왔습니다. 기본적으로 제가 말하고자하는 것은, 저는 매우 새롭고 아마도 제 설명에서 가난 할 것입니다.이미지 링크 관련 문제

방금 ​​'이미지 버튼'을 만드는 데 성공했습니다. 그것은 버튼 모양의 이미지를 만든 다음 내 웹 사이트의 탐색 도구로 사용합니다 (일반 링크처럼). 내 문제는 링크 '경계'자체가 이미지보다 크므로 이미지 자체 외부에서 1 인치를 누르면 작동한다는 것입니다. 보이지 않는 링크 '테두리'를 버튼과 같은 크기로 만들려면 어떻게해야합니까?

이 내 사이트입니다 : 내가 일을 테스트하는 경우 테스트 페이지에서 http://www.djeveln.com

(djeveln.com/test)입니다. 내 설명을 잘 이해할 수 없을 때를 대비해서 내가 말하는 버튼이 있습니다.

다음
<a class="ButtonLink" href="http://www.djeveln.com" title="Home"> 
<img src="/images/button.png" class="TestButton"></a> 

나는 이미지의 위치와 크기에 사용하는 CSS입니다 :

여기 내 HTML의

img.TestButton { /* Dette linker til selve størrelsen av knappen (bildet)*/ 
    position: absolute; 
    width: 100px; 
    height: 75px; 
    top: 400px; 
    right: 250px; 
} 

당신이 나를 도울 수 있기를 바랍니다! : P

+0

코드 블록이 좋았으므로 방금 다시 추가했습니다. – bfavaretto

답변

4

버튼 이미지에 투명 영역이 많이 있습니다 (실제 버튼이 중앙에 더 많거나 적음). 이것이 바로 "테두리"의 원인입니다.

CSS 해결 방법이 있지만 Photoshop (또는 다른 이미지 편집기)에서 이미지를 열고 투명 영역을 잘라내는 것이 좋습니다. 이미지를 단추의 정확한 크기로 만드십시오.

힌트 : Chrome 개발자 도구 또는 Firebug와 같은 디버깅 도구 (Firefox의 경우)를 사용하면 배우는 것처럼 쉽게 생활 할 수 있습니다. 이들을 사용하여 HTML의 모든 요소를 ​​검사 할 수 있습니다 (마우스 오른쪽 단추로 클릭하고 "inspect"선택). 적용된 CSS를 확인하고 테스트를 위해 직접 수정할 수도 있습니다. 그것이 내가 당신의 이미지에서 투명한 경계를 발견 한 방법입니다.

+0

아, 나는 투명성이 실제로 영향을 미치는지 몰랐다. 나는 그것을 시도 할 것이다, 고마워! 작동한다면 다시 연락 드리겠습니다. Btw : 코드 블록은 어떻게 만드나요? :/ – user1462362

+0

질문에 대한 내 의견을 확인하십시오. 귀하의 코드 블록은 괜찮습니다 (4 개의 선행 공백 사용). 편집기에는 전체 블록을 들여 쓰기위한 약간의'{}'단추가 있습니다. – bfavaretto

+0

작품 - 고마워요! Chrome 개발자 도구가 확장되었거나 이미 사전 빌드되어 있습니까? 왜냐하면 나는 보통 내가 마우스 오른쪽 버튼을 클릭하고 'Inspect Element'를 눌러서 내가 궁금한 페이지를 볼 수 있기 때문이다. – user1462362

0

이미지를 너무 크게 만든 것처럼 보입니다. 버튼 외부에는 클릭 대상의 일부인 투명한 이미지가 많이 있습니다. 너 어떻게 단추를 만들고있어?

예를 들어 포토샵에서 만든 경우 버튼 테두리에 맞게 이미지를 잘라야합니다.

CSS에서 그렇게 할 수는 있지만 직접 작업하게 될 것입니다. 원본 이미지를 수정해야합니다.