问题：

HTML/CSS/JS-如何在单击时更改图像和文本

陆晓博

2023-03-14

当我点击图库中的不同图片时，如何让图片和图片下的文本互换？

我想有4个缩略图图像交换到一个放大的图像时，点击，每显示一个不同的描述下的放大的每一个图像。我已经设法使图像交换，但我不知道从哪里开始与文本部分。

我也希望有标题/链接旁边的每一个图像，可以点击改变图像和文本下的图像。

代码在下面和这个JSfiddle链接中:https://jsfidle.net/hzjk077t/

HTML

<html>

<head>
    <title> Locations </title> 
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="image_swap.js" type="text/javascript"></script>

</head>

<body>
<div id="header">
    <div id="branding">
        <img src="Images/logo.png">
    </div><!-- end of "logo" -->
    <div id="tagline">
    <p> Welcome to yourday.com - We hope you enjoy your visit! </p>

    </div><!-- end of "tagline" -->
</div><!-- end of "header" -->

<div id="bodycontent2">

    <div id="Thumbnails">
        <p>Below, we have a selection of vintage locations across Ireland and some information regarding each. 
        </br>Please take note of the location of your preference, and <a href="mailto:bookings@yourday.com">contact us</a>&nbspto to set up an appointment.
        <p>Select an image to enlarge it</p>
        <ul class="Thumbnails">
            <li><a href="slideshow/img1.jpg" title="location1"><img src="thumbnails/location1.jpg" alt="location1" /></a></li>
            <li><a href="slideshow/img2.jpg" title="location2"><img src="thumbnails/location2.jpg" alt="location2" /></a></li>
            <li><a href="slideshow/img3.jpg" title="location3"><img src="thumbnails/location3.jpg" alt="location3" /></a></li>
            <li><a href="slideshow/img4.jpg" title="location4"><img src="thumbnails/location4.jpg" alt="location4" /></a></li>
        </ul>
    </div><!--end of thumbnail div -->

    <div id="main-image">
        <img src="slideshow/img1.jpg" alt="Enlarged Image" id="the_image" />
    </div><!--end of main image div-->
</div><!--end of body content" -->


<div id="navigation">
<ul class="topnav" id="TopNav">
    <li><a href="home.html">Home</a></li>
    <li><a href="locations.html">Locations</a></li>
    <li><a href="booking.html">Booking</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="about.html">About</a></li>

    </li>
</ul>
</div> <!--end of "navigation" -->

<div id="footer">
  <p>Created by: Calvin Leong</p>
  <p>Contact information: <a href="mailto:calvin.leong@CLDesign.com">calvin.leong@CLDesign.com</a></p>
</div>

</body>
</html>

CSS

body {
        font-family: Verdana, Helvetic, Arial, sans-serif;
        font-size: 16px;
        background-color: #C8A2C8;
        line-height: 125%

}

/*Map - where we are*/
h1{
    position:absolute;
    top: 450px;
}

#map{
    position:absolute;
    top:500px;
}
h2{
    font-family: "Times New Roman", Times, serif;
    font-size: 32px;
    font-weight: italic;

}

#navigation a{
    text-decoration: none;
}

.highlight {
    color: #339999;
    font-family: Georgia, Times, serif;
    font-style:italic:
}

#navigation {
    position: absolute;
    left: 0;
    top: 150px;
    width: 100%
}

 #bodycontent {
     position: absolute;
     top: 620px;
     width: 100%
 }

 #tagline {
     position: absolute;
     top: 200px;
 }

 #bodycontent2 {
    position: absolute;
    top: 250px;
    width: 100%
}

/* Navigation bar */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFB6C1;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #D3D3D3;}

/*Keeps footer at the bottom, no matter what size window*/
html{
    position:relative;
    min-height: 100%;
}

#footer{
    position: absolute;
    bottom: 0;
    top: 1000px;
    width: 100%;
    height: 2px;
    margin: 0 auto;
    border-top: 2px solid #f2f2f2;
    border-width: 0 0 100% 0;
    border-color: gray;
}

/*Gallery settings*/
.galleryphoto {
    font-size: 65%;
    font-weight: bold;
    margin-top: 0;
    width: 430px;
    line-height: 1.4em;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid navy;
    margin-bottom: 10px;
}

#main-image {
        margin: 0.2em 0 0 22em;
        }

#thumbnails p {
        font-size: 80%;
        }

#thumbnails ul {
        list-style-type: none;
        }

#thumbnails li {
        display: block;
        padding: 5% 0 0 0;
        }

#thumbnails {
        width: 16em;
        border-right: maroon;
        border-width: 0 3px 0 3px;
        border-style: dotted solid double;
        padding: 0 1.5%;
        float: left;
        height: 31.5em;
        }

#thumbnails a img {
        border-style: none;
        border-width: 0;
        border-color: transparent;
        }

function swap_image() {
    var my_image = this.href;
    var the_image = document.getElementById("the_image");
    the_image.src = my_image;
    return false;
    }

function attach_handlers() {
    var div = document.getElementById("Thumbnails");
    var links = div.getElementsByTagName("a");

    for (var i=0; i < links.length; ++i)
        links[i].onclick = swap_image;
    }

window.onload = attach_handlers;

共有1个答案

花稳

2023-03-14

这可以通过jQuery轻松实现。

JsFiddle

null

// When you click the image
$('#image1').on('click', function () {
    // Select a div matching the CSS selector '#image1text'
    // Then set the HTML to 'image text here'
    $('#image1text').html('image text here');
})

<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.js"></script>
<img id="image1" src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg">
<div id="image1text"></div>

类似资料：

使用CSS / HTML在悬停时更改图像

问题内容：我有一个问题，我将一个图像设置为当鼠标悬停时显示另一个图像，但是第一个图像仍然出现，新的图像不会更改高度和宽度，而会与另一个图像重叠。我对HTML / CSS还是很陌生，所以我可能错过了一些简单的东西。这是代码：问题答案：一种解决方案是将第一个图像也用作背景图像，如下所示：如果您的悬停图片大小不同，则必须将它们设置为：
在悬停/单击时更改图像（颜色）和链接

所以我从昨天开始就一直在使用Javascript(Vue)和html（所以请原谅我的困惑），我不知道如何在更改链接的同时更改“home”链接描述旁边的图像的颜色。我试过使用CSS类，它工作，但只改变图像颜色时，你实际上悬停在图像上，而不是整个链接线。除了CSS之外，我也尝试过通过“onmouseover”将图像改变为彩色版本，但不知怎么的，这将图标立即改变为彩色版本（？）。我猜问题是我通过一个：
单独使用CSS如何更改点击图片？

问题内容：我有一个图像，单击该图像时，我想在其下方显示另一个图像。我正在寻找一个简单的CSS only解决方案。那可能吗？问题答案：您可以使用具有不同样式的标签：
在RecyclerView中单击ImageView时更改图像资源

我试图改变我的设备的图像资源在回收视图中的特定位置，每当我点击它（点击图像，而不是项目）。我试图把setOnClickListener（）放在onBindViewHolder（）方法中，但只有最后一项受到影响。这是我的回收器视图这里是我的适配器：我的观众：我的数据类：当我点击设备的图像时，如果它处于打开状态（flag=true），则更改为“fan_off”。如果关闭，请切换到“fan_on
单击时更改JButton文本

问题内容：我创建了一个扩展JDialog的类，其中有一些复选框和3个按钮：接受，取消和全选。当用户单击全选时，应选中每个复选框，如果再次单击，则应取消选中每个复选框。效果很好，但我还希望按钮的文本在“全选”和“全选”之间切换。我在这里遇到了麻烦，因此当用户单击按钮并将文本更改为“取消全选”时，该按钮消失了。我在这里将类简化为最简单的形式：我看不出有什么问题。有什么帮助吗？问题答案：该按
单击更改CSS属性

问题内容：我试图在单击另一个元素时更改一个元素的CSS。我进行了很多搜索，但没有一个能完美地工作。目前，我正在使用下面的代码，但是它不起作用。谁能告诉我我错过了什么？问题答案：首先，使用属性添加事件处理程序是实现所需功能的一种非常过时的方法。当您使用jQuery标记问题时，这是一个jQuery实现：一种更有效的方法是将这些样式放入一个类中，然后将该类添加到onclick上，如下所示：

HTML/CSS/JS-如何在单击时更改图像和文本

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档