在JavaScript数组中向图像添加超链接

Question

I found some topics on this, but none really answered my question as they had the array implemented differently.

I have this javascript array with images and two buttons next and previous. I want to add hyperlinks to the pictures in the array so that when I cycle through them via the buttons I can click them and enter mentioned sites.

The HTML is as follows:

<div id="leftbox">
<p id="leftpopis"> Whats new on the web? </p>
<img src="obrazky/0.png" id="imgDemo" > 
<button onclick="prvs()" id="btnTwo"> <img src="obrazky/left.png"/> 
</button> 
<button onclick="nxt()" id="btnOne"> <img src="obrazky/right.png"/> 
</button>

And the javascript also as follows:

<script>
var img = new 
Array("obrazky/0.png","obrazky/1.png","obrazky/2.png","obrazky/3.png");

var imgElement = document.getElementById("imgDemo");
var i = 0;
var imgLen = img.length;

    function nxt()
    {
        if(i < imgLen-1)
            {
                i++;
            }
        else{
                i=0;                
            }

            imgElement.src = img[i];                    
    }

    function prvs()
    {
        if(i > 0)
            {
                i--;
            }
        else
        {
            i = imgLen-1;
        }
            imgElement.src = img[i];                    
    }

It is functional, such that it switches the pictures but when I want to add something like this to the array:

var img = new Array Array("<a href="comments.html"> obrazky/0.png"</a>);

It doesn't work. Has someone any idea, how to update the array so it works as intended?

Answer 1

At first glance, I may be missing other things, but it looks like you are accidentally exiting your string and also not fully including the anchor tag.

var img = new Array("<a href="comments.html"> obrazky/0.png"</a>);

You have a couple options here. You can use single-quotes (and include your a tag) like this

var img = new Array("<a href='comments.html'> obrazky/0.png</a>");

or I think you can use a literal string here using the backtick (under the ~squiggly)

var img = new Array(`<a href="comments.html"> obrazky/0.png</a>`);

Answer 2

Create a object with the images and the urls maybe?

[{img: "obrazky/0.png", url: "comments.html"}, {...}, {...}]

imgElement.src   = img[i.img];
linkElement.href = img[i.url];

Answer 3

I see what you're trying to do. I'd recommend loading your content beforehand but in this example you have I'd recommend using an object opposed to an array. Or even an array of objects. So:

var img = [
    {
        "img": "obrazky/0.png",
        "href": "comments.html",
    },
    {
        "img": "obrazky/0.png",
        "href": "comments.html",
    }
];

You can access the properties as such img[i].img and img[i].href .

So in your current setup you wanna do something like:

<a href="" id="imageAnchor"><img id="imgDemo" src=""></a>

And set your data with

document.getElementById("imageAnchor").href = img[i].href;
document.getElementById("imgDemo").src = img[i].img;

BUT as I said previously, a better method would be to load your images beforehand and cycle through them.

<ul id="images">
    <li class='active'><a href="comments.html"><img src="obrazky/2.png"></a></li>
    <li><a href="comments.html"><img src="obrazky/1.png"></a></li>
    <li><a href="comments.html"><img src="obrazky/0.png"></a></li>
</ul>

<style>
    ul#images {
        margin:0px;
        padding:0px;
        list-style-type:none;
    }
    ul#images li {
        display:none;
    }
    ul#images li:first-child,
    ul#images li.active {
        display:block;
    }
</style>

<script>
     imageContainer = document.getElementById("images");

     document.getElementById("btnOne").addEventListener(function(event) {
         event.preventDefault();
         //do magic here.
         //been a while since I've touched vanilla so give me a minute :d
         //basically what you need to do here is cycle through the nodes, 
         //find the active one, if there is a nextSibling of .active:
         // set nextSibling.class ='active' and the current element remove active
         for(var i=0; i < imageContainer.childNodes.length; i++) {
             if (imageContainer.childNodes[i].className == 'active') {
                  if (imageContainer.childNodes[i].nextSibling !== 'undefined') {
                      imageContainer.childNodes[i].nextSibling.className = 'active';
                      imageContainer.childNodes[i].className = '';
                  }
              }
         }
     };

     //Notice this function is similar and I've replaced nextSibling with Previous for the opposite direction 

     document.getElementById("btnTwo").addEventListener(function(event) {
         event.preventDefault();

         for(var i=0; i < imageContainer.childNodes.length; i++) {
             if (imageContainer.childNodes[i].className == 'active') {
                  if (imageContainer.childNodes[i].previousSibling !== 'undefined') {
                      imageContainer.childNodes[i].previousSibling.className = 'active';
                      imageContainer.childNodes[i].className = '';
                  }
              }
         }

</script>

Not tested it but that's the sort of thing you want to be doing

Answer 4

I think you are mixing the src and the link by itself.

If you want to create everything on the client side you can keep an array with the information of both field per image:

var img = [ {link='xxx', src="obrazky/0.png"}, {link='yyy' src="obrazky/1.png"},... ]

Then in your template, you have to wrap the image with a link:

<a id='imgDemoLink'> <img id='imgDemo'></a>

and then in your script you should update both DOM elements:

imgElement.src = img[i.src];

Then get the DOM related link:

var aElement = document.getElementById("imgDemoLink");
aElement.href = img[i.link]

Let me know if you need any extra help there...

Answer 5

Simply add the url corresponding to each image to an array, and add click events to the images. The click event should redirect the user to the url corresponding to the clicked image.

<script>
var img = new Array("obrazky/0.png", "obrazky/1.png", "obrazky/2.png", "obrazky/3.png");
//add this array for urls
var urls = new Array("example1.com", "example2.com", "example3.com", "example4.com");

var imgElement = document.getElementById("imgDemo");
var i = 0;
var imgLen = img.length;

function nxt()
{
    if(i < imgLen-1)
        {
            i++;
        }
    else{
            i=0;                
        }

        imgElement.src = img[i];
        //add click event to redirect 
     document.getElementById("imgDemo").addEventListener("click", function(){
         window.location.href = urls[i];
     });                      
}

function prvs()
{
    if(i > 0)
        {
            i--;
        }
    else
    {
        i = imgLen-1;
    }
        imgElement.src = img[i];
     //add click event to redirect 
     document.getElementById("imgDemo").addEventListener("click", function(){
         window.location.href = urls[i];
     });                   
}
</script>