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>
Author by
jack reacher
Updated on July 15, 2022Comments
-
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 over 7 yearsafter doing what u suggested the image became clickable but its not generating in the page in the specified dimensions.
-
Mukul Jain over 7 yearsCan you just add that images code in your question? It will be very helpful. Thanks
-
Mukul Jain over 7 yearsPlease see the updated answer. I've added a code snippet. You just have wrap the image in span.