Есть ли опция css, которая связывает изображение html с самим собой? - PullRequest
Новая
       45

Есть ли опция css, которая связывает изображение html с самим собой?

0 голосов
/ 04 января 2019

Итак, это: 

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

в основном был бы тем кодом, который мне нужен, но, поскольку я не знаю, как и даже если есть возможность сделать это, я решил, что должен спросить кого-то более умного, чем я.

Я вроде как должен сделать это, потому что у меня есть около 200 изображений в этом HTML-документе, и каждое из них должно ссылаться на себя. Поэтому отдельный тег <a> для каждого изображения не будет очень стильным.

Ответы [ 4 ]

0 голосов
/ 04 января 2019

Это может быть решение, которое вы ищете.

Вот скрипка. 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);
        });
    });
0 голосов
/ 04 января 2019

Хорошая идея, но нет, как объяснили вышеприведенные комментаторы.

Что вы можете сделать, это получить исходный URL каждого изображения с помощью jQuery и добавить его к родительскому элементу <a>. Я сделал бы это при загрузке страницы, а не при нажатии на изображение, так как тогда изображения готовы к щелчку.

Я бы также предложил использовать уменьшенную версию изображения, иначе загрузка страницы займет целую вечность. (Если вы сделаете это, вам нужно будет поместить все миниатюры в подкаталог, а затем удалить этот подкаталог из URL ссылки, используя replace * ). 

$( 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>
0 голосов
/ 04 января 2019

Не используйте JS для этого простого решения ... 

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

Если вы хотите, чтобы изображение было загружаемым, добавьте атрибут download в <a>. Это действительно не проблема, а более быстрое решение проблемы. А про "стильный" ... забудь о стильном в кодировании: D

0 голосов
/ 04 января 2019

Расширение комментария WillardSolutions ... 

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

Откройте консоль браузера, чтобы увидеть блокировку открытия URL ...

Если вы хотите, чтобы он открывался в новом окне / вкладке, используйте: 

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