'Pop-up alert on image click.

I have a question on how you spawn a pop-up when an image is clicked. I want a pop up to be some sort of alert. Here is my current html code I am working with:

<div>
 <div class="Zipshare">
    <span class ="projectIcons">
      <a href="">
        <img src="images/photostack.png" alt="" />
      </a>
    </span>
    <span class="caption"><h6>Photostack</h6></span>
</div>

I have seen other posts describing how to spawn an alert view but don't know how to link it to an image. I was thinking a doing it through some sort of href link but can't figure it out.

Any help would be appreciated!

javascripthtmlcss


Solution 1:[1]

Just add the onclick attribute

<img src="images/photostack.png" onclick="alert('Hello World')" alt="" />

Or use jQuery:

$( "#img" ).click(function() {
  alert( "Hello World jQuery" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="img" src="images/photostack.png" alt="" />

Solution 2:[2]

Lots of ways to do this... Here is a short one inline with your html:

<img src="images/photostack.png" alt="" onclick="alert('you clicked it')" />

Solution 3:[3]

function pictureRc() {
alert("You right clicked that image!")}

This is my function I used in js and the html looked like this:

<img src="pic.jpg" oncontextmenu="pictureRc()">

So when you right click it makes an alert. I know this is late but for anyone finding this thread later thought it might help!

just change the oncontextmenu to onclick for left click

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sman
Solution 2 RobM
Solution 3 Quinten

Related Questions