HTML JQuery Image Selector

Question

Whenever I select an image, the text "Window Image" shows instead.

This is the code where I need to be replaced by another image.

 <div class="product">
            <img id="model" src="images/casement.png" alt="Window Image" />

          </div> 

These are the options where it should appear on product once selected:

<table>
          <tr>
            <td><img src="images/awning.png" id="Awning" class="wmodel wmodel-clickable"></img></td>
            <td><img src="images/sliding.png" id="Sliding" class="wmodel wmodel-clickable"></img></td>
            <td><img src="images/casement.png" id="Casement" class="wmodel wmodel-clickable"></img></td>     
          </tr>
</table>

JQuery:

$('.wmodel-clickable').each(function() {
  $(this).attr('title', $(this).attr('id'));
});
$('.wmodel-clickable').tooltip();

$(".wmodel-clickable").click(function() {
  $("#model").attr('src', $(this).css('src'));
  $("#window-name").html($(this).attr("id"));

});

EDIT: What should I add if I'm going to add the masked version of the selected image? I made a masked version image so i can change color of it.

HTML for masked image:

<img id="mask" class="mask" src="images/casement-mask.png" alt="Mask Image" />

Answer 1

The problem is in this line:

$("#model").attr('src', $(this).css('src'));

Namely $(this).css('src'). There is no src CSS attribute. It should be $(this).attr('src').

Answer 2

To show the masked version you could replace the image path:

$("#model").attr('src', $(this).attr('src').replace(/\.png$/, "-masked.png"));

That only works for PNGs and you would have to extend the replace regex everytime you add images with other extensions, or if the masked image doesn't end with "-masked".

So the better solution would be to add the filename of the masked image as data-attribute:

<td><img src="images/casement.png" data-path-masked="images/casement-masked.png" id="Casement" class="wmodel wmodel-clickable"></img></td>

Then you can show the masked image this way:

$("#model").attr('src', $(this).data('path-masked'));