Incorporate a link to an image following a click event toggle using Jquery

I managed to create a code snippet that toggles between two images when clicked, thanks to some assistance from stackoverflow. However, I am now looking to add a link to the second image that redirects users to another webpage, like The App Store.

My question is how can I insert a link into the second image without interrupting the toggle effect that switches between the images?

Here is the jQuery code:

<script type="text/javascript">
     $(document).ready(function() {
      $('#slick-toggle').click(function() {
           $('img',this).attr('src', function(i, oldSrc) {
        return oldSrc == 'img/button.png' ? 'img/applestoredownload.png' : 'img/button.png';
           });
               $('#slickbox').toggle(400);
           return false;
          });
      });
</script>

Here is the relevant HTML structure:

<div class="co-download-app"> 
    <div class="wrapper">
         <div id="imageContainer">
             <a href="#1" id="slick-toggle">
                 <img src="img/button.png"/>
             </a>
        </div>
    </div>
</div>  

If you have any suggestions on where I should insert the link for the second image to direct users to another webpage upon clicking, please let me know!

Answer №1

It seems like the issue you're facing is related to changing the image source when clicking on a link containing an image. To address this, one solution is to modify your code so that it can remember the previous state and act accordingly the next time the link is clicked.

In this instance, I assigned a class to the link which helps in determining whether to change the image source or redirect to the link's destination on subsequent clicks. If the 'follow-href' class is present, the script will skip the image change process; otherwise, it will update the source.

$(document).ready(function() {
    $('#slick-toggle').click(function() {
        if (!$(this).hasClass('follow-href')) {
            var $img = $(this).find("img");
            var src = ($img.attr('src') == 'img/button.png') ? 'img/applestoredownload.png' : 'img/button.png';
            $img.attr('src', src);
            $(this).addClass('follow-href');
            $('#slickbox').toggle(400);
            return false;
        }
    });
});

I made some modifications to your code for better functionality, but the outcome remains consistent with your requirements. I hope these changes are acceptable to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I use AJAX to load a PHP file, the function's content returns as [object HTMLDivElement]

Hello there, When I use AJAX to load a PHP file, the content of my function returns [object HTMLDivElement], but if I load my function without loading the PHP file, it displays normally. index.php <h1>API Football</h1> <nav> ...

Enhancing Image Quality upon Hovering

Is there a way to prevent the content of the article from moving when an image becomes absolutely positioned? The issue I am facing is that the image overlaps its container with overflow: hidden only when the img is absolute positioned. article { back ...

I seem to be having trouble with my dropdown menu, can anyone help me figure out what I might be doing wrong

I'm new to web development and I'm trying to create a dropdown menu. The issue is that when I hover over a specific element, it takes up more space than expected. My goal is for it to appear below the "shop" element. I'm not sure where I&a ...

Store a JSON String produced by Javascript as a file in web2py

[Log] {"image":"/SAS/default/download/uploads.image.85f2588e34848596.30362d32353033392e746966.tif","filename":"/SAS/default/download/06-25039.tif","start":1437444049436,"width":1080,"height":734,"events":[{"colour":"#0000ff","width":3,"erased":false,"point ...

The initial menu option stands out due to its unique appearance, created using the :first-child

I am currently designing a website menu and I would like the .current-menu-item - current item, to have a different appearance. However, I want the first item in this menu to have rounded corners (top left, bottom left). How can I achieve this using the :f ...

Struggling to pinpoint the exact element in Python/Selenium

As I work on creating a website manipulation script to automate the process of email mailbox creation on our hosted provider, I find myself navigating new territory in Python and web scripting. If something seems off or subpar in my script, it's beca ...

The console log is not being displayed in my Redux reducer and it is returning an undefined

I'm facing an issue with my Redux application after integrating JWT into my Nest API. Below is the code snippet from my reducer: export default function reducer(state = {}, action) { switch (action.type) { case 'USER_LOGIN_SUCCESS&apo ...

Can you explain the significance of the regular expression pattern /(?:^|:|,)(?:s*[)+/g in Javascript?

When it comes to Jquery, the regexp pattern is defined as follows: var rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g; This particular pattern is designed to match strings such as "abc,[" and "abc:[", while excluding instances like "abc^[". But what doe ...

Getting the ID name from a select tag with JavaScript - A quick guide!

Can you help me retrieve the id name using JavaScript when a selection is made in a select tag? I have tried running this code, but it only alerts undefined. For instance, if I select bbb in the select tag, I should be alerted with 2 Any suggestions on ...

I would like to add a border at the bottom of each item in a ul list

My current focus is on making my website responsive with a breakpoint set at 576px I am aiming to achieve the design shown in this image without any space in the border-bottom and have both elements expand to full width: menu li hover However, I'm c ...

My CSS disappears when using an ASP.Net MVC form

Unable to find any similar issue on Google... seeking some assistance. When I apply CSS formatting to style my form as desired, it displays correctly on the page without any issues. However... When I place the actual form within the following code snipp ...

Retrieve information from the database and showcase it in a competitive ranking system

Here is the HTML and CSS code for a leaderboard: /* CSS code for the leaderboard */ To display the top 5 in the leaderboard, PHP can be used to fetch data from the database: <?php // PHP code to retrieve data from the database ?> The current ou ...

Tips for sending arguments up in Angular2

I need to supply an argument to a function. <select class="chooseWatchlist" (change)="updateWatchlistTable(item.name)"> <option *ngFor="let item of _items">{{ item.name }}</option> </select> It's crucial for me, as I have ...

The footer element rebels against its designated functionality

The standard structure follows: <body> <div class="wrapper"> <nav></nav> <myContent></myContent> </div> </body> <footer></footer> In this setup, the footer is expected to ...

Encountered an issue when attempting to establish a connection with the REST

I am encountering an issue with connecting to a web service deployed on an Apache server using Jersey. The error message I receive is: Failed to load http://192.168.1.200:8199/CheckinnWeb/webapi/myresource/query: No 'Access-Control-Allow-Origin' ...

Switch out the words within the input box

My code has the ability to convert words to numbers, however, when I try to paste a text like: three four one one four five six one, the output I receive is: 3411456one If I click on the text input again, the word 'one' changes to '1', ...

What steps can I take to set up AJAX-based long-polling in Microsoft Edge?

I have been working on setting up a basic long-polling skeleton that functions across different browsers. While my solution works perfectly in Chrome, I am facing difficulties getting it to work in Edge. Upon loading the page in Edge, there are no visible ...

Is it possible to apply CSS opacity only to the background color without affecting the text on top of it

Is it possible to set the opacity property specifically for the background of a div, without affecting the text inside it? I attempted to achieve this with the following code: background: #CCC; opacity: 0.6; However, it seems like the opacity change is ...

I'm experiencing difficulties with updating my model while utilizing the ngResource module

Encountering a minor issue with Angular at the moment. Employing the $ngResource module to fetch "comments" from my server: var app = angular.module('app', ['ngResource']); app.factory('comment', function($resource) { r ...

What is the maximum width allowed for a WordPress site on mobile devices?

I have been tasked with addressing the responsiveness issues on mobile for this particular site. However, I am struggling to understand why the website is displaying horizontal scrolling on the landing page in a mobile view. Any assistance in resolving t ...