0

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.

Riedler
  • 375
  • 4
  • 11

4 Answers4

1

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');
Tim Klein
  • 2,538
  • 15
  • 19
  • Only drawback with 200 images would be 200 event listeners that **might** potentially slow down the page. [Event delegation](https://davidwalsh.name/event-delegate) would help – Ludovit Mydla Jan 04 '19 at 14:02
  • 3
    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. – jplatte Jan 04 '19 at 14:05
  • Thanks for the suggestion, @jPlatte. I added it to the answer. – Tim Klein Jan 04 '19 at 14:54
0

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>
Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47
0

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

muuvmuuv
  • 901
  • 2
  • 13
  • 39
  • 1
    I have ~200 Images. I dont think I'll do that for every one of them. – Riedler Jan 04 '19 at 14:21
  • 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 – muuvmuuv Jan 04 '19 at 14:23
0

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);
        });
    });
Radek Dądalski
  • 26
  • 5