如何使图像出现在Javascript(How to make images appear in Ja

2019-09-22 14:15发布

我不是在JavaScript中非常流畅,我觉得这是很基本的,但我似乎无法在网上找到它的任何地方

我想创建一个链接,将触发JavaScript函数,使图像出现在一个单独的div。 它不能是闪光灯,否则我不反对的编码语言。

我有几个图片,所以我认为要做到这一点的最好办法是分层他们都在彼此的顶部,然后他们的每一个链接被点击时增加z索引,但你可能有一个更好的主意。

我真的只是想好歹创造一种原始图像画廊的不使用闪光灯,并点击相应的链接时,显示其格的照片。

在此先感谢,亚历克斯

Answer 1:

正如Jessegavin说(发现这里 )

你可以把使用JavaScript DOM API的。 特别是,看的createElement()方法。

您可以创建一个可重复使用的功能,将创建一个像这样的图像...

function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;

  // This next line will just add it to the <body> tag
  document.body.appendChild(img); 
}

然后,你可以使用它像这样...

<button onclick="show_image('http://google.com/images/logo.gif', 
  276,110, 'Google Logo");'>Add Google Logo</button> 

不应该有一个线的上方突破,我添加它,以便它可以显示无需滚动即可查看的jsfiddle工作示例: http://jsfiddle.net/Bc6Et/

这应该回答你的问题



Answer 2:

有一吨的JavaScript库,插件(jQuery的),并解决这个问题的其他途径的。

我会做的第一件事是仔细阅读一个这样的网站,看看有什么可供选择: http://sixrevisions.com/javascript/free_javascript_image_galleries/

我以前也使用过这个,这是非常直截了当: http://lokeshdhakar.com/projects/lightbox2/

虽然在一般你可以做<a href="javascript: showImage()">Link</a>和点击,将调用javascript函数showImage()您定义的地方。 然后分层的div如你所描述会工作。



文章来源: How to make images appear in Javascript