Is jQuery or CSS necessary for differentiating between a standard image and a highlighted image?

Question

Is jQuery or CSS necessary for differentiating between a standard image and a highlighted image?

Apologies if this has been asked before, but I'm in need of your assistance.

Here's what I'm looking for:

Imagine I have an image that is clickable in its normal state: https://i.sstatic.net/pGYyG.png

Now, when I click on that image, I want it to fade into this other image: https://i.sstatic.net/bUPmP.png

Could someone please advise me on how to code this image selection on click? Or if it's not possible to do on click, what other methods can be used?

EDIT: I also forgot to mention. If there are two selection choices... If I click on one choice, it should fade in while the other fades out, and vice versa for the second choice...

jquery html css select onclick

Answer 1

Answer №1

When referring to a fade effect, if you are talking about an animated fade, you can try implementing the code below:

HTML:

<div id="something" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

<div id="somethingElse" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

jQuery:

$(document).ready(function(){
    $('.theImage img').click(function(){
      var current = ($(this).parent().attr('id') == 'something') ? 'somethingElse' : 'something';console.log(current);
      $(this).fadeOut();
      $('#'+current + ' img').fadeIn();
    });
});

This code snippet will display the default image initially, then smoothly fade out to reveal the background image of its container upon being clicked. Depending on your specific circumstances, you might choose to utilize different HTML elements.

Answer 2

When referring to a fade effect, if you are talking about an animated fade, you can try implementing the code below:

HTML:

<div id="something" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

<div id="somethingElse" class="theImage" style="height: 242px; width: 194px; background: url(http://i.imgur.com/QW15C.png);">
  <img src="http://i.imgur.com/SOd1W.png" />
</div>

jQuery:

$(document).ready(function(){
    $('.theImage img').click(function(){
      var current = ($(this).parent().attr('id') == 'something') ? 'somethingElse' : 'something';console.log(current);
      $(this).fadeOut();
      $('#'+current + ' img').fadeIn();
    });
});

This code snippet will display the default image initially, then smoothly fade out to reveal the background image of its container upon being clicked. Depending on your specific circumstances, you might choose to utilize different HTML elements.

Answer 3

Answer №2

Follow this Javascript Example

function SwapImage(imageId)
{
    var imgObj = document.getElementById(imageId);
    if(imgObj.alt=='Hide'){
       imgObj.src="hidden-image.jpg";     
       imgObj.alt = "Show";
     }
    else
     {
       imgObj.src="visible-image.jpg";     
       imgObj.alt = "Hide";
      }  
 }

Here's the HTML snippet

<img src="visible-image.jpg" onclick=SwapImage("image") id="image" name="image" alt="Hide" />

Answer 4

Follow this Javascript Example

function SwapImage(imageId)
{
    var imgObj = document.getElementById(imageId);
    if(imgObj.alt=='Hide'){
       imgObj.src="hidden-image.jpg";     
       imgObj.alt = "Show";
     }
    else
     {
       imgObj.src="visible-image.jpg";     
       imgObj.alt = "Hide";
      }  
 }

Here's the HTML snippet

<img src="visible-image.jpg" onclick=SwapImage("image") id="image" name="image" alt="Hide" />

Answer 5

Answer №3

There is a simple method to achieve this:

Simply use the images as tags and place them inside a div:

<div id="image-wrapper">
    <img src="http://i2.cdn.turner.com/cnn/dam/assets/120423012508-merkel-sarkozy-c1-main.jpg" id="img1" />
    <img src="http://d2o307dm5mqftz.cloudfront.net/1005866/1334968885891/Perfect%20Gift%20No%20Pink_300x250.jpg" id="img2" />
</div>

For the styling, you can use the following CSS:

#image-wrapper{
    position:relative;
    height:242px;
    width:194px;
}      
#image-wrapper img{
    position:absolute;
    left:0px;
    top:0px;
    height:242px;
    width:194px;
} 
#img1{display:none;}

To add an interactive feature with jQuery:

$('#image-wrapper').on('click', function (event){
    $('#image-wrapper img').fadeToggle();
});

Answer 6

There is a simple method to achieve this:

Simply use the images as tags and place them inside a div:

<div id="image-wrapper">
    <img src="http://i2.cdn.turner.com/cnn/dam/assets/120423012508-merkel-sarkozy-c1-main.jpg" id="img1" />
    <img src="http://d2o307dm5mqftz.cloudfront.net/1005866/1334968885891/Perfect%20Gift%20No%20Pink_300x250.jpg" id="img2" />
</div>

For the styling, you can use the following CSS:

#image-wrapper{
    position:relative;
    height:242px;
    width:194px;
}      
#image-wrapper img{
    position:absolute;
    left:0px;
    top:0px;
    height:242px;
    width:194px;
} 
#img1{display:none;}

To add an interactive feature with jQuery:

$('#image-wrapper').on('click', function (event){
    $('#image-wrapper img').fadeToggle();
});

Answer 7

Answer №4

$(document).ready(function() {
    var imageOptions = ["http://i.imgur.com/SOd1W.png","http://i.imgur.com/QW15C.png"];

    $('.img1').click(function(e) {   
             var randomImage = imageOptions[Math.floor(Math.random()*imageOptions.length)];
             $('.img1').attr('src', randomImage);

    });
});

View the demo... Source simple image randomizer with jQuery by Brian Cray

You can also explore CSS3 for similar effects. Learn more about A Simple Fade with CSS3

Answer 8

$(document).ready(function() {
    var imageOptions = ["http://i.imgur.com/SOd1W.png","http://i.imgur.com/QW15C.png"];

    $('.img1').click(function(e) {   
             var randomImage = imageOptions[Math.floor(Math.random()*imageOptions.length)];
             $('.img1').attr('src', randomImage);

    });
});

View the demo... Source simple image randomizer with jQuery by Brian Cray

You can also explore CSS3 for similar effects. Learn more about A Simple Fade with CSS3

Answer 9

Answer №5

<img src="cat.jpg" id="MyCat" />

JavaScript:

document.getElementById("MyCat").addEventListener("click", function() { this.src = "dog.jpg" });

Answer 10

<img src="cat.jpg" id="MyCat" />

JavaScript:

document.getElementById("MyCat").addEventListener("click", function() { this.src = "dog.jpg" });

Answer 11

Answer №6

Are you seeking a solution similar to this?

<img src="http://i.imgur.com/SOd1W.png" onclick="$(this).fadeOut().attr('src','http://i.imgur.com/QW15C.png').fadeIn();">

Answer 12

Are you seeking a solution similar to this?

<img src="http://i.imgur.com/SOd1W.png" onclick="$(this).fadeOut().attr('src','http://i.imgur.com/QW15C.png').fadeIn();">

Answer 13

Answer №7

It seems like a task that can be addressed with the assistance of jQuery's click() method.

The code can be found at this link: http://jsfiddle.net/AbCdEf/

Answer 14

It seems like a task that can be addressed with the assistance of jQuery's click() method.

The code can be found at this link: http://jsfiddle.net/AbCdEf/

Answer 15

Answer №8

To incorporate a simple CSS effect, you can assign an active pseudoclass to the image:

.photo { background: url(mainimg.png); }

.photo:active { background: url(clickedimg.png); }

Check out this illustration: http://example.com/jsdesign/

Answer 16

To incorporate a simple CSS effect, you can assign an active pseudoclass to the image:

.photo { background: url(mainimg.png); }

.photo:active { background: url(clickedimg.png); }

Check out this illustration: http://example.com/jsdesign/

Is jQuery or CSS necessary for differentiating between a standard image and a highlighted image?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Tips for changing the visibility of a div within table rows upon clicking

PHP: Establishing SESSION Variables

Error in saving webpage as HTML

Updating the load context variable in Django template after making changes via an AJAX call: a step-by-step guide

Transitioning the implicit width

Exploring the world of mouse events in Typescript using JQuery, all the while maintaining strict typing regulations

German-formatted jQuery datepicker

modify the appearance of HTML controls in real time with C#

Production environment poses a challenge as Rails 4 struggles to locate fonts

Navigation menu with nested options in the list

When PHP is connected to the database, Ajax remains inactive and does not perform any tasks

When attempting to use $.ajax to send JSON, it instead sends a query string

Sliding carousel from right to left

Removing Additional Parameters from the Delete URL in jqGrid

The Java.lang.finalize heap became too large during the Hadoop URL parsing task

Preparing the data for populating Google charts

What steps can be taken to enhance the responsiveness of this Bootstrap 4 code?

Insufficient Resources Error (net::ERR_INSUFFICIENT_RESOURCES) encountered while executing jQuery script with multiple ajax requests for 2 minutes

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Tips for showing various images from a server using ng-repeat