나는이 접근 방법에 대해 다른 견해를 가질 필요가 있다고 생각한다. 질문에있는 몇 가지 점들이 잘못되었다고 생각된다. 이 포트폴리오 설계가 인 경우 하나의 연결처럼
는, 당신은이 일을 알고 있어야합니다 :
- 웹 사이트의 스크린 샷이 표현 적, 내용이 아닙니다. 사람들은 자신이 한 일을보기 위해 자신의 포트폴리오에 와야합니다. HTML img (내용)와 배경 이미지 (프레젠테이션)의 차이점을 알고 있어야합니다.
- 이미지 배율을 사용하면 다양한 해상도에서 끔찍하게 보입니다. 이미지를 늘리거나 크기를 줄이면 이미지가 왜곡되어 포트폴리오에서보기에 좋지 않습니다. 나는 당신이 실용 주의적이고 당신의 이미지가 고정 된 크기가되도록 선택하는 것을 권유합니다. 이것은 당신의 핫스팟을 이미지 위에 추가하는 것을 도울 것입니다. 이것은 링크 된 포트폴리오의 저자가 페이지를 멋지게 나누기위한 추가 배경 이미지와 함께 접근하는 방식을 취하는 방식입니다.
링크 된 예제는 점을 연결하는 선들로 인해 점을 그리는 데 canvas을 사용한다는 점에 유의해야합니다. Canvas는 동적 인 것으로 쉽게 만들지 만 IE에서는 플러그인을 사용하지 않으면 지원되지 않습니다. 그러나 이러한 점을 자주 변경하지 않아도 이미지와 CSS만으로 비슷한 효과를 얻을 수 있습니다.
나머지 답변은 HTML4/XHTML을 사용한다고 가정합니다. 링크 된 예제에서는 HTML5를 잘못 사용하지만이 기술을 사용하지 않고 HTML5를 사용하지 않는다고 가정합니다.
시작하려면 각 이미지 및 메모를 개별 div에 포함 된 독립 실행 형 블록으로 간주하십시오. 이전에 언급했듯이 스크린 샷은 콘텐츠 이미지이며 자체 img 태그가 있어야합니다. 노트는 노트가 특정 포인트 목록이기 때문에 마크 업해야한다고 주장합니다.
<div class="article">
<div>
<img src="my_screenshot.png" alt="Appropriate alt text here" />
<ul>
<li class="note1">Here is an interesting part of the image</li>
<li class="note2">This is also interesting</li>
<li class="note3">Look at this! Pretty cool huh?</li>
</ul>
</div>
</div>
마크 업 : 완료. 이것을 각 부분에 사용할 수 있으며 내용을 적절하게 바꿀 수 있습니다. 포인트의 순서가 중요하다고 생각하면 ul을 ol으로 바꿉니다.
다음으로 CSS에 대해 생각하고 싶습니다. 이것은 당신을 시작하게하는 기본 일 뿐이며, 올바른 방향으로 당신을 가리키기에 충분해야합니다. div.article을 설정하여 절대 자식 요소가 특정 항목의 왼쪽 위 모서리를 기준으로 배치 될 수 있도록 상대적으로 배치해야합니다. 또한 래퍼 div의 너비, 높이 및 중심을 설정하십시오 (img 치수도 설정하십시오). 마지막으로 위치 지정을 위해 li 메모를 준비해야합니다.
.article {position:relative}
.article div{position:relative; width:800px; height:600px; margin:0 auto}
.article img {display:block; width:800px; height:600px}
.article ul,.article ul li {position:absolute; list-style:none; top:0; left:0; margin:0; padding:0}
/* Debug styles */
.article ul li {height:20px; width:20px; background-color:#ff0000}
이제 각각의 li에 대해 점을 그려 보는 경우에 불과합니다. 이미지 편집기를 사용하여 각 점의 왼쪽 상단 위치 (픽셀 단위)를 산출 한 다음 각각 li.noteX을 적절하게 설정하십시오.
.article ul li.note1{top:156px; left:89px}
올바른 경로를 지정하기에 충분합니다. 일단 당신이 머리 주위에 당신이 노트에 대한 배경 이미지와 툴팁을 추가하는 자바 스크립트를 추가 시작할 수 있습니다. 한 페이지에서 여러 항목을 사용하는 경우 각 div.article에 고유 한 ID를 부여하고이를 사용하여 li을 더 구체적으로 타겟팅하십시오.
편집 :Live example 호버를 보여줄 JS가 약간 있습니다. 실제 이미지의 부족을 무시하고, 끔찍한 색상은 시각적으로 충분해야합니다.)
정말 고마워.하지만 몇 가지 질문이있어. 1) 800 : 600 이상의 해상도로 이미지를 사용할 수 있습니까? 이 경우에도 효과가 있습니까? 2) 내가 말하는 웹 페이지는 메인 페이지, 메뉴 부분, 포트폴리오가 아니라 배경 이미지를 늘리지 않을 것입니다.나는 단지 bg 이미지를 넣고 싶다. 정말 큰 이미지를 놓는 것과 같이 화면에 좋을 것이다. 만약 당신이 전체 그림을 보지 못한다면, 그것은 Ui를 해치지 않을 것이다. 나는 전체 웹 페이지가 가득 채워지 길 원한다. 그 bg 이미지가 아니라 흰색 배경 또는 다른 편안한 색상. 뭔가 명확하지 않은 경우 다른 방법을 설명하려고합니다. – hgulyan
예, 800x600보다 큰 이미지를 사용할 수 있습니다.이 예일뿐입니다. 그러나 귀하의 의견에 귀하가 말한 것을 생각해 볼 때 나는 당신이 원하는 것을 정확히 찾아 내지 못했을 것이라고 생각합니다. 간단한 반복 이미지로 http://dribbble.com/의 헤더와 같은 것을 얻기 위해 찾고있는 것은 무엇입니까? 이것은 실제로 비슷한 접근법을 필요로하며, 이것이 맞는지 확인할 수 있다면 이것을 반영하기 위해 나의 대답을 편집 할 것입니다. – akamike
@akamike, 배경은 매트릭스 (m * n)로 서클 세트이며, 이미지 (하나의 원)를 가져 와서 페이지에서 반복하거나이 모든 원이있는 하나의 배경 이미지가됩니다. 하지만이 서클 중 일부는 백그라운드 부분이 아닌 별도의 이미지이어야하므로 사용자가 클릭 할 수 있지만 모든 서클이 같은 유형이고 일부는 클릭 가능한 것처럼 차이를 채워서는 안됩니다. 내가 배열 할 수 있다면 버튼이 무작위로 바뀔 수 있으므로 좋을 것입니다. 희망, 나는 모든 것을 분명히 설명했다. – hgulyan