在 Javascrip 中添加指向圖像的鏈接

Question

大家好！

首先，我必須告訴您，就 HTML、Javascript 和一般編碼而言，我是新手。 但我花了幾周時間盡可能多地學習。 現在，我經營一個網站，我的開發團隊不再和我一起工作，然后我必須自己做所有事情。

我的問題是：我有一種“大橫幅”，顯示的圖像是根據您的瀏覽器分辨率自動拾取的（沒關系，我要求這個）。 現在，我要做的是為這張圖片添加一個超鏈接。 我嘗試了很多東西，但我做不到。

請您告訴我如何編輯此代碼？

謝謝

三木

<div class="main top">
    <div class="main-holder">
        <div class="cover-holder big-img-holder" id="img-holder">
            <script>
                function randomInteger(min, max) {
                    var rand = min + Math.random() * (max - min)
                    rand = Math.round(rand);
                    return rand;
                }
                var rand = randomInteger(1, {{$lang.extras.number_screenshots_rotations}});

                var picture = document.createElement('picture');
                                    var source = document.createElement('source');
                source.srcset = '{{$config.statics_url}}/images/bg_rotations/extras-' + rand + 'bd_HD.jpg';
                source.setAttribute('media', '(max-width: 2000px)');
                var img = document.createElement('img');
                img.src = '{{$config.statics_url}}/images/bg_rotations/extras-' + rand + 'bd.jpg';

                picture.appendChild(source);
                picture.appendChild(img);
                document.getElementById('img-holder').appendChild(picture);
            </script>
        </div>

Answer 1

通常您可以使用 HTML 標簽<a>設置超鏈接

所以你可以試試

    <a href="your-URL">
        <div class="cover-holder big-img-holder" id="img-holder">
            <script>
               ...
            </script>
        </div>
    </a>

Answer 2

將腳本包裝在類似的東西中

<a id="img-link">

或者只是將 img-holder 更改為<a>而不是<div>

然后在您的腳本中的某處為該<a>容器設置 url

document.getElementById("img-link").href="url";

圖像本身沒有 href 屬性，因此您必須將其提供給<a>

也就是說，如果您想動態執行此操作，如果 url 始終相同，只需將您的<script>塊包裝為

<a href="#">
 <img>
</a>

當您知道 DOM 將具有相同的結構時會更容易，在這種情況下，一個圖像和一個包裝它的<a>標簽，只需為兩者設置 id，並操作它們的屬性，否則，您也可以創建這個<a> Javascript 中的元素，並使用.setChild()為其設置圖像