How Do I Make an Image Clickable?
Here Is the Html: Css: #Panelpic1{ Content: Url(File: ///D: /Mohit/Html/Images. Jpg); Float: Left; Width: 250Px; Height: 150Px; Vertical-Align: Middle; } This...
Here is the html:
<div id="panelpic1">
<a href=""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?
2 Answers
<!DOCTYPE html>
<html>
<body>
<span>Open image link in a new tab:
<a href="" 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="">
<img src="D:/MOHIT/HTML/images.jpg" />
</a>
In agreement with @mukul-jain, I am updating his answer with a key clarification, as both the question and the answer are important for people new to HTML.
Update: img element in HTML5 is self-closing and does not need /
I most point out that HTML5 img element does not need a closing / as in the answer from five years ago. Thus, I have revised the answer below to comply with this:
<a href="">
<img src="D:/MOHIT/HTML/images.jpg">
</a>
Notice the original answer has / in before >, which is not needed for img elements (see references below). Other than this, his answer is correct on how to make an image clickable, that is, to turn an image into a link.
Supporting Documentation:
- For reference, please see: MDN docs, The Image Embed Element.
- Especially see, 'image link' on MDN docs.
Cheers!
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
