Switching images with jQuery on a click event

Question

Switching images with jQuery on a click event

Can anyone provide suggestions on how to swap images with the header image when icons in the footer are clicked?

Here is a demonstration on Jsfiddle

<ul>
    <li>
        <a href="#">
            <img src="img/q.jpg">
        </a>
    </li>

    <li>
        <a href="#">
            <img src="img/q1.jpg">
        </a>
    </li>

    <li>
        <a href="#">
            <img src="img/f.jpg">
        </a>
    </li>

    <li>
        <a href="#">
            <img src="img/q2.jpg">
        </a>
    </li>
</ul>

javascript jquery html css

Answer 1

Answer №1

Take a look at this example code snippet.

$(img).on('click', function(e)
{
   $("#iq").attr("src", $(this).attr("src"));
})

By clicking on any image, this code will trigger a specific action. It should be intuitive on how to customize this functionality based on your needs.

Answer 2

Take a look at this example code snippet.

$(img).on('click', function(e)
{
   $("#iq").attr("src", $(this).attr("src"));
})

By clicking on any image, this code will trigger a specific action. It should be intuitive on how to customize this functionality based on your needs.

Answer 3

Answer №2

If you want to switch the image clicked in the footer with the header image every time a footer image is clicked, you can utilize the code snippet below:

$('ul img').click(function(){

    var header_src = $('header img').attr('src');

    $("header img").attr('src', $(this).attr('src'));
    $(this).attr('src', header_src);

});

Answer 4

If you want to switch the image clicked in the footer with the header image every time a footer image is clicked, you can utilize the code snippet below:

$('ul img').click(function(){

    var header_src = $('header img').attr('src');

    $("header img").attr('src', $(this).attr('src'));
    $(this).attr('src', header_src);

});

Switching images with jQuery on a click event

Answer №1

Answer №2

Similar questions

Tips for beginning a counter that displays online status from the ground up

Identifying a loop within a hierarchy of JavaScript elements

Check for the presence of a horizontal scrollbar on the page for both computer and mobile devices

How do I efficiently render multiple form field components in React CSS when two of them have different flex directions?

Issue encountered while deploying on vercel: TypeError - Trying to access properties of undefined (specifically 'and')

The ongoing battle between Carousel full page image slider and multi div slider in Bootstrap 4

Differentiating between the simple and luxurious text editing features available in the TinyMce editor

Conditional radio button disabling in Material-ui

Using Laravel to connect custom fonts

What is the best method for effectively eliminating duplicate objects with the same value from an array?

Body of the table spanning the entire width of the screen

Looking to incorporate an Ajax feature that allows for updating dropdown menus in each row of the database

What is the best way to send JSON data from Express to a JavaScript/jQuery script within a Pug template?

My email submission function is malfunctioning

Creating getter and setter functions for an input field model property in Angular

Issue with Multiple File Upload Functionality in Dropzone.js + Laravel (Only allowing one file to be uploaded)

Access any nested node within a JSON/JS object by specifying the key's value

What could be causing the incorrect margins in IE after my animation?

Mastering Protractor: Opening multiple sites and sending keys

Media queries are behaving incorrectly, causing them to trigger when regular CSS should be applied, and vice versa