Html 이미지 클릭시 팝업 - html imiji keulligsi pab-eob

자바스크립트를 이용한 이미지 팝업 만들기 자체 코드입니다.

라이브러리는 제이쿼리를 이용했고 자세한 코드는 위에 코드펜에 들어가서 확인하시면 됩니다.

포인트는 웹접근성 준수를 위해 키보드 접근성에 맞게 작업을 하였습니다.

즉, 키보드 탭을 누르면서도 팝업을 활성화 및 팝업창 닫기를 이용할 수 있도록 하였고

팝업창이 활성화되면 초점이 해당 팝업 내부로 이동됩니다.

그 후 x버튼을 누르게되면 팝업이 닫히면서 초점은 해당 이미지 팝업 목록으로 다시 되돌아갑니다.

'코딩 기록 > 퍼블리싱 소스' 카테고리의 다른 글

이미지 클릭시 팝업창 뜨게 하기

프로그래밍/HTML & JavaScript|2015. 1. 27. 11:37

반응형

<img style="cursor:pointer;" onclick="window.open('/html/gift.php', 'window', 'width=500; height=800; scrollbars=yes');" src="/images/images.jpg" border="0" complete="complete"/>

반응형

저작자표시비영리변경금지

'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글

댓글()

비밀 답글

이전 1 ··· 628 629 630 631 632 633 634 635 636 ··· 1391 다음

이미지 맵 클릭시 새창 팝업 띄우기

이미지 상에 어떤 영역을 클릭했을때,

새창을 띄우는 스크립트! 

이미지 맵에서 활용해야 하므로 이미지 맵 태그 사용 

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

출처 : www.w3schools.com/html/html_images_imagemap.asp

1. 이미지 맵으로 지정될 영역을 coords 로 잡기 

<map name="popimg"> <area shape="rect" coords="488,316,620,440" onClick="window.open('http://naver.com','_blank','left=100,top=100,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=450,height=600')" onfocus="this.blur()"> </map>

2. 팝업 사이즈 및 위치 지정 

위치 :  보이는 화면에서 left=100, top=100에 위치한 (px) 

사이즈 : width=450, height=600 의 경로의 팝업이 뜨게 된다.

이런건 실전에 사용될 유용한 표현 이므로 잘 모아두면 좋다.

이미지맵을 활용한 팝업창 띄우기. 

<path d="M11.5,5 C17.293,5 20.813,11.041 20.918,11.298 L20.918,11.298 L21,11.5 L20.918,11.701 C20.813,11.959 17.293,18 11.5,18 C5.707,18 2.187,11.959 2.082,11.701 L2.082,11.701 L2,11.5 L2.082,11.298 C2.187,11.041 5.707,5 11.5,5 Z M11.5,6.036 C6.92,6.036 3.565,10.488 3.089,11.499 C3.567,12.51 6.932,16.964 11.5,16.964 C16.08,16.964 19.435,12.512 19.911,11.5 C19.433,10.49 16.068,6.036 11.5,6.036 Z M11.5,8.25 C13.2949254,8.25 14.75,9.70507456 14.75,11.5 C14.75,13.2949254 13.2949254,14.75 11.5,14.75 C9.70507456,14.75 8.25,13.2949254 8.25,11.5 C8.25,9.70507456 9.70507456,8.25 11.5,8.25 Z M11.5,9.25 C10.2573593,9.25 9.25,10.2573593 9.25,11.5 C9.25,12.7426407 10.2573593,13.75 11.5,13.75 C12.7426407,13.75 13.75,12.7426407 13.75,11.5 C13.75,10.2573593 12.7426407,9.25 11.5,9.25 Z" id="Color" />

<path d="M9.48,11.45l-4,2.88a0.84,0.84,0,0,1-1.34-.65V11.45H2.22A1.7,1.7,0,0,1,.5,9.79V2.17A1.7,1.7,0,0,1,2.22.5H14.78A1.7,1.7,0,0,1,16.5,2.17V9.79a1.7,1.7,0,0,1-1.72,1.67H9.48Z" transform="translate(0 0)" fill="none" />