이미지 링크 및 이미지 맵 생성

• 할 수있다 17, 2024

이번 주 답변은 독자의 질문에 대한 답변입니다.“HTML로 페이지에 그림 링크를 만드는 방법을 설명 할 수 있습니까?” 링크 된 이미지에 사용할 수있는 몇 가지 기술이 있습니다. 하나는 전체 이미지를 HTML과 연결하는 것이고 다른 하나는 동일한 이미지의 다른 부분이 다른 위치에 연결된 이미지 맵을 수행하는 것입니다.

HTML로 연결된 이미지

작은 이미지 나 아이콘을 연결하는 것은 매우 간단합니다. 이미지 링크를 하이퍼 링크 내에 배치하기 만하면됩니다.



내가 여기에서 한 것은 링크를 위해 이미지를 html로 묶는 것입니다. 이것은 작은 이미지를 연결하는 가장 쉽고 효과적인 방법이며 종종 사용자 정의 글 머리 기호, 아이콘 등으로 수행됩니다. 그러나 하나의 큰 이미지를 여러 곳으로 연결하려면 어떻게해야합니까? 이미지 슬라이싱이 유용한 곳입니다.

Photoshop에서 이미지 슬라이싱

이것은 Photoshop에서 달성하기가 매우 쉽습니다. 사용자가 이미지를 클릭 할 위치를 명확하게 볼 수있게하려면 지나치게 복잡하지 않은 이미지를 사용해야합니다. 또한 사용자가 이미지를 클릭하여 어디로 가야하는지 이해해야합니다. 사용자를 염두에두고 이미지 맵을 신중하게 개발하십시오. 이미지 맵은 일반적으로 페이지의 텍스트처럼 검색 엔진과 친숙하지 않지만 이미지 슬라이스 내에서 alt 태그를 올바르게 사용하면 도움이 될 수 있습니다.

이미지가 생성되면 다음 단계는 이미지를 "슬라이스"하는 것입니다. 슬라이스 도구 아이콘은 작은 칼처럼 보입니다. 툴바 상단 근처에 있으며 자르기 도구 아래에 있습니다.“자르기”아이콘을 클릭하면 슬라이스 및 슬라이스 선택기 도구가 나타납니다.

슬라이스 도구를 선택하고 마우스 왼쪽 키를 누른 상태에서 슬라이스를 원하는 위치로 조심스럽게 드래그 한 다음 놓습니다. 계속해서 전체 이미지를 자릅니다. 다른 페이지에 연결하려는 이미지의 모든 영역 주위에 슬라이스가 있어야합니다. 큰 흰색 영역은 하나의 슬라이스 일 수 있습니다.

이미지가 완전히 슬라이스 된 후 다음 단계는 "슬라이스 선택"도구를 사용하여 각 슬라이스를 클릭 한 다음 슬라이스 유형 "이미지"를 선택하는 것입니다. 그 아래 에이 슬라이스가 지시 할 URL을 채우고 하단의 alt 태그 필드를 입력하십시오. 간단한 이미지 매핑에는 다른 필드가 필요하지 않습니다. 전체 이미지가 매핑 될 때까지 동일한 방식으로 각 슬라이스를 이동합니다.

전체 이미지가 완성되면 "웹 및 장치에 저장"옵션을 사용합니다. 상단에서 "파일"을 클릭하고 일반적인 저장 옵션 아래를 내려다 보면 웹 및 장치에 대한 저장 옵션이 표시됩니다. 이 옵션을 선택하면 이미지 모양을 미리 볼 수있는 대화 상자가 열립니다. 만족하면 저장 버튼을 누르면 다른 대화 상자가 열립니다. 두 번째 옵션에 "이미지 및 HTML 저장"이 표시되어 있는지 확인한 다음 작업 내용을 저장하십시오.

HTML 문서를 저장 한 폴더로 이동하여 엽니 다. 이 코드를 복사하여 자신의 HTML 파일에 붙여 넣을 수 있습니다. 일반적으로이 HTML은 조잡합니다. HTML에 능숙하다면 원하는대로 정리할 수 있지만, 그대로 작동합니다. 항상 그렇듯이 이미지 파일 등이 올바른 위치에 있는지 확인하십시오. 그렇지 않으면 이미지가 표시되지 않습니다.

비디오 지침: [HTML 기초이론] - 이미지맵(image map) 만들기 (할 수있다 2024).