Guide to updating text below an image upon clicking/hovering on the image

Question

Guide to updating text below an image upon clicking/hovering on the image

I am working on a project for a company that showcases the four founders with their pictures displayed side by side. The requirement is to have the text under each image change dynamically based on which photo is clicked or hovered over. For example, when you click on "Mark", his name will be displayed in bold along with his qualifications. However, this information will be replaced once you click on "Kim" who is the next picture. As someone new to HTML, CSS, and JavaScript, this task is my first attempt at integrating all three languages.

I aim to style the text exactly as I desire, but I am struggling to find a way to update it in real-time. So far, I have only managed to print raw text. Is there a method to call a div to display the text and replace it with a new div upon clicking each image?

Instead of using .html("Mark does xyz"), could I potentially insert the entire "tr1" div with the updated button, heading, and paragraph?

<div id="trainers">
        <h1><b>Meet Our Trainers</h1>
        <img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
        <img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">


<div id="tr1">
  <h1><b><br>Mark</b></h1>
  <p>Mark has been a personal trainer</p>
  <a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
  <h1><b><br>Kim</b></h1>
  <p>Kim is a nutritionist</p>
  <a class="btn" href="#">Book With Kim</a>
</div>
</div>






<script>
    $('#Mark').click(function() {
    });

    $('#Kim').click(function() {
    });

</script>

javascript jquery html css

Answer 1

Answer №1

If you want to achieve your goal, the show/hide method can be helpful.

$('#Mark').click(function() {
   $('#tr1').show();
   $('#tr2').hide();
});

$('#Kim').click(function() {
   $('#tr1').hide();
   $('#tr2').show();
});

$('#Mark').click(function() {
       $('#tr1').show();
       $('#tr2').hide();
    });

    $('#Kim').click(function() {
       $('#tr1').hide();
       $('#tr2').show();
    });

#tr2{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
        <h1><b>Meet Our Trainers</h1>
        <img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
        <img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">


<div id="tr1">
  <h1><b><br>Mark</b></h1>
  <p>Mark has been a personal trainer</p>
  <a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
  <h1><b><br>Kim</b></h1>
  <p>Kim is a nutritionist</p>
  <a class="btn" href="#">Book With Kim</a>
</div>
</div>

Answer 2

If you want to achieve your goal, the show/hide method can be helpful.

$('#Mark').click(function() {
   $('#tr1').show();
   $('#tr2').hide();
});

$('#Kim').click(function() {
   $('#tr1').hide();
   $('#tr2').show();
});

$('#Mark').click(function() {
       $('#tr1').show();
       $('#tr2').hide();
    });

    $('#Kim').click(function() {
       $('#tr1').hide();
       $('#tr2').show();
    });

#tr2{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
        <h1><b>Meet Our Trainers</h1>
        <img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%">
        <img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%">


<div id="tr1">
  <h1><b><br>Mark</b></h1>
  <p>Mark has been a personal trainer</p>
  <a class="btn" href="#">Book With Mark</a>
</div>
<div id="tr2">
  <h1><b><br>Kim</b></h1>
  <p>Kim is a nutritionist</p>
  <a class="btn" href="#">Book With Kim</a>
</div>
</div>

Answer 3

Answer №2

$('#Mark').on('click', function() {
    var elementToCopy = document.getElementById('tr1');
    var copy = elementToCopy.cloneNode(true);
    var placeholder = document.getElementById('placeholder');

    // Now you need to insert the copied element into a designated placeholder on the webpage.

    placeholder.appendChild(copy);       
});

The placeholder mentioned here should be an element in your HTML that does not currently exist. It will serve as the location where the cloned HTML content will be placed:

<div id="placeholder"></div>

This process allows you to duplicate the necessary HTML and position it accordingly on the page. When you click on a different image, it is essential to remove the existing HTML, clone the alternative one, and append it to the placeholder. Additionally, consider using an if statement to verify if the placeholder already contains content.

Since your query involves jQuery, this response employs the jQuery on method. Ensure that jQuery is properly included if necessary.

An alternative approach involves utilizing vanilla JavaScript click event methods:

<img id="Mark" onclick="performHTMLInsertion()" src="foo.jpg" />

Alternatively,

document.getElementById('Mark').addEventListener('click', performHTMLInsertion);

Answer 4

$('#Mark').on('click', function() {
    var elementToCopy = document.getElementById('tr1');
    var copy = elementToCopy.cloneNode(true);
    var placeholder = document.getElementById('placeholder');

    // Now you need to insert the copied element into a designated placeholder on the webpage.

    placeholder.appendChild(copy);       
});

The placeholder mentioned here should be an element in your HTML that does not currently exist. It will serve as the location where the cloned HTML content will be placed:

<div id="placeholder"></div>

This process allows you to duplicate the necessary HTML and position it accordingly on the page. When you click on a different image, it is essential to remove the existing HTML, clone the alternative one, and append it to the placeholder. Additionally, consider using an if statement to verify if the placeholder already contains content.

Since your query involves jQuery, this response employs the jQuery on method. Ensure that jQuery is properly included if necessary.

An alternative approach involves utilizing vanilla JavaScript click event methods:

<img id="Mark" onclick="performHTMLInsertion()" src="foo.jpg" />

Alternatively,

document.getElementById('Mark').addEventListener('click', performHTMLInsertion);

Answer 5

Answer №3

If you want to utilize JQuery for this task, the code snippet below will help achieve the desired outcome. It involves using a common class called "trainer-text" to initially hide overlay texts. Additionally, some CSS can be applied to style text on images. Visit the following link for further guidance: https://www.w3schools.com/howto/howto_css_image_overlay.asp

/*
    Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
    $("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
    $("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
    $("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
    $("#tr2").css("display", "none");
});

/*
    Use the following if you need display text for click event
*/
$('#Mark').click(function() {
    $('#tr1').show();
    $('#tr2').hide();
});

$('#Kim').click(function() {
    $('#tr1').hide();
    $('#tr2').show();
});

.trainer-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
    <h1><b>Meet Our Trainers</b></h1>
    <img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
    <img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>

    <div id="tr1" class="trainer-text">
        <h1><b><br>Mark</b></h1>
        <p>Mark has been a personal trainer</p>
        <a class="btn" href="#">Book With Mark</a>
    </div>
    <div id="tr2" class="trainer-text">
        <h1><b><br>Kim</b></h1>
        <p>Kim is a nutritionist</p>
        <a class="btn" href="#">Book With Kim</a>
    </div>
</div>

Answer 6

If you want to utilize JQuery for this task, the code snippet below will help achieve the desired outcome. It involves using a common class called "trainer-text" to initially hide overlay texts. Additionally, some CSS can be applied to style text on images. Visit the following link for further guidance: https://www.w3schools.com/howto/howto_css_image_overlay.asp

/*
    Use the following if you need display text for hover event
*/
$("#Mark").mouseover(function(){
    $("#tr1").css("display", "block");
});
$("#Mark").mouseout(function(){
    $("#tr1").css("display", "none");
});
$("#Kim").mouseover(function(){
    $("#tr2").css("display", "block");
});
$("#Kim").mouseout(function(){
    $("#tr2").css("display", "none");
});

/*
    Use the following if you need display text for click event
*/
$('#Mark').click(function() {
    $('#tr1').show();
    $('#tr2').hide();
});

$('#Kim').click(function() {
    $('#tr1').hide();
    $('#tr2').show();
});

.trainer-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trainers">
    <h1><b>Meet Our Trainers</b></h1>
    <img src="jackf.jpg" id="Mark" alt="Mark" width="17%" height="40%"/>
    <img src="kimsond.jpg" id="Kim" alt="Kim" width="17%" height="40%"/>

    <div id="tr1" class="trainer-text">
        <h1><b><br>Mark</b></h1>
        <p>Mark has been a personal trainer</p>
        <a class="btn" href="#">Book With Mark</a>
    </div>
    <div id="tr2" class="trainer-text">
        <h1><b><br>Kim</b></h1>
        <p>Kim is a nutritionist</p>
        <a class="btn" href="#">Book With Kim</a>
    </div>
</div>

Guide to updating text below an image upon clicking/hovering on the image

Answer №1

Answer №2

Answer №3

Similar questions

Inserting a custom text box underneath the Anything Slider

Exploring the process of iterating through and organizing a JavaScript array

Is there a way to temporarily halt scrolling text and then resume?

Getting the price of a variation based on its ID within an ajax request

Create an array in JavaScript using the JSON data that was returned

Grouping results by month according to the datetime object in C#

Steps to update the color of checkbox labels

Dynamic data management through PHP, Ajax, and jQuery for database tables

The HTML code is failing to load the font

Placing text beside an image

Creating a dynamic image slider that smoothly glides across a webpage

Yet another method for transferring arguments in typescript

Positioning an image alongside a row in a table

CSS is not referred to as animation

Having trouble viewing PDF files after uploading them to S3. Uploading images is working without any issues in NodeJS

Firestore information does not appear visible

What steps can I take to prevent divs from changing when hovered over individually?

Is there an issue with my straightforward AJAX demonstration? Must your website be hosted on a server for it to work properly?

Arrange the array of tasks in the Gantt schedule by sorting them according to the combination of date and duration, while considering any static breaks that

Sorting with jQuery UI - execute action on drag start and clear on drop