如何使用html和css单击按钮图像来获取按钮图像源

I created a gallery with buttons using html and css. Currently started learning javascript, so hoping this can be done without it. I'm trying to open a full screen image in a new window once the button is clicked. I'm trying to make the source of each button appear on the new window once the button is clicked. I have over 50 button images, so I was wondering if there's a way to get the source of each image that is clicked and opened full screen on the new window.

我使用html和css创建了一个带按钮的图库。目前开始学习javascript,所以希望没有它可以完成。单击按钮后,我正在尝试在新窗口中打开全屏图像。我试图在单击按钮后使每个按钮的源出现在新窗口上。我有超过50个按钮图像,所以我想知道是否有办法获取每个图像的来源,在新窗口中点击并全屏打开。

This is my gallery of image buttons

这是我的图像按钮库

This is the html code for the gallery

这是图库的html代码

3 个解决方案

#1

Firstly you don't have to use buttons to put a click event on a image. I created an example where you click on a image and transfer its URL to another place. It's the same principle you need. It's a jQuery solution.

首先,您不必使用按钮在图像上放置单击事件。我创建了一个示例,您可以单击图像并将其URL转移到另一个位置。这是你需要的原则。这是一个jQuery解决方案。

Next time, post your code here instead a image.

下次,在此处发布您的代码而不是图像。

JSFiddle: http://jsfiddle.net/6tf9uk6x/

$("img.btnImage").on("click", function() {
    $("#selectedImage").html("<img src='"+$(this).attr("src")+"'/>");
});

#selectedImage, #selectedImage img {
    width: 100%;
    clear:both;
}

.btnImage {
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
    <img src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" width="100" class="btnImage" />
    <img src="http://dreamatico.com/data_images/cat/cat-6.jpg" width="100" class="btnImage" />
</div>

<div id="selectedImage">
    <h1>No image selected</h1>
</div>

#2

Make the buttons links instead.

改为按钮链接。

<a target="_blank" href="/assets/RaveCandy/picName.gif">
  <!-- image tag as usual -->
</a>

#3

As you said "I'm trying to open a full screen image in a new window once the button is clicked.", so you do not need to use button here.

正如您所说“单击按钮后,我试图在新窗口中打开全屏图像。”,因此您无需在此处使用按钮。

Just make use of anchor tag in a more broad way. Use target="_blank" to open src of the link in the new window.

只需以更广泛的方式使用锚标记即可。使用target =“_ blank”在新窗口中打开链接的src。

Instead of text link inside anchor tag use img tag.

而不是锚标记内的文本链接使用img标记。

<a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis"></a>

Here is the working example, you may like it.

这是工作示例,您可能会喜欢它。

#1