HTML 이미지 맵을 작성하는 방법

HTML (Hypertext Markup Language)로 이미지에 링크를 추가하면 해당 링크가 전체 이미지에 추가됩니다. 프로그래머가 여러 영역이나 버튼으로 단일 이미지를 만들고 각 영역이 다른 링크에 사용되는 경우 문제가 될 수 있습니다. 프로그래머는 HTML 이미지 맵을 사용하여 링크가 이동할 특정 영역을 지정하여 여러 링크를 하나의 이미지에 포함시킬 수 있습니다. 링크의 모양을 지정하고 링크에 사용할 좌표를 HTML에 알리면됩니다.

인터넷에 사용되는 이미지는 픽셀 단위로 측정됩니다. 이미지에 몇 개의 픽셀이 있는지 아는 것이 이미지 맵을 만드는 첫 번째 필수 단계입니다. 예를 들어, 높이 400 픽셀, 폭 250 픽셀의 직사각형 이미지가 사용됩니다. 다음으로 프로그래머는 HTML 이미지 맵이 제대로 작동하기 위해 좌표의 모양을 정확하게 측정하는 방법을 알아야합니다.

HTML 이미지 맵을 사용할 때 왼쪽 상단을 0,0이라고합니다. 이 경우 오른쪽 하단은 250,400입니다. 폭을 먼저 측정 한 다음 높이를 측정합니다. 그것을 쉽게 생각할 수있는 방법은 첫 번째 측정은 HTML이 왼쪽 가장자리에서 오른쪽으로 얼마나 먼지를 알려주는 것이고, 두 번째 측정은 아래로 몇 픽셀을 내리는지를 말하는 것입니다. 프로그래머가지도의 한 지점이 왼쪽 가장자리에서 10 픽셀, 아래로 50 픽셀이되도록하려면 좌표는 10,50이됩니다.

프로그래머가 HTML 이미지 맵에 대해 호출 할 수있는 세 가지 다른 모양이 있습니다 : 사각형, 원, 다각형. "Rect"는 사각형을 나타내며, 프로그래머는 먼저 왼쪽 위 모서리에 대한 좌표를 입력 한 다음 오른쪽 아래에 좌표를 입력해야합니다. 원은 원이 시작되는 좌표를 입력 한 다음 원의 반지름을 입력하여 지정합니다. 다각형은 위에서 아래로 5 개의 좌표를 모두 입력하여 만들어집니다.

HTML 이미지 맵 코딩은 다음과 같습니다.
<map name = "test">
<area href = "url.html"shape = rect coords = "10,50,20,60">
<area href = "url.html"shape = circle coords = "10,50,4">
<area href = "url.html"shape = polygon coords = "10,50,12,55,15,60,13,65,8,55">

각 HTML 이미지 맵에는 이름이 있어야하며 "url.html"섹션은 이미지 맵의 해당 섹션을 클릭 할 때 사용자를 안내하는 링크입니다. 이미지가 HTML을 사용하여 웹 사이트에 배치되면 프로그래머는 다음과 같이 작성해야합니다. usemap = "test." 이것은 사용할 HTML 이미지 맵을 이미지에 알려줍니다.