如何使图像出现在 Javascript 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12485600/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make images appear in Javascript
提问by user1596790
I'm not very fluent in javascript, and I feel like this is really basic, but I can't seem to find it online anywhere.
我不是在JavaScript中非常流畅，我觉得这是很基本的，但我似乎无法在网上找到它的任何地方。
I want to create a link that will trigger a javascript function that makes an image appear in a separate div. It can't be in flash, otherwise I have no objection to the coding language.
我想创建一个链接，该链接将触发一个 javascript 函数，该函数使图像出现在单独的 div 中。不能在flash中，否则我对编码语言没有异议。
I have several images, so I would think that the best way to do this would be to layer them all on top of each other and then increase the z-index each time their link is clicked, but you might have a better idea.
我有几张图片，所以我认为最好的方法是将它们全部叠加在一起，然后每次单击它们的链接时增加 z-index，但您可能有更好的主意。
I really just want someway to create a sort of primitive image gallery that doesn't use flash and displays the photo in its div when the corresponding link is clicked.
我真的只是想以某种方式创建一种不使用 Flash 的原始图片库，并在单击相应链接时在其 div 中显示照片。
Thanks in advance, Alex
提前致谢，亚历克斯
回答by Azulflame
As Jessegavin said (found here)
正如 Jessegavin 所说（在这里找到）
You could make use of the Javascript DOM API. In particular, look at the createElement() method.
您可以使用 Javascript DOM API。特别是，看看 createElement() 方法。
You could create a re-usable function that will create an image like so...
您可以创建一个可重复使用的功能，该功能将创建像这样的图像......
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);
}
Then you could use it like this...
那么你可以像这样使用它......
<button onclick="show_image('http://google.com/images/logo.gif',
276,110, 'Google Logo");'>Add Google Logo</button>
There shouldn't be a line break above, I added it so that it could show without scrolling See a working example on jsFiddle: http://jsfiddle.net/Bc6Et/
上面不应该有换行符，我添加了它，以便它可以在不滚动的情况下显示 查看 jsFiddle 上的一个工作示例：http: //jsfiddle.net/Bc6Et/
This should answer your question
这应该回答你的问题
回答by xbakesx
There are a ton of javascript libraries, plugins (for jQuery) and other ways of solving this problem.
有大量的 javascript 库、插件（用于 jQuery）和其他解决此问题的方法。
First thing I would do is to peruse a website like this, to see what's available: http://sixrevisions.com/javascript/free_javascript_image_galleries/
我要做的第一件事就是仔细阅读这样的网站，看看有什么可用的：http: //sixrevisions.com/javascript/free_javascript_image_galleries/
I have used this one before, and it's pretty straight forward: http://lokeshdhakar.com/projects/lightbox2/
我以前用过这个，而且非常简单：http: //lokeshdhakar.com/projects/lightbox2/
In general though you can just do <a href="javascript: showImage()">Link</a>and clicking that will call the javascript function showImage()that you define somewhere. Then layering the divs will work as you have described.
一般来说，尽管您可以这样做<a href="javascript: showImage()">Link</a>并单击它会调用showImage()您在某处定义的 javascript 函数。然后分层 div 将按照您的描述工作。
