HTML img onclick Javascript

Question

How do I have JavaScript open the current image in a new WINDOW with an ONCLICK event    lt script gt   function imgWindow       window open  image      lt  script gt    HTML   lt img src  pond1 jpg  height  150  size  150  alt  Johnson Pond  onclick  image    gt   lt -- Have JavaScript open this image with onclick   lt img src  pond2 jpg  height  150  size  150  alt  All-green Pond  onclick  image    gt   lt -- Have JavaScript open this image with onclick   lt img src  pond3 jpg  height  150  size  150  alt  Dutch Pond  onclick  image    gt   lt -- Have JavaScript open this image with onclick

User · Answer

This might work for you      lt script type  text javascript  gt  function image img        var src   img src      window open src      lt  script gt   lt img src  pond1 jpg  height  150  size  150  alt  Johnson Pond  onclick  image this   gt

User · Answer

use this simple cod        lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta name  viewport  content  width device-width  initial-scale 1  gt   lt style gt  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          lt  style gt   lt  head gt   lt body gt    lt h2 gt Image Modal lt  h2 gt   lt p gt In this example  we use CSS to create a modal  dialog box  that is hidden by default  lt  p gt   lt p gt 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  lt  p gt    lt img id  myImg  src  img snow jpg  alt  Snow  style  width 100  max-width 300px  gt    lt  -- The Modal -- gt   lt div id  myModal  class  modal  gt     lt span class  close  gt  amp times  lt  span gt     lt img class  modal-content  id  img01  gt     lt div id  caption  gt  lt  div gt   lt  div gt    lt script gt     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  lt span gt  element that closes the modal var span   document getElementsByClassName  modal   0       When the user clicks on  lt span gt   x   close the modal span onclick   function        modal style display    none      lt  script gt    lt  body gt   lt  html gt    this code open and close your photo

User · Answer

I think your error was in calling the function  In your HTML code  onclick is calling the image   function  However  in your script the function is named imgWindow    Try changing the onclick to imgWindow    I don t do much JavaScript so if I have missed something  please let me know  Good Luck

User · Answer

Developers also take care about accessibility   Do not use onClick on images without defining the ARIA role   Non-interactive HTML elements and non-interactive ARIA roles indicate content and containers in the user interface  A non-interactive element does not support event handlers  mouse and key handlers     The developer and designers are responsible for providing the expected behavior of an element that the role suggests it would have  focusability and key press support  More info see WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets   tldr  this is how it should be done      lt img     src  pond1 jpg      alt  pic id code      onClick  window open this src       role  button      tabIndex  0      gt

User · Answer

here you go    lt img src  https   i imgur com 7KpCS0Y jpg  onclick  window open this src   gt

[javascript] HTML img onclick Javascript

Examples related to javascript

Examples related to onclick