[英]How to get one image to change to the image i click on using javascript
Hi I'm trying to create a gallery using JavaScript. 嗨,我正在尝试使用JavaScript创建画廊。 I want to have a row of small images at the bottom and when you click on one it will display that image in a bigger window above.
我想在底部有一排小图像,当您单击一个图像时,它将在上方的较大窗口中显示该图像。 and that window currently contains and image.
该窗口当前包含和图片。
New to JavaScript so not 100% sure what I'm doing. JavaScript的新手,所以不能100%知道我在做什么。 here is what I was trying to use but wasn't working.
这是我试图使用但无法正常工作的东西。 Any tips would be great thanks.:
任何提示将非常感谢。:
<script>
function changeimage(val)
{
var x = val.getAttribute("src");
var y = getElementById("Display");
var z = y.getAttribute("src");
z.setAttribute("src","x");
}
</script>
<img class="mid_one" src="Images/home3.jpg" alt="home1" width="186px" height="186px" onclick="changeimage(this)"/>
Thanks in advance. 提前致谢。
<img name="Display" id="Display" src="Images/home2.jpg" width="450" height="450" alt="Displayed Image"/>
edit: added display 编辑:添加显示
Try this 尝试这个
function changeimage(val)
{
var x = val.getAttribute("src");
var y = getElementById("Display");
y.setAttribute("src",x);
}
According to your logic var z = y.getAttribute("src");
根据您的逻辑
var z = y.getAttribute("src");
is a string and not an Element
.. In the next line you seem to set the attribute to the string .. 是一个字符串而
not an Element
..在下一行中,您似乎将属性设置为字符串..
You should set the attribute on the element ( y
), you can't set an attribute on an attribute value ( z
). 您应该在元素(
y
)上设置属性,而不能在属性值( z
)上设置属性。
Also, you should use the variable x
to get the source from the other image, not the string "x"
. 另外,您应该使用变量
x
从其他图像获取源,而不是字符串"x"
。
var x = val.getAttribute("src");
var y = document.getElementById("Display");
y.setAttribute("src", x);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.