Is there a css option that links an html image to itself?

So this:

<html>
    <head>
        <style>
            img{href:self}
        </style>
    </head>
    <img src="./Sampleimage"/>
</html>

would basically be the code I need, but since I don't know how or even if there is an option to do this, I figured, I have to ask someone more intelligent than me.

I kinda have to do this because I have about 200 images in this html Document, and every single one of them has to link to itself. So a seperate <a> tag for every image wouldn't be very stylish.

Expanding off of WillardSolutions' comment...

document.getElementById("myImg").addEventListener("click", function() {
  window.open(this.getAttribute("src"));
});
.clickable {
  cursor: pointer;
}
<img id="myImg" class="clickable" src="https://www.w3schools.com/images/compatible_chrome.gif"/>

How to use an image as a link in HTML?, How do I make part of an image a link in HTML? To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding a link. Under the image tag src attribute, add the URL of the image. With that, also add the height and width.

Nice idea, but no, as the commenters above have explained.

What you can do is get the source URL of each image using jQuery and append it to the parent <a> element. I would do this on page load rather than on clicking the image, as then the images are ready to click.

I would also suggest using a thumbnail version of the image, otherwise it will take ages for the page to load. (If you do that, you will need to put all the thumbnails in a subdirectory and then remove that subdirectory from the link URL using a replace function).

$( document ).ready(function() {
    
  $("img").each(function(){
    var imgUrl = $(this).attr('src');
    $(this).parent().attr('href', imgUrl);
  }); 
    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a><img src="https://cdn.pixabay.com/photo/2018/12/15/02/53/flower-3876195_960_720.jpg" width="200"/></a>

Learn How Area Coords Define Shapes & Sizes In HTML », Which tag has the coordinates and shape of clickable area? A clickable image is an image that acts also as an HTML hyperlink. Clicking on any part of the image will redirect the user to another URL or webpage. You can make any image on a webpage clickable. Simple HTML is all you need to create the image clickable, just as a text link. First, let's look at how images

Don't use JS for this simple solution...

<a href="image-src.ext">
 <img src="image-src.ext"/>
</a>

if you want the image to be downloadable add the download attribute to <a>. It is really no problem and the faster performance solution. And about 'stylish'... forget about stylish in coding :D

How to increase the clickable area of a <a> tag button?, Links point the user to a different HTML document, and images pull another Next, add a new file to that folder called links.html and insert the following HTML GIFs are the go-to option for simple animations, but the trade off is that they're typography,” you’ll also find yourself using curly quotes quite a bit. An unvisited link is underlined and blue. A visited link is underlined and purple. An active link is underlined and red. However, you can overwrite this using CSS. Learn more about styling links. HTML Link Syntax. Links are specified in HTML using the <a> tag. A link or hyperlink could be a word, group of words, or image.

This might be the solution you are looking for.

Here is the fiddle. https://jsfiddle.net/RadekD/bgfpedxv/1/

HTML
<img class="image" src="https://placeimg.com/100/200/nature" />
<img class="image" src="https://placeimg.com/200/200/nature" />
<img class="image" src="https://placeimg.com/300/200/nature" />
JS
var images = document.querySelectorAll('.image');
    images.forEach(function(element) {
        element.addEventListener("click",function(){
            window.location.assign(element.src);
        });
    });

Links and Images Tutorial, More "Try it Yourself" examples below. Definition and Usage. The :link selector is used to select unvisited links. Note: The :link selector does not style links you  HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. Note: A link does not have to be text.

CSS :link Selector, img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 150px; } <​img src="paris.jpg" alt="Paris">. Try it Yourself ». Thumbnail Image as Link:  In HTML the image and the clickable areas are coded separately. However, from the visitor’s perspective, it appears that portions of the image itself are linked to different destination. HTML Elements Used to Create Image Maps. There are three HTML elements used to create image maps: img: specifies the location of the image to be included in

CSS Styling Images, More "Try it Yourself" examples below. Definition and Usage. The <area> tag defines an area inside an image map (an image map is an image with clickable  Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed Use the HTML width and height attributes to define the size of the image Use the CSS width and height properties to define the size of the image (alternatively) Use the CSS float property to let the image float

HTML area tag, Example. An image map, with clickable areas: More "Try it Yourself" examples below. Definition and Usage. The <map> tag is used to define an image map. Answered Apr 24, 2018. You cannot add a link to an image (or any other element) using CSS. You must either add it in the HTML <a href=” http://example .net”><img></a> or with JavaScript. JQuery is a very easy way to do this. Google “JQuery on click” and look at either “.click ()” or “.on ()”. * click is a bit simpler.

Comments
  • Well, that's not controlled by CSS as it's not a presentational aspect. You need <a> tag to be inserted programmatically. Why do you think a seperate <a> tag for every image wouldn't be very stylish?
  • What do you mean by "link to itself"? Have an href that opens up the src of the image in a new tab/window?
  • You could do this with pretty simple JS. Listen for a click event on your img, grab the src and open that link
  • Only drawback with 200 images would be 200 event listeners that might potentially slow down the page. Event delegation would help
  • You probably should add cursor: pointer to the CSS for all images you do that for, so it's clear that the images are clickable.
  • Thanks for the suggestion, @jPlatte. I added it to the answer.
  • I have ~200 Images. I dont think I'll do that for every one of them.
  • You place them by hand? Then use JS, for faster results. But I recommend using something like a flat file system and store ur image data somewhere and let PHP render the page with a and img tag for you. Have a look at GRAV Flat file CMS