이미지 하나에 랜덤링크로 이동이 되도록 하는 html

이미지 하나에 다중 링크를 연결해서 여러 가지 링크로 이동이 가능하도록 html 소스에 대해서 알아보도록 하겠습니다. 

기본적인 이미지에 링크를 넣는 방법은

<a href="링크 주소"><img src="이미지 주소"></a>

기본적으로는 이미지 하나에 링크하나가 기본적인 코드입니다. 

 

하지만 필요에 따라서 링크하나에 다중링크를 넣어서 랜덤 하게 이동을 하고 싶을 수 있습니다. 

 

이미지 하나에 다중링크를 연결하여 랜덤하게 이동하는 html 소스

아쉽게도 html으로는 작성이 되지 않고 자바스크립트 소스가 필요합니다. 

<script>
  // 링크 주소를 배열에 저장합니다.
  var links = [
    "링크1 주소",
    "링크2 주소",
    "링크3 주소",
    "링크4 주소"
  ];

  // 랜덤한 인덱스를 선택합니다.
  var randomIndex = Math.floor(Math.random() * links.length);

  // 이미지와 링크를 HTML 코드에 삽입합니다.
  document.write("<a href='" + links[randomIndex] + "'><img src='이미지 주소'></a>");
</script>

여기에는 예로 4가지 링크만 삽입하도록 만들었습니다. 필요에 따라서는 여러 개 링크를 넣으면 위에서 아래로 또는 랜덤 하게 이미지를 클릭하면 여기에 지정한 링크로 이동이 됩니다. 

 

그럼 이미지 하나에 다중링크로 동시에 연결하는 방법은 없을까??

위에서도 언급했지만 기본적으로 이미지 하나에 링크 하나가 기본적인 소스입니다. 그렇다고 방법이 없는 것은 아닙니다. 

 

이미지 맵(Image Map)을 사용하여 다중링크로 이동하기는 가능함

HTML에서 이미지 하나에 다중 링크로 이동하는 방법 중 하나는 이미지 맵(Image Map)을 사용하는 것입니다.

아래는 이미지 맵을 사용하여 이미지 하나에 다중 링크를 연결하는 예제 코드입니다.

 

<!-- 이미지와 링크를 포함한 이미지 맵을 추가합니다. -->
<img src="이미지 URL" alt="이미지 설명" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="x1,y1,x2,y2" href="링크1">
  <area shape="rect" coords="x3,y3,x4,y4" href="링크2">
  <area shape="rect" coords="x5,y5,x6,y6" href="링크3">
</map>

 

위 코드에서는 <img>요소를 사용하여 이미지를 추가하고, usemap속성을 사용하여 해당 이미지와 연결된 이미지맵을 설정합니다.

이미지맵은 <map>요소와 그 안에 <area> 요소를 사용하여 정의합니다. 각<area> 요소는 shape속성으로 영역의 모양을 설정하고, coords속성으로 좌표값을 지정하여 이미지에서 영역을 정의합니다. 이후, href속성으로 해당영역을 클릭하면 이동할 링크를 지정합니다.

위 코드에서 x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,x6,y6는 각각 좌표값을 나타냅니다. 좌표값은 해당 이미지에서의 픽셀 단위로, 상대적으로 지정해야 합니다. 따라서 이미지의 크기와 위치에 따라 좌표값을 조정해주어야 합니다.