Question

我正在使用以下代码显示可行的随机图像。如何添加到此代码，以便每个图像获得它自己的链接？即如果随机选择“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();

Answer 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();

Answer 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>

Answer 3

使用img

围绕a

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

然后添加

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

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

Answer 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();

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

使用拟合链接显示随机图像

4 个答案: