How do I make an image clickable?

86,394

<!DOCTYPE html>
<html>
<body>

<span>Open image link in a new tab: 
 <a href="http://www.google.com" target="_blank">
  <img src="D:/MOHIT/HTML/images.jpg" />
 </a>
</span>

</body>
</html>

This is not the best approach. Here is one of the standard approaches to make image clickable.

<a href="your landing page url">
 <img src="your image url" />
</a>

Now, this image will redirect to you on specified URL on click.

There are many ways to do it from uploading it S3/dropbox to using FSCollection (that's for node users only).

So in your case, your snippet will look like this,

<a href="http://www.google.com">
 <img src="D:/MOHIT/HTML/images.jpg" />
</a>
Share:
86,394
jack reacher
Author by

jack reacher

Updated on July 15, 2022

Comments

  • jack reacher
    jack reacher almost 2 years

    Here is the html:

    <div id="panelpic1">
        <a href="https://www.google.com/"style="display:block"target="_blank">
        </a>
    </div>
    

    CSS:

      #panelpic1{
                content: url(file:///D:/MOHIT/HTML/images.jpg);
                float: left;
                width: 250px;
                height: 150px;
                vertical-align: middle;               
               }
    

    This is the way I did it, but it is not working. The image is not clickable. What to do?

  • jack reacher
    jack reacher over 7 years
    after doing what u suggested the image became clickable but its not generating in the page in the specified dimensions.
  • Mukul Jain
    Mukul Jain over 7 years
    Can you just add that images code in your question? It will be very helpful. Thanks
  • Mukul Jain
    Mukul Jain over 7 years
    Please see the updated answer. I've added a code snippet. You just have wrap the image in span.