在示例中使用 javascript 为图像分配超链接答案

【问题标题】：assigning a hyperlink to an image with javascript in the example在示例中使用 javascript 为图像分配超链接
【发布时间】：2022-12-04 08:10:51
【问题描述】：

$(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

我将在示例中向我的网站添加一个弹出窗口，但我想向在 js 代码中打开的图像添加超链接。比如google图片打开，当我点击图片的时候，我想去google.com网页。请帮忙。

I haven't tried yet

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?。当外部资源消失或固定时，依赖于外部资源才能理解的问题变得毫无用处。创建一个minimal reproducible example并放入问题本身反而。 Stackoverflow 确实支持inline live demos

标签： javascript html popup lightcase.js

【解决方案1】：

看看https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute设置属性。

一些事情要做：

使用 JavaScript 创建一个 <a> 元素。
使用 JavaScript 创建一个 <img> 元素。
将 <img> 元素附加到 <a> 作为孩子使用 appendChild()
使用 JS document.getElementbyID() 并使用 ELEMENT.setAttribute(NAMEOFATTRIBUTE, value) 设置<a> 元素的href。
使用 JS document.getElementbyID() 并使用 ELEMENT.setAttribute(NAMEOFATTRIBUTE, value) 设置<img> 元素的src。

【讨论】：

您可以编辑我示例中的 js 以创建指向下拉图像的超链接吗？
我做到了。这是第 1、3 和 4 步。

【解决方案2】：

你解决了吗请在此处发布更新的代码。

谢谢

【讨论】：

这并没有提供问题的答案。可以search for similar questions，或参考页面右侧的相关链接问题寻找答案。如果您有相关但不同的问题，ask a new question，并包含指向此问题的链接以帮助提供上下文。见：Ask questions, get answers, no distractions

【解决方案3】：

你需要做什么：

创建弹出容器元素
创建超链接并设置适当的属性
将超链接作为子项附加到容器
创建图像元素并设置适当的属性
将图像作为子链接附加到超链接

这在您的 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);

如果你计划有多个弹出窗口，你应该为此创建一个Popup类，并在你需要的地方使用new Popup()。

【讨论】：

谢谢你的回答。然而，我无法理解。你能更新和分享示例代码吗？
@dede1907 你想让我具体更新什么？
我希望您通过编辑示例中有效的 js 代码来添加图像链接
@dede1907 这就是这个答案的作用。它创建一个链接并在链接中放置一个图像，从而创建一个链接图像。我不会为您编写代码。我已经给了你你需要的信息。由您来实施它。