HTML img onclick Javascript

어떻게 자바스크립트가 열리는 현재 이미지에서 새로운 창 ONCLICK 이벤트입니다.

<script>
 function imgWindow() {
  window.open("image") }
</script>

HTML

<img src="pond1.jpg" height="150" size="150" alt="Johnson Pond" onclick="image()"> <-- Have JavaScript open this image with onclick.
<img src="pond2.jpg" height="150" size="150" alt="All-green Pond" onclick="image()"> <-- Have JavaScript open this image with onclick.
<img src="pond3.jpg" height="150" size="150" alt="Dutch Pond" onclick="image()"> <-- Have JavaScript open this image with onclick.
Dipak Ingole
편집된 질문28일 4월 2014 в 3:15
프로그래밍
javascript onclick
28일 4월 2014 в 3:04
20 파운드
해결책

여기서 당신은 이동합니다.

해설 (1)

이 당신을 위해 일할 수 있습니다...

<script type="text/javascript">
function image(img) {
    var src = img.src;
    window.open(src);
}
</script>
![Johnson Pond](pond1.jpg)
해설 (0)

주의하시기 바랍에도 접근성이다.

를 사용하지 않는onClick없이 이미지에 정의ARIA 역할.

Non-interactive HTML 요소 및 대화형이 아닌 아리아 역할을 나타내는 콘텐츠 및 컨테이너에 사용자 인터페이스가 있습니다. 비 대화식 요소를 지원하지 않는 이벤트를 처리기(마우스 및 키 처리기).

개발자와 디자이너가를 제공할 책임이 예상되는 행동을 요소의 역할이 제안하는 것:초점 기능과 키를 누르면을 지원합니다. 더 많은 정보를 볼WAI-ARIA 제작 사례 가이드에-디자인 패턴과 위젯.

tldr;이것은 어떻게 수행되어야:

  ![pic id code](pond1.jpg)
해설 (0)

사용이 간단한 대구:




<meta name="viewport" content="width=device-width, initial-scale=1">

body {font-family: Arial, Helvetica, sans-serif;}

#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}




<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>

![Snow](img_snow.jpg)


<div id="myModal" class="modal">
  <span class="close">×</span>

  <div id="caption"></div>
</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
</script>

이 코드는 열고 닫는 사진.

해설 (0)