HTML JQuery Image Selector

Question

Когда я выбираю изображение, вместо него отображается текст «Окно изображения».

Это код, в котором мне нужно заменить другое изображение.

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

      </div> 

Эти варианты, где он должен появиться на продукт сразу выбраны:

<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: Что я должен добавить, если я собираюсь добавить замаскированная версия выбранного изображения? Я сделал изображение в масках, чтобы изменить цвет.

HTML для замаскированного изображения:

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

Answer 1

Проблема заключается в этой строке:

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

именно $(this).css('src'). Нет атрибута CSS src. Это должно быть $(this).attr('src').

Answer 2

Чтобы показать замаскированную версию вы могли бы заменить путь изображения:

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

Это работает только для PNG файлов, и вы должны продлить заменить регулярное выражение каждый раз, когда вы добавляете изображения с другими расширениями, или если замаскированное изображение не заканчивается «-маскированным».

Так что лучшее решение было бы добавить имя файла замаскированного изображения в качестве данных-атрибута:

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

Тогда вы можете показать маскированное изображение таким образом:

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