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

Question

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

1.5k views Asked by Riedler At 04 January 2019 at 13:42

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.

Original Q&A

There are 4 answers

Yvonne Aburrow On 04 January 2019 at 14:05

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>

muuvmuuv On 04 January 2019 at 14:06

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

Radek Dądalski On 04 January 2019 at 14:21

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);
        });
    });

**Tim Klein** · Accepted Answer · 2019-01-04T13:58:00+00:00

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"/>

Open your browser console to see the opening of the URL being blocked...

If you want it to open in a new window/tab use:

window.open(this.getAttribute("src"), '_blank');

TechQA.

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

There are 4 answers

HTML

JS

Related Questions in HTML

Related Questions in CSS

Related Questions in HTML-HEAD

Popular Questions

Popular Tags

Trending Questions