Updating image on click in CSS and HTML

How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click https://i.sstatic.net/wBVCL.png

After Click https://i.sstatic.net/Z9ut5.png

This is my code:

<ActiveLink activeClassName="bg" href="/about">
                        <li className="nav-item box-icon">
                          <a className="nav-link">
                            <img src="/assets/img/green.png" className="icon-size" />
                          </a>
                          <span>Graduate </span>
                        </li>
                      </ActiveLink>

Here's my CSS:

.box-icon {
             width: 200px;
             height: 150px;
             background-color: aqua;
             text-align: center;
             padding-top: 10px;
             font-family: "Poppins";
             font-size: 20px;
           }
       .icon-size {
         widows: 53px;
         height: 60px;
         margin-top: 25px;
       }
       .bg {
         content: url("../public/assets/img/white/white.png");
         background-color: #0fa49e;
         widows: 53px;
         height: 150px;
         color: #fff;
         font-family: "Poppins";
         font-size: 20px;
       }

Answer №1

Creating a new class called bg-active is extremely simple.

Here is the CSS code for the bg-active class:

.bg-active {
   content: url("afterclick.png") !important;
}

When the onClick event occurs on an element, add the addClass bg-active.

Answer №2

To tackle this issue, employing JavaScript is the way to go

<!DOCTYPE html>
<html>
<body>

<h2>Unlocking JavaScript's Capabilities</h2>

<p>JavaScript has the capability to manipulate HTML attribute values.</p>

<p>In this instance, JavaScript modifies the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

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

Adjust the transparency of a distant div element by using CSS checkboxes without any JavaScript

I'm faced with the challenge of manipulating the opacity or animating an array of items that are all contained within a single div. In addition to altering the opacity of each individual item, I also want to change the opacity of the entire div and it ...

The curious case of looping and peculiar Vue actions

I've been working on a project where I am looking to dynamically add more input fields upon clicking a button. My initial attempt using jQuery.append ran into issues with detecting v-model. Switching gears, I decided to try achieving the same outcom ...

Unable to serve static files when using NextJs in conjunction with Storybook

The documentation for Next.js (found here) suggests placing image file paths under the public directory. I have a component that successfully displays an image in my Next.js project, but it doesn't render properly within Storybook. The image file is ...

What is the best way to conceal the main list but still show the nested list within?

I'm looking for a way to conceal the main parent of a sub-list while still displaying the nested list. Furthermore, I need to ensure that the parent element doesn't occupy any space on the page when hidden. HTML <ul> <li class="par ...

What are the reasons for the failure of an image upload when checked with PHP's is_uploaded_file function?

My html form allows users to upload images, but I'm encountering an issue where the uploaded image fails the "is_uploaded_file" check for some unknown reason. I'm puzzled as to why the upload is failing the is_uploaded_file check. Any ideas? He ...

I am looking for two divs or table cells to float alongside each other, with one set to display:inline and the other expanding to fill the remaining space of the row

What I desire: My current accomplishment: I successfully floated both DIV tags side by side and also experimented with tables. My goal is to have the HR line fill the remaining horizontal space that the title does not occupy. However, I prefer not to us ...

Is there a way to undo the transition when hovering out?

Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...

The fill layout in Next.JS Image isn't working properly

According to the Next.js image component documentation, it states: "When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with object-fit." However, in reality, the image fills the entire ...

SOLVED: NextJS restricts plugins from modifying HTML to avoid unnecessary re-rendering

My current scenario is as follows: I am in the process of developing a website using NextJS (SSR) I have a requirement to load a script that will locate a div element and insert some HTML content (scripts and iframes) within it. The issue at hand: It se ...

Disappearing a menu list while zooming in on a page: The art of vanishing navigation

[QUESTION] Is there a way to make the Menu List disappear when zooming in on a webpage? For example: <-- Normal Page [No Zoom] --> [Logo] Profile Gallery Guestbook <-- Zoom In 120% --> [Logo] Profile Guestbook <-- Zoom In 150% --> ...

Exploring the benefits of using Div and semantic elements in web

After spending more than two months learning HTML, I still find myself uncertain about the most practical coding approach. Despite knowing that it's important not to overthink it, I often wonder if I should stick with simplicity or add extra elements ...

Preview images in the Image Carousel bullet lineup

I've created an awesome image carousel using HTML and CSS. The carousel includes three bullets at the bottom that display a preview image when hovered over. Currently, there is a transition effect as the picture slides up and down. Is there a way to m ...

Is it possible to update local state in useSWR without triggering a revalidation?

I recently retrieved some data from a public API using useSWR and now I need to manipulate it. In the past, I would update the state with the API response and then simply overwrite it when performing operations. Now, I want to be able to sort the data by ...

Creating a dynamic table using jQuery and XML content

Hello everyone, I am new to jQuery and JavaScript in general. My goal is to generate a table based on XML data, but I'm struggling to achieve the correct output. Here's what I have tried so far: Here is my HTML code: <table id="daily_fruit"& ...

Introduction to Grid Layout Using Bootstrap - Rows

Encountering an issue with the vertical alignment of items in the code snippet below when using Bootstrap 4. Initially, the items are stacked vertically, but they align horizontally when either the "row" or "row align-items-start" classes are applied. &l ...

Selection box containing options retrieved from MySQL database dates

I am trying to populate an HTML dropdown with data from a MySQL database. I ran the query in PHPMyAdmin and it worked fine, returning one record. The entire website is connected to this MYSQL details. Here is my code:  <?php mysql_connect("loc ...

Encountered a Three.js error labeled as Uncaught TypeError while trying to follow

I've been following a tutorial on how to integrate three.js into my project from this video: https://www.youtube.com/watch?v=1TeMXIWRrqE I copied the source code provided at the bottom of this webpage: After downloading and extracting the model into ...

The page refreshes when the anchor element is clicked

Currently, I am working on enhancing a web application that is built on the foundation of traditional aspx (asp.net) web forms with elements of Angular 6 incorporated into it. My current assignment involves resolving a bug that triggers a page refresh whe ...

What is the method for creating a word using lines in programming languages?

I've noticed that many websites, programs, and applications incorporate custom branding using lines and dashes. Is there a tool available to generate this type of styling? I'm trying to print some letters in C++ but I can't seem to find a ge ...

Did I accidentally overlook a tag for this stylish stripe mesh Gradient design?

I've been attempting to replicate the striped animated Gradient mesh using whatamesh.vercel.app. I've set up the JS file, inserted all the gist code into it, and placed everything in the correct locations, but unfortunately, it's not functio ...