HTML 이미지 맵

이 게시물은 다음을 알려줍니다.

• HTML 이미지 맵이란 무엇입니까?
• HTML 문서에서 이미지 맵을 만드는 방법은 무엇입니까?
• 다른 페이지에 연결된 이미지 맵을 만드는 방법은 무엇입니까?

HTML 이미지 맵이란 무엇입니까?

이미지 맵은 클릭할 수 있는 영역이 있는 그림입니다. HTML로 이미지 맵을 만들려면 ' <지도> ” 요소가 활용됩니다. 또한, 하나 이상의 ' <영역> ” 태그는 “

통사론

HTML 문서에서 이미지 맵을 지정하는 구문은 다음과 같습니다.

“ ” 요소는 다음 속성으로 정의됩니다.

• “ 소스 ”는 이미지 경로를 지정합니다.
• “ 모든 것 ”는 이미지를 로드할 수 없을 때 대체 텍스트를 표시합니다.
• “ 유즈맵 ”를 지정하여 이미지 영역을 클릭할 수 있도록 합니다. 링크를 만들기 위해서는 해당 값이 “

“ <지도> ” 요소는 다음 속성과 함께 추가됩니다.

• “ 모양 ”는 HTML의 영역 크기를 지정합니다. <지도> ' 요소.
• “ 좌표 ” 속성은 클릭 가능한 영역의 좌표를 정의합니다.
• “ 헥사 ” 속성은 소스의 URL을 설정합니다.

HTML 문서에서 이미지 맵을 만드는 방법은 무엇입니까?

HTML 문서에서 이미지 맵을 생성하려면 주어진 지침을 확인하십시오.

• HTML에서 ' <사업부> ” 요소, 클래스 할당 “ 이미지 맵 '.
• 이 div 내에서 ' ” 요소를 사용하여 위에서 논의한 속성과 관련된 이미지를 추가합니다.
• 그런 다음 HTML ' <지도> ” 요소를 지정하고 “ 클릭 공간 ' 이름.
• ' 유즈맵 ' 속성에 '라는 이름이 지정됩니다. #클릭스페이스 '를 가리키며 ' 이름 “
• 그 안에 ' <영역> 위에서 언급한 속성을 가진 ” 태그:

CSS 섹션으로 이동하여 이미지 크기를 조정해 보겠습니다.

CSS에서 '

' 스타일 지정

'를 활용 .이미지 맵 ” 클래스에 액세스하려면 “ <사업부> ” 요소를 선택하고 다음 CSS 속성을 적용합니다.

언급된 CSS 속성에 대한 설명은 다음과 같습니다.

• “ 너비 ” 속성은 div 요소의 너비를 설정합니다.
• “ 여유 ” 속성은 요소 주위에 더 많은 공간을 추가합니다.

스타일 'img' 요소

참조, '에 지정된 지역 좌표 좌표 ” 속성을 클릭할 수 있습니다.

다음 섹션에서는 이미지 맵을 다른 소스에 연결하는 방법을 알아봅니다.

다른 페이지에 연결된 이미지 맵을 만드는 방법은 무엇입니까?

확장자가 '인 다른 HTML 페이지를 만듭니다. .html ” 아래 언급된 단계에 따라:

• 우리의 경우 이름을 ' 노트북.html '.
• div 요소를 추가하고 ' 노트북-img '.
• 그런 다음 '를 사용하여 이미지를 배치합니다. ” 요소를 연결하고 “ 소스 ' 그리고 ' 너비 ' 속성.
• 다음으로 '를 사용하여 단락을 지정합니다.

  ' 요소:

CSS에서 다음 CSS 속성을 ' 노트북-img ' 수업:

산출

이제 ' 노트북.html ” 페이지를 이미지로 “ <영역> ” 첫 페이지의 요소. 이렇게 하려면 페이지의 URL을 ' 헥사 ” 속성은 아래와 같이 “ ” 요소의 속성입니다.

산출

우리는 이미지 맵이 무엇이며 다른 소스와 어떻게 연결되는지 성공적으로 배웠습니다.

결론

HTML ' <지도> ” 요소는 클릭 가능한 영역이 있는 이미지 맵 또는 이미지를 생성하는 데 활용됩니다. 이미지의 클릭 가능한 영역을 정의하려면 하나 이상의 ' <영역> ” 태그는 “