Learn how to dynamically change an image when a list item is clicked using only CSS!

Question

Learn how to dynamically change an image when a list item is clicked using only CSS!

When I click on an object, I want to change the image to a different one. The code is organized as follows:

HTML :

<div class="games-platform-item pt-item">
                    <ul class="games-sub-menu clearfix"> 

                            <li class="tab1 current">
                            <img src="../images/abc11.jpg"/ class="topimgG1" ">
                            <span>Editor's Choice</span>
                            </li>

                        <li class="tab2">
                        <img src="../images/abc2.jpg"/ class="topimgG2" ">
                        <span>Slots</span>
                        </li> 

                        <li class="tab3">
                        <img src="../images/abc3.jpg"/ class="topimgG3" ">
                        <span>Table Games</span>
                        </li>

                        <li class="tab4">
                        <img src="../images/abc4.jpg"/ class="topimgG4" ">
                        <span>Jackpot Rewards</span>
                        </li>

                        <li class="tab5">
                        <img src="../images/abc5.jpg"/ class="topimgG5" ">
                        <span>Mini Games</span>
                        </li>    

                        <li class="tab6">
                        <img src="../images/abc6.jpg"/ class="topimgG6" ">  
                        <span>Video Poker</span>
                        </li>    

                        <li class="tab7">
                        <img src="../images/abc7.jpg"/ class="topimgG7" ">
                        <span>All Games</span>
                        </li>     

                        <li class="tab8 games-pt-search" style="display:none;"><span>Search Results</span></li>
                    </ul>

What I am trying to achieve is:

I want the image to change to a colored version when clicked, without using excessive JS or jquery. Can this be achieved using CSS, such as with the .current method?

I need some creative ideas for this.

CSS :

jquery html css

Answer 1

Answer №1

Here's the main concept. It can be greatly enhanced by implementing CSS sprites, which will also eliminate any delay in loading the clicked image. For more information on CSS Sprites, check out: https://css-tricks.com/css-sprites/

I didn't use sprites here because it's difficult to simulate them using placeholder images like I did for the image.

Let's dive into the code. I'll explain what it does and highlight key features afterwards.

/*Hide the Radio Button*/
.games-sub-menu input[type=radio] {
  display: none
}

/*Set a box for the label, this is what is clicked on*/
.games-sub-menu label {
  display: block;
  width: 150px;
  height: 100px;
}

/*Set Images...this would work better with sprites*/
.games-sub-menu label.topimgG1 {
  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu input[type=radio]:checked + label.topimgG1 {
  background-image: url("http://placehold.it/150x100/?text=Image1");
}
.games-sub-menu label.topimgG2 {
  background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu input[type=radio]:checked + label.topimgG2 {
  background-image: url("http://placehold.it/150x100/?text=Image2");
}

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab1 current">
      <input type="radio" name="imgSwap" id="rdoImg1">
      <label class="topimgG1" for="rdoImg1"></label>
      <span>Featured Edit</span>
    </li>
    <li class="tab2 current">
      <input type="radio" name="imgSwap" id="rdoImg2">
      <label class="topimgG2" for="rdoImg2"></label>
      <span>Featured Edit</span>
    </li>
  </ul>
</div>

Essentially, the hidden radio button maintains the image state. We then utilize the checked CSS selector along with the adjacent sibling selector + to alter the label's background image. Important Note: the checkbox must precede the label immediately. You could use the general sibling selector, but the checkbox still needs to come before the label.

If the choices aren't mutually exclusive, you can replace radio with checkbox.

A similar outcome can be achieved using links to an ID on the page and leveraging the :target selector. However, this may cause a page jump.

Check out some of my other answers that employ similar concepts:

How to edit this nav to make it a click nav instead of a hover nav?
All css accordion divs open by default (no jquery)

Answer 2

Here's the main concept. It can be greatly enhanced by implementing CSS sprites, which will also eliminate any delay in loading the clicked image. For more information on CSS Sprites, check out: https://css-tricks.com/css-sprites/

I didn't use sprites here because it's difficult to simulate them using placeholder images like I did for the image.

Let's dive into the code. I'll explain what it does and highlight key features afterwards.

/*Hide the Radio Button*/
.games-sub-menu input[type=radio] {
  display: none
}

/*Set a box for the label, this is what is clicked on*/
.games-sub-menu label {
  display: block;
  width: 150px;
  height: 100px;
}

/*Set Images...this would work better with sprites*/
.games-sub-menu label.topimgG1 {
  background-image: url("http://placehold.it/150x100/FF0000/FFFFFF/?text=Image1");
}
.games-sub-menu input[type=radio]:checked + label.topimgG1 {
  background-image: url("http://placehold.it/150x100/?text=Image1");
}
.games-sub-menu label.topimgG2 {
  background-image: url("http://placehold.it/150x100/00FF00/FFFFFF/?text=Image2");
}
.games-sub-menu input[type=radio]:checked + label.topimgG2 {
  background-image: url("http://placehold.it/150x100/?text=Image2");
}

<div class="games-platform-item pt-item">
  <ul class="games-sub-menu clearfix">
    <li class="tab1 current">
      <input type="radio" name="imgSwap" id="rdoImg1">
      <label class="topimgG1" for="rdoImg1"></label>
      <span>Featured Edit</span>
    </li>
    <li class="tab2 current">
      <input type="radio" name="imgSwap" id="rdoImg2">
      <label class="topimgG2" for="rdoImg2"></label>
      <span>Featured Edit</span>
    </li>
  </ul>
</div>

Essentially, the hidden radio button maintains the image state. We then utilize the checked CSS selector along with the adjacent sibling selector + to alter the label's background image. Important Note: the checkbox must precede the label immediately. You could use the general sibling selector, but the checkbox still needs to come before the label.

If the choices aren't mutually exclusive, you can replace radio with checkbox.

A similar outcome can be achieved using links to an ID on the page and leveraging the :target selector. However, this may cause a page jump.

Check out some of my other answers that employ similar concepts:

How to edit this nav to make it a click nav instead of a hover nav?
All css accordion divs open by default (no jquery)

Answer 3

Answer №2

Easy method using JQuery.

Here is a quick example:

$(function() {
 $('.topimgG1').click(function(){
   // Reset all images to default
   resetAll();
   // Change clicked image to another image
   $(".topimgG1").attr('src',"../img/<another image>");
   return false;
 });
});

function resetAll()
{
 var arrofIDS= ["topimgG1", "topimgG2", "topimgG3"];

 for (i = 0; i < arrofIDS.length; i++) { 
     $("."+arrofIDS[i]).attr('src',"../img/<default img>");
  }
}

Answer 4

Easy method using JQuery.

Here is a quick example:

$(function() {
 $('.topimgG1').click(function(){
   // Reset all images to default
   resetAll();
   // Change clicked image to another image
   $(".topimgG1").attr('src',"../img/<another image>");
   return false;
 });
});

function resetAll()
{
 var arrofIDS= ["topimgG1", "topimgG2", "topimgG3"];

 for (i = 0; i < arrofIDS.length; i++) { 
     $("."+arrofIDS[i]).attr('src',"../img/<default img>");
  }
}

Answer 5

Answer №3

.class:active{background-image: url(image.jpg);}

Utilize the active class to temporarily change your image when clicked.

Answer 6

.class:active{background-image: url(image.jpg);}

Utilize the active class to temporarily change your image when clicked.

Answer 7

Answer №4

To store an alternative image source, you can follow this method:

<li class="tab2">
    <img data-alt-src="path/to/alt/img" src="../images/abc2.jpg"/ class="topimgG2" ">
    <span>Slot Machine</span>
</li>

Then, implement a script like the one shown below:

<script>
    $(function() {
       $('.topimgG').click(function(){
            var src = $(this).attr("src");
            var altSrc = $(this).attr("data-alt-src");
            $(this).attr("src", altsrc);
       });
    });
</script>

While there may be other solutions with varying levels of JavaScript code, this approach will undoubtedly fulfill your needs.

Answer 8

To store an alternative image source, you can follow this method:

<li class="tab2">
    <img data-alt-src="path/to/alt/img" src="../images/abc2.jpg"/ class="topimgG2" ">
    <span>Slot Machine</span>
</li>

Then, implement a script like the one shown below:

<script>
    $(function() {
       $('.topimgG').click(function(){
            var src = $(this).attr("src");
            var altSrc = $(this).attr("data-alt-src");
            $(this).attr("src", altsrc);
       });
    });
</script>

While there may be other solutions with varying levels of JavaScript code, this approach will undoubtedly fulfill your needs.

Learn how to dynamically change an image when a list item is clicked using only CSS!

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Trouble with formatting credit card numbers in Vue.js

Execute JavaScript function after the reset button has been clicked

Customizing the Slider Range with HTML DOM Style's BackgroundImage Attribute

Increment by 1 until a specific number is reached instead of displaying all numbers within an array

Steps for generating a jQuery script to tally the checkboxes that have been ticked

The function .click does not function properly when used with an anchor element within a figure tag

The jQuery.ajax converter function is not being triggered

Is it possible to turn off the shadow on just one side?

Encountered a JavaScript error while using Internet Explorer

How to use Python Selenium to locate the parent element

I am puzzled as to why the frames in my code are failing to display

Tips for resolving highlighted font awesome Facebook icon issue

What is the most effective way to extract data from HTML that contains mathematical notations and convert it into plain text format?

Choose the element that is trapped within the div

Conditionally Add Columns to jQuery Datatables

Utilize the circliful jQuery plugin within an Angular project

jQueryUI Dialog box failure

What is the most efficient method for including a complete date and time in a URL in asp.net mvc?

What is the best way to populate a JSP session with a jQuery value?

The Bootstrap collapse functionality is malfunctioning