순수한 CSS onClick 이미지 확대 효과를 만드는 법

CSS에 대한 가상 클래스가 없습니다. 클릭 이벤트 타겟팅, 이것은 가장 큰 고통 포인트 프런트 엔드 개발자의 가장 가까운 가상 클래스는 다음과 같습니다. :유효한 사용자가 마우스를 누르고있는 동안 요소를 스타일링합니다..

그러나이 효과는 단명합니다 : 사용자가 마우스를 놓으면, :유효한 더 이상 작동하지 않습니다. 다른 방법을 찾아야 해. CSS에서 click 이벤트를 에뮬레이트한다..

이 게시물은 독자의 요청에 따라 작성되었으며, 순수한 CSS로 click 이벤트를 목표로 삼는다. 특정 사용 사례, 이미지 확대 / 축소.

아래의 최종 결과를 볼 수 있습니다. CSS 전용 솔루션 이미지 클릭시 확대 / 축소.

CSS 전용 솔루션을 사용해야하는 경우

진행하기 전에 이미지 확대를 위해 CSS 만 사용하는 방법 (이미지의 크기를 변경하는 방법)을 권장합니다. 단일 또는 몇 개의 이미지 그룹 줌 기능을 사용하려면.

들어 적절한 갤러리, 자바 스크립트는 더 많은 유연성과 효율성을 제공합니다.

우리가 사용할 프론트 엔드 기법

이제는주의를 기울 였으니 3 가지 핵심 기술 우리는 다음을 사용할 것이다.

1. 그만큼 HTML 태그 브라우저에서 이미지 위에 링크 가능 영역 만들기. 자세한 내용은 내 이전 게시물의 요소.
2. 그만큼 usemap 의 속성 꼬리표, 이미지 맵에 이미지를 연결합니다..
3. 그만큼 :목표 CSS 가상 클래스 ID 선택기를 사용하여 타겟팅 된 요소를 나타내는.

1. HTML 자료 만들기

먼저 HTML 기반을 만듭니다. 아래 코드에서 우리는 확대 / 축소 및 확대되는 이미지 & 닫기 버튼 아이콘 확대 및 축소 용.

확대 / 축소하려면 이미지에 ID를 지정하는 것이 중요하며 닫기 버튼은 href = "#" 속성, 나는 왜 포스트의 나중에 설명 할 것이다..

2. CSS 추가

처음에는 닫기 아이콘 표시해서는 안된다.. 그만큼 위치, 여유-, 왼쪽, 과 바닥 속성들 장소 그만큼 아이콘 확장 및 닫기 이미지의 오른쪽 상단에 위치해야합니다..

그만큼 포인터 이벤트 : 없음; 규칙으로 마우스 이벤트가 확장 아이콘을 통과하십시오. 과 이미지에 도달하다.

 .img 높이 : 150px; 너비 : 200px;  .close background-image : url ( "Close-icon.png"); background-repeat : no-repeat; 하단 : 418px; 표시 : 없음; 높이 : 32px; 왼쪽 : 462px; margin-top : -32px; 위치 : 상대적; 너비 : 32px;  .expand bottom : 125px; margin-left : -32px; margin-right : 16px; 포인터 이벤트 : 없음; 위치 : 상대적;  

3. 이미지 맵 추가

이미지지도에서 클릭 가능 영역 해야한다 오른쪽 상단에 펼치기 아이콘 바로 아래에있는 이미지의 크기와 크기에 대해 두는 첫 번째 요소 태그에 추가하십시오. 다음 단계에서 이미지를 맵에 바인딩합니다..

위의 코드 블록에서 태그는 모양, 크기 및 링크 가능 영역의 URI 이미지 맵 내부. 들어 직사각형, 그만큼 모양 속성은 직사각형의 가치, 그리고 4 개의 값 ~의 코즈 속성은 거리를 픽셀 단위로 나타냅니다.

1. 이미지의 왼쪽 가장자리와 링크 영역의 왼쪽 가장자리
2. 이미지의 상단 가장자리와 링크 영역의 상단 가장자리
3. 이미지의 왼쪽 가장자리와 링크 영역의 오른쪽 가장자리
4. 이미지의 상단 가장자리와 링크 영역의 하단 가장자리

의 가치 href 속성은 이미지의 해시 식별자 (이 때문에 이미지에 신분증).

4. 이미지 맵에 이미지 바인딩

더하기 usemap 이미지의 속성을 이미지 맵에 그것을 묶는다.. 그 가치는 의 해시 표현 이름 의 속성 꼬리표 3 단계에서 추가했습니다..

이미지 맵의 클릭 가능한 영역 확장 버튼 뒤에 있습니다.. 사용자가 펼치기 버튼을 클릭하면 실제로 클릭 할 수있는 영역입니다. 확장 버튼을 만든 것을 기억하십시오. “상당한” 와 더불어 포인터 이벤트 : 없음; 2 단계의 규칙.

이 방법으로 사용자 이미지 자체를 목표로 삼는다. 이를 클릭하면 클릭 한 후 URI에 접미사가 붙습니다. "# img1" 프래그먼트 식별자.

5. 스타일을 지정하십시오. :목표 의사 클래스

까지 "# img1" 프래그먼트 식별자가 URI의 끝에있는 경우, 대상 이미지는 스타일이있는 :목표 가상 클래스

대상 이미지의 크기가 커지고 닫기 버튼이 표시되며 확장 버튼이 숨겨집니다..

 .img : target height : 450px; 너비 : 500px;  .img : target + .close display : block;  .img : target + .close + .expand display : none;  

닫기 버튼의 작동 방식

닫기 버튼이 배경 이미지 (2 단계)로 추가되고 실제로는 태그에 href = # 속성 (1 단계)을 클릭하면 URI 끝 부분에서 조각 식별자가 제거됩니다. 따라서 그것은 또한 는 :목표 가상 클래스 이미지와 이미지 이전 크기로 돌아 간다..

배경 정보 : 이유 하지 ?

지금까지 CSS를 사용하여 해결할 수있는 가장 중요한 솔루션은 이미지를 href = "# imgid" 속성, 이는 또한 이미지 맵 대신 태그.

그만큼 태만 가치 모양 속성은 전체 이미지를 덮는 직사각형 링크 가능 영역. 당신이 사용한다면 대신 이미지를 덮도록 코드를 작성해야하며 동일한 용도로 래퍼 요소를 사용해야 할 수도 있습니다.

그 전에 IE 브라우저를 지원하려면 다음 중 하나를 사용하십시오. 대신에 , 또는 아무 곳이나 클릭하여 이미지를 확대 할 수 있습니다 (이 경우 확장 아이콘이 필요 없습니다).