How to swap between two images with one separate hyperlink ONLY

Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.

    <div id="aboutus">
    <a href="#>More about us...</a>

    <img id="introimage" src="images/img1.jpg" style="display:block">
    <img id="introimage" src="images/img2.png" style="display:none"/>
    </div>

Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.

Answers


As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).

HTML

<div id="aboutus">
    <a href="#" class="introimagetoggle">More about us...</a>
    <img class="introimage" src="images/img1.jpg" style="display:block">
    <img class="introimage" src="images/img2.png" style="display:none"/>
</div>

Javascript

$(function() {
    $("a.introimagetoggle").on("click", function(event) {
        event.preventDefault();
        $("img.introimage").toggle();
    });
});

You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.


Need Your Help

Having trouble figuring out how to set an Android alarm

android android-asynctask alarmmanager android-alarms

Hey i'm hoping somebody could help me out. I see a lot of articles and StackOverflow questions about setting alarms but I am a little confused as to how to set up an android alarm for my specific

is this systems broadcast ordered or normal broadcast?

android broadcast

I'm trying to figure out if a system event broadcast is broadcasted