Question

我正在寻找使用从潜在图像列表中选择的图像替换特定图像的代码。我有一个图像列表，我打算让图像（或它们的标签）可点击，在该点击我想让页面顶部的四个图像中的一个更改为点击的图像。（对不起判刑，我很难解释事情。）

如果我能提供任何进一步的信息来澄清，请告诉我。提前谢谢！

PS这是我到目前为止的代码：

<html>
<head>
<style type="text/css">
 .row { vertical-align: top; height:auto !important; }
 .list {display:none; }
 .show {display: none; }
 .hide:target + .show {display: inline; }
 .hide:target {display: none; }
 .hide:target ~ .list {display:inline; }
 @media print { .hide, .show { display: none; } }
</style>
<script type="text/javascript">
function Down(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
    sender.style.width=(300) + 'px';}
function Up(sender)
{ var thisWidth=parseInt(sender.style.width.replace('px',''));
    sender.style.width=(150) + 'px';}

</script>

<style>
a:link {color: #003300; font-weight: bold; font-size:18;}
a:visited {color: #003300; font-weight: bold; font-size:18;}
a:hover {color: #00FF00; font-weight: bold; font-size:18;}
a:active {color: #00CC00; font-weight: bold; font-size:18;}
table {width:99%; border: 2px solid black; background-color:white;}
td {border: 0px solid #ccc; vertical-align:center;}
img {border:2px solid #000; width:150px;}
#select1, #select2, #select3, #select4 {border:2px solid #000; width:300px;}
#name {text-align:right;}
#pic {text-align:left;}
</style>
</head>

<body>
<font size="5"><center><b>Here are the seed beads I currently have available. Click and hold an image to see a larger image.</b></center></font>
<table>
        <tr>
            <td>
                <center><img id="select1" src="img/selectedIMG.jpg"/></center>
            </td>
            <td>
                <center><img id="select2" src="img/selectedIMG2.jpg"/></center>
            </td>
        </tr>
</table><br>

    <div class="Toho Seed Beads Size 15">
        <a href="#hide3" class="hide" id="hide3">Toho Seed Beads Size 15 (+)</a>
        <a href="#show3" class="show" id="show3">Toho Seed Beads Size 15 (-)</a>
            <div class="list">
                <ul type="none">
                <li>
                    <table>
                        <tr>
                            <td id="name">Silver Lined<br>Crystal Clear<br>Size 15</td>
                                <td id="pic"><img src="img/Toho_s15_SilverLinedCrystalClear.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
                            <td id="name">Transparent<br>Deep Sky Blue<br>Size 15</td>
                                <td id="pic"><img src="img/Toho_s15_TransparentDeepSkyBlue.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
                            <td id="name">Ceylon<br>Light Rose<br>Size 15</td>
                                <td id="pic"><img src="img/Toho_s15_CeylonLightRose.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
                            <td id="name">Opaque<br>Black<br>Size 15</td>
                                <td id="pic"><img src="img/Toho_s15_OpaqueBlack.jpg" onmousedown="Down(this)" onmouseup="Up(this)" /></td>
                        </tr>

                        <tr><td colspan="8"><center><a href="#show3" id="show3">(Close)</a></center/></td></tr>
                    </table>
                </li>
                </ul>
            </div>
    </div>

 </body>
 </html>

Answer 1

也许这个例子会有所帮助？我看到你已经用HTML和CSS标记了这个问题，但最好的解决方案也将涉及JavaScript。您可以在下面的<script>标记内看到。

<!DOCTYPE html>
<html>
    <head>
        <!-- I prefer using jQuery.  If you don't use it, it makes life easier :) -->
        <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
    </head>

    <body>
        <!-- this is wherever your images are actually displayed... -->
        <img id="changing-images" src="first_image.png">

        <!-- and this is whatever triggers the action. Note the IDs on these -->
        <input type="button" id="changing-button" value="Change picture">
    </body>

    <script>
        $(document).ready(function(){

            image_names = ["first_image.png", "second_image.png", "third_image.png"];
            number_of_images = image_names.length;
            current_index = 0;

            $("#changing-button").click(function(){

                // take the mod so that we cycle around the array
                current_index = (current_index+1)%number_of_images;

                // catch the ID of the image area; update its "src" attribute
                $("#changing-images").attr("src",image_names[current_index]);
            });
        });
    </script>
</html>

Answer 2

＆＃13;

$("a").on("click", function(e){
    e.preventDefault();
    var newImg = $(this).attr("href");
    $(".foo").attr("src", newImg);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
    <a href="http://lorempixel.com/400/200/">image 1</a>
    <a href="http://lorempixel.com/500/200/">image 2</a>
    <a href="http://lorempixel.com/100/100/">image 3</a>
</p>

<p>
    <img class="foo" src="http://lorempixel.com/200/200/">
</p>

＆＃13;

如何用各种其他图像替换特定图像

2 个答案: