显示随机图像与拟合链接

Display random image with fitting link

本文关键字：拟合 链接 图像 随机 显示      更新时间：2023-09-26

我使用下面的代码来显示工作良好的随机图像。我如何添加到这个代码，使每个图像得到它自己的链接?例如，如果"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();

概括您的图像列表，以便它可以多用途-您可以稍后添加其他信息。然后用锚标记(<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();

试试下面的例子。就像其他人说的，最好将这些信息存储在数据库之类的东西中，但为了回答你的问题，把你需要的值放入数组中的对象中并引用对象的属性，而不是仅仅使用字符串数组。

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

用a包围img 

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

然后添加

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

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

您可以使用基于约定的方法。在这种情况下，约定是每个产品，将有一个关联的图像在"/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();

这是一个非常幼稚的方法，不能很好地扩展。例如，如果您有一个经常更改的产品列表，或者您需要跟踪可用单元的数量。更健壮的方法是将关于产品的信息存储在数据库中，并在一个页面中显示关于给定产品的数据(产品详细信息页面)，然后使用数据访问技术获取产品列表以在产品列表页面中显示(类似于这里的内容，只是产品列表没有硬编码)，然后每个产品将链接到产品详细信息页面。

相关文章：