본문 바로가기
  • We are looking for banner advertisers Please refer to the email below

이미지맵2

HTML 이미지맵 반응형 적용 방법 이미지의 영역별로 링크를 넣을 땐 이미지맵(image map) 을 사용하게 되는데, 이 이미지 맵을 일반적인 소스로 작성시 모바일같이 화면의 영역에 맞춰 사이즈가 조정되는 반응형에는 정상적으로 링크가 적용되지 않을 때 처리하는 방법에 대해 알아보도록 하겠다. 자바스크립트 삽입 위의 자바스크립트를 삽입하게 되면 이미지의 사이즈가 100%로 기준점이 정상적으로 잡히게 된다. 이미지맵(좌표링크) 사용방법 crone.tistory.com/309 HTML 이미지맵 (image map) 좌표 링크 설정 방법 하나의 이미지내에서 좌표를 설정하여 링크를 설정하기 위해서는 이미지맵(image map) 을 사용하게 되는데, 프로그램을 사용하여도 되지만 소스자체가 워낙 간단하다보니 소스를 이해하여 직접 crone.tisto.. 2021. 3. 19.
HTML 이미지맵 (image map) 좌표 링크 설정 방법 하나의 이미지내에서 좌표를 설정하여 링크를 설정하기 위해서는 이미지맵(image map) 을 사용하게 되는데, 프로그램을 사용하여도 되지만 소스자체가 워낙 간단하다보니 소스를 이해하여 직접 원하는 좌표를 선택하여 링크설정이 가능하다. 이미지맵 기본 사용 소스 이미지맵 사용 예시 위를 해석하자면, www.naver.com/image/test.png 이미지를 불러와 imagemap 이라는 명칭을 부여하고, imagemap 이라는 안에 0,100,100,100 의 좌표에서는 naver.com 새창 으로 100,200,200,200 의 좌표에서는 daum.net 새창 으로 이동시킨다. 기타 옵션설정 shape : 좌표의 모양 (rect : 사각형좌표, circle : 원형좌표, poly : 다각형좌표) coor.. 2021. 3. 19.

티스토리툴바