2 votes

HTML/CSS/JS - Comment changer une image et un texte sur un clic

Comment faire pour que l'image et le texte sous l'image s'échangent lorsque je clique sur une autre image dans la galerie ?

J'aimerais avoir 4 vignettes qui passent à une image agrandie lorsqu'on clique dessus, et qui affichent une description différente pour chaque image sous l'image agrandie. J'ai réussi à faire permuter les images mais je ne sais pas par où commencer pour la partie texte.

J'aimerais également avoir des titres/liens à côté de chaque image qui peuvent être cliqués pour changer l'image et le texte sous l'image.

Le code se trouve ci-dessous et dans ce lien JSfiddle : https://jsfiddle.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;
        }

JS

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;

1voto

Blake Connally Points 611

Ceci peut être réalisé facilement avec jQuery.

JSFiddle

// 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>

0voto

Theo Points 158

Il est préférable d'utiliser des superpositions plutôt que des liens qui renvoient directement à l'image.

function popup(imageURL)
{
  document.getElementById("image").src = imageURL;
  document.getElementById("overlay").style.display = "block";
  document.getElementById("caption").innerHTML = "Image is " + imageURL + ". You may put any HTML here as you like.";
}

<p>Here are some image thumbnails...</p>
<div style="display: table-row;">
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250?text=LOL" onclick="popup('http://placehold.it/200x250?text=LOL+Enlarged');">
  </div>
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250?text=A" onclick="popup('http://placehold.it/200x250?text=A+Enlarged');">
  </div>
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250?text=LOLOL" onclick="popup('http://placehold.it/200x250?text=LOLOL+Enlarged');">
  </div>
  <div style="display: table-cell;">
    <img src="http://placehold.it/200x250" onclick="popup('http://placehold.it/200x250');">
  </div>
</div>

<div id="overlay" style="position: fixed; top: 0; left: 0; width: calc(100% - 40px); height: calc(100% - 40px); opacity: 0.8; background-color: black; display: none; text-align: center; padding: 20px;">
  <img id="image">
  <br><br>
  <label id="caption" style="color: white;"></label>
</div>

J'espère que cela vous aidera.

PS : Si je ne réponds pas à la question, dites-le moi...

0voto

YinPeng.Wei Points 1

Tout d'abord, pardonnez mon mauvais anglais.

Si je comprends bien, vous voulez changer l'img pour qu'elle soit celle que vous avez que vous avez cliqué.

Le "href" de votre lien est utilisé de manière incorrecte.

Si vous voulez que le titre de ces images soit imprimé sur l'image, vous pouvez créer un attribut dans les images ou votre lien, comme 'data-location'.

L'attribut href du lien est généralement utilisé pour renvoyer au site web (href="https://www.google.com") ou à l'étage de cette page que vous souhaitez visiter (href="#floor1").

Voici ma démo.

https://jsbin.com/xolisefofi/edit?html,js,output J'espère que cela vous aidera.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X