显示带有拟合链接的随机图像答案

【问题标题】：Display random image with fitting link显示带有拟合链接的随机图像
【发布时间】：2013-05-21 21:56:19
【问题描述】：

我正在使用下面的代码来显示可以正常工作的随机图像。如何添加到此代码中，以便每个图像都有自己的链接？ IE。如果“knife.png”是随机选择的，我希望它有一个链接，可以将用户带到“products/knife.html”等等。

感谢您的帮助！

<div id="box">
<img id="image" /></div>

<script type='text/javascript'> 

var images = [
"images/knife.png",
"images/fork.png",
"images/spoon.png",
"images/chopsticks.png",];

function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}

randImg();

【问题讨论】：

在图像周围放置一个标签，并使用相同的技术更改其 href 属性。

标签： javascript html random

【解决方案1】：

概括您的图像列表，使其具有多种用途 - 您可以稍后添加其他信息。然后用锚标签（<a>）围绕图像并使用以下内容。

<div id="box">
  <a name="imagelink"><img id="image" /></a>
</div>

<script type='text/javascript'> 
  var images = ["knife","fork","spoon","chopsticks",];

  function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = "images/"+images[x]+".png";
    document.getElementById('imagelink').href="products/"+images[x]+".html";
  }
</script>

randImg();

【讨论】：

嗯，这似乎对我不起作用。而不是一个有效的链接点击图片只是重新加载当前页面。我做错了什么？
好的，我把改成了
现在它似乎工作了。 :D

【解决方案2】：

尝试做这样的事情example。就像所有其他人所说的那样，最好将此信息存储在数据库或其他东西中，但要回答您的问题，请将您需要的值放入数组中的一个对象中并引用该对象的属性，而不仅仅是一个字符串数组。

<div id="box">
    <a id="a"><img id="image" /></a>
</div>

<script type='text/javascript'> 
var images = 
[
    imageUrlPair = { ImgSrc:"http://www.dansdata.com/images/bigknife/bigknife1280.jpg", Href:"http://reluctantgourmet.com/tools/cutlery/item/267-chefs-knife-choosing-the-right-cutlery" },
    imageUrlPair = { ImgSrc:"http://www.hometownsevier.com/wp-content/uploads/2011/01/fork.jpg", Href:"http://eofdreams.com/fork.html" },
    imageUrlPair = { ImgSrc:"http://upload.wikimedia.org/wikipedia/commons/9/92/Soup_Spoon.jpg", Href:"http://commons.wikimedia.org/wiki/File:Soup_Spoon.jpg" },
    imageUrlPair = { ImgSrc:"http://upload.wikimedia.org/wikipedia/commons/6/61/Ouashi.jpg", Href:"http://commons.wikimedia.org/wiki/Chopsticks" },
]

function randImg() {
var size = images.length;
var x = Math.floor(size * Math.random());
var randomItem = images[x];
document.getElementById('image').src = randomItem.ImgSrc;
document.getElementById('a').href = randomItem.Href;
}

randImg();
</script>

【讨论】：

【解决方案3】：

用a包围img

<a href="#" id="link"><img id="image" /></a>

然后添加

document.getElementById("link").href = images[x].replace(".png",".html");

.replace 有点粗糙，但你明白了。

【讨论】：

【解决方案4】：

您可以使用基于约定的方法。在这种情况下，约定是每个产品在“/image/[product]/.png”处有一个关联的图像，在“products/[product].html”处有一个页面

<div id="box">
<a id="link"><img id="image" /></a></div>

<script type='text/javascript'> 

var products = [
"knife",
"fork",
"spoon",
"chopsticks",];

function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = "/images/" + products[x] + ".png";
document.getElementById('link').setAttribute("href", "products/" + products[x] + ".html");
}

randImg();

这是一种非常幼稚的方法，无法很好地扩展。例如，如果您有一个经常更改的产品列表，或者您需要跟踪可用单位的数量。一种更强大的方法是将有关您的产品的信息存储在数据库中，以及显示有关给定产品的数据的页面（产品详细信息页面），然后使用数据访问技术获取产品列表以显示在一个产品列表页面（类似于您在此处看到的，只是产品列表不是硬编码的），然后每个产品都会链接到产品详细信息页面。

【讨论】：