HTML 이미지에 링크 넣기

1. 이미지 자체에 HTML 링크 넣기

<a href = "링크값" target=_blank" title="새창">

 

2. 일정 영역만 링크 넣기

우선 그림판(포토샵)에서 이미지의 좌표값을 알아내고

 

그 이후 이미지에 해당 값을 추가

 

<p>

<img src="image.png" width="403" height="39" alt="예시사진" usemap="imgMap" /> 

</p>

<map name="imgMap">

<area shape="RECT" coords="X1,Y1,X2,Y2" alt=" href="링크값" />

x1, y1, x2, y2는 그림에서 영역을 지정할 값

 

참고

1. 사각형 ( rectangle )
   <area shape="RECT" coords="X1,Y1,X2,Y2" alt="ALTERNATE TEXT" href="URL" />
   X1, Y1, X2, Y2 : 사각형의 두 꼭지점의 위치.
   하나는 왼쪽, 위의 꼭지점이고, 다른 하나는 우측 아래의 꼭지점이다.
   
   사용 예문 : <area shape="rect" coords="1,-1,83,125" alt="home" href="../home.htm" />
    
2. 원형 ( circle )
   <area shape="CIRCLE" coords="X,Y,RADIUS" alt="ALTERNATE TEXT" href="URL" />
   X, Y, RADIUS : 원중심의 X좌표, 원중심의 Y좌표, 원의 반지름
   
   사용 예문 : <area shape="circle" coords="90,58,3" alt="home" href="../home.htm" />
    
3. 다각형 ( polygon )
   <area shape="POLY" coords="X1,Y1,X2,Y2.....,Xn,Yn" alt="ALTERNATE TEXT" href="URL" />
   X1, Y1, X2, Y2....., Xn, Yn : 3개 이상의 x, y좌표
   
   사용 예문 : <area shape="poly" coords="28,65,57,16,90,65" alt="home" href="../home.htm" />