HTML img onclick Javascript

时间：2014-04-28 03:04:30

标签： javascript onclick

如何让JavaScript在带有ONCLICK事件的新WINDOW中打开当前图像。

<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.

6 个答案:

答案 0 :(得分：53)

你走了。

<img src="https://i.imgur.com/7KpCS0Y.jpg" onclick="window.open(this.src)">

答案 1 :(得分：4)

这可能对你有用...... 

<script type="text/javascript">
function image(img) {
    var src = img.src;
    window.open(src);
}
</script>
<img src="pond1.jpg" height="150" size="150" alt="Johnson Pond" onclick="image(this)">

答案 2 :(得分：1)

我认为您的错误在于调用函数。

在您的HTML代码中，onclick正在调用image()函数。但是，在脚本中，该函数名为imgWindow()。尝试将onclick更改为imgWindow()。

我没有做太多的JavaScript，所以如果我错过了什么，请告诉我。

祝你好运！

答案 3 :(得分：0)

请同时注意可访问性。

在未定义 ARIA角色的情况下，请勿在图像上使用onClick。

非交互式HTML元素和非交互式ARIA角色指示用户界面中的内容和容器。非交互式元素不支持事件处理程序（鼠标和键处理程序）。

开发人员和设计人员负责提供该角色建议具有的元素的预期行为：可聚焦性和按键支持。 有关更多信息，请参见WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets。

tldr; ：应该这样做：

  <img
    src="pond1.jpg"
    alt="pic id code"
    onClick="window.open(this.src)"
    role="button"
    tabIndex="0"
  />

答案 4 :(得分：0)

使用这个简单的鳕鱼：

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
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%;
  }
}
</style>
</head>
<body>

<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>

<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <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>

</body>
</html>

此代码打开并关闭您的照片。

答案 5 :(得分：0)

如 my comment to @Ben 中所述，公认的解决方案似乎不适用于 data:URL 图像。

有时需要重新审视潜在的意图。就我而言，我希望访问者能够在她的屏幕上看到尽可能大的图像。

如果这是您的意图，这里有一个解决方案：

  • 核心思想：在DOM中注入一个窗口填充div，并将图片数据放入background-image CSS样式
  • 代码：

// the the click/tap handler to maximize the small image 
var Min = document.getElementById('Min');
if (Min){
  Min.addEventListener('click', function(){
  
    // transfer the image data
    Max.style.backgroundImage="url(" + this.src + ")";
    
    // make the large image appear
    Max.style.display="block";
  });
}

// the the click/tap handler to minimize the large image 
var Max = document.getElementById('Max')
if (Max){
  Max.addEventListener('click', function(){

    // make the large image disappear
    Max.style.display="none";
  });
}
#Min {
  /* just for fun */
  cursor: zoom-in;
}
#Max {
  /* fill the window */
  position: fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  
  /* prepare for the precious load */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  
  /* make sure the environment is ready to dominate the scene */
  z-index: 10000;
  background-color:#fff;
  
  /* div is initially hidden */
  display:none;
  
  /* the fun never ends */
  cursor: zoom-out;
}
<!-- src can be an image URL as well! -->
<img id="Min" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAIAAACzY+a1AAAABmJLR0QA/wD/AP+gvaeTAAAC7ElEQVR4nO3dwWrkMBAA0Tjk/3/ZOeQQEUaZFt0tq6DecZn1eii0Qh7Zvu77/hDZ59MnoCwT4pkQz4R4JsQzIZ4J8UyIZ0I8E+KZEM+EeCbEMyGeCfFMiGdCPBPimRDPhHgmxDMhngnxTIj3VXis67oKj/Zj3Kk8O35kN/P4d2efn32m+3slOQrxTIhnQrzKuXCU+b8+M+fNzOa21WN2fK8kRyGeCfFMiNc1F44ic0DH2i7yb2Xmp6rvleQoxDMhngnxdsyFHSLz4mzO61h3PshRiGdCPBPiUefCUdVaMHPt9EGOQjwT4pkQb8dcWDWvrP7m13299JD50lGIZ0I8E+J1zYUd+0Qi+zxXr5dmzuEQjkI8E+KZEO86ZHGzKjMvrh7zcI5CPBPimRCvci6susbYMc9Fjp/5zEzH+f/hKMQzIZ4J8brWhd3rtlHVV4gcf/X8N6w1HYV4JsQzIV7Xc2cy+zZXf/9bPbfIcTr2+zRxFOKZEM+EeE9eI52pWod1WL1e6lyo90yIZ0K8rrkw8xzRzO+Ombmw6v6Kzc+jcRTimRDPhHi795FWrfNW59oT5jb3zug1E+KZEG/H/YVV9zbMnqOW2Qu6eg6zz0T+3L0zes2EeCbE27F3ZhT5LTDymcxz1Kre/TTTMTf/w1GIZ0I8E+KdeK99x7qq4zpqhnOhfpkQz4R4Jz6bO7Oei6w1M+cwO5/MWjbJUYhnQjwT4pHea9/xjJjuPS8b1pqOQjwT4pkQj/Re+8xxVt9lOMqsKZ0L9Z4J8UyIR3qvfccxM3Pk7Hwi+4AKOQrxTIhnQrwTfy+cicwlVb/hVe1l3cBRiGdCPBPikebCGcpzZ7y/UK+ZEM+EeKT32lcdc+d7Cn0eqd4zIZ4J8UjvtY/ofr/E6nXRDWtERyGeCfFMiHfivfZa4ijEMyGeCfFMiGdCPBPimRDPhHgmxDMhngnxTIhnQjwT4pkQz4R4JsQzIZ4J8UyIZ0I8E+KZEM+EeN9J+oQ5rikYTQAAAABJRU5ErkJggg==" />

<div id="Max"></div>

此代码适用于图像文件和数据：URL。

有什么改进建议吗？

相关问题
最新问题