I'm able to change the image of a card when it is being hovered over. But how do I do this for a large number of cards with different images

Question

Here is an html sample for one card:

        
          
            
              
            
            
              ceramic one.
              $50.

and this is the javascript that i'm using:

  element.setAttribute('src', 'img/forZane/Bowl_Andrew (2).jpg');
}

function unhover(element) {
  element.setAttribute('src', 'img/forZane/Bowl_Andrew (1).jpg');
}

I can't figure out how to apply this function/hover technique to different cards with different images.

Any help would be greatly appreciated.

user_6061965 · Answer

You can do this for multiple images by introducing a new parameter to your functions that set the image url to that value:

function hover(element, url)
  element.setAttribute('src', url);
}

function unhover(element, url) {
  element.setAttribute('src', url);
}

  
    
      
        
      
      
        ceramic one.
        $50.
       
    

    
      
        
      
      
        wodden one.
        $70.

That way, you can have the same effect among multiple images.

user_14722562 · Answer

You can add custom data-* attributes to your img tags, so that your hover/unhover functions can change the image in each case.

Take this for example:

function hover(element) {
  element.setAttribute('src', element.getAttribute('data-hover'));
}
function unhover(element) {
  element.setAttribute('src', element.getAttribute('data-unhover'));
}


  
    
      
    
    
      ceramic one.
      $50.
     
  



  
    
      
    
    
      ceramic one.
      $50.

If your filenames are indeed in a consistent format, and all you need to do is switch between filenames ending in "(1)" and "(2)", consider the following alternative.

Here, we remove the data-* attributes, and instead do a replacement of the src attribute.

function hover(element) {
  element.setAttribute('src', element.getAttribute('src').replace('(1)', '(2)'));
}
function unhover(element) {
  element.setAttribute('src', element.getAttribute('src').replace('(2)', '(1)'));
}


  
    
      
    
    
      ceramic one.
      $50.
     
  



  
    
      
    
    
      ceramic one.
      $50.

I'm able to change the image of a card when it is being hovered over. But how do I do this for a large number of cards with different images

2 Answers