assigning a hyperlink to an image with javascript in the example-CodePudding

$(document).ready(function(){
  var imgURLs = [
    'https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png',
     "https://s.yimg.com/rz/p/yahoo_frontpage_en-US_s_f_p_205x58_frontpage_2x.png"
  ];
  var randomIndex = Math.floor(Math.random() * imgURLs.length);
  var imgURL = imgURLs[randomIndex];

  
  
  setTimeout(function(){
      lightcase.start({
        href: imgURL,
        // more options like width, height, etc.
      });
   },1000); // 1000 to load it after 1 second from page load
  
});

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lightcase/2.5.0/css/lightcase.css'>

</head>
<body>
<!-- partial:index.partial.html -->



<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lightcase/2.5.0/js/lightcase.js'></script><script  src="./script.js"></script>

</body>
</html>

example

I will add a popup to my website as in the example, but I want to add hyperlinks to the images opened in the js code. For example, when the google image opens, when I click on the image, I want to go to the google.com web page. Please help.

I haven't tried yet

CodePudding user response：

Take a look at https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute to set the attributes.

Some things to do:

Create a <a> element using JavaScript.
Create a <img> element using JavaScript.
Append the <img> element to <a> as a child using appendChild()
Use JS document.getElementbyID() and use ELEMENT.setAttribute(NAMEOFATTRIBUTE, value) to set the href of the <a> element.
Use JS document.getElementbyID() and use ELEMENT.setAttribute(NAMEOFATTRIBUTE, value) to set the src of the <img> element.

CodePudding user response：

What you need to do:

Create a popup container element
Create a hyperlink and set the appropriate attributes
Append the hyperlink to the container as a child
Create an image element and set the appropriate attributes
Append the image to the hyperlink as a child

What this will look like in your JavaScript:

// Create the container element
let container = document.createElement('div');
// Add your class styles
container.classList.add('popup-container');
// Create the link element
let link = document.createElement('a');
link.src = 'https://example.com';
// Create the image element
let image = document.createElement('img');
image.src = './path/to/image.png';
// Add to DOM
document.body.appendChild(container);
container.appendChild(link);
link.appendChild(image);

If you are planning on having multiple popups, you should create a Popup class for this and just use new Popup() wherever you need it.