하나의 작은 이미지를 클릭하여 더 큰 이미지 버전을 변경하려면 어떻게해야합니까?

Question

예 : 4 개의 미리보기 이미지와 1 개의 큰 이미지가 있습니다. 미리보기 이미지를 클릭하면 더 큰 이미지가 해당 미리보기 이미지로 바뀝니다.

target = ""안에 값을 넣을 수 있다고 생각 했습니까?

나는 다른 언어를 잘 모르기 때문에 html/css 만 사용하기를 바라고 있었지만 어떤 해결책이 좋을지 도처에 들여다 보았습니다.

Answer 1

가능한 솔루션의 몇 :

는

1. 순수 HTML은 : 더 큰 이미지를 포함하는 name와 함께 <iframe>를 사용하고 적절한 target와 함께 <a>의에서 썸네일 이미지를 삽입 href

2. 순수 CSS : display: none 세트와규칙 내에서 :target 의사 클래스의이고 각각은 id입니다. 작은 이미지를 <a>에 넣고 href=#id으로 삽입합니다.

물론 Javascript/jQuery 솔루션이 있습니다.

Answer 2

이렇게하면 필요한 답을 얻을 수 있습니다. JavaScript가 있지만 매우 기본입니다.

Simple Image Swap