Смена картинки при наведении курсора?

Question

[Anton Почти]

Надо сделать так что бы при наведении на картинку вместо картинки появлялась форма такой же высоты и ширины, как это сделать?

Answer 1

[Cyber_bober]

берете такую конструкцию

<div class="form-container">
  <div class="form" style="display:none;">
    тут форма
</div>
<div class="image">
тут пикча
</div>
</div>

.form-container:hover .image{
display:none
}

.form-container .form{
display:block;}

но по итогу вы получаете интерфейсный баг связанный с hover событием. получается что при наведении появится форма, но если убрать мышку с области контейнера - форма пропадет, это моветон. Решение тут может быть такое, если пользователь заполнит какое-нибудь поле в форме, то манипуляции с картинкой больше не проводить, либо более разумной, скрывать изображение и показывать форму по клику на изображение.
Для этого можно написать небольшой js

$('.image').click(function(){
   $(this).hide();
   $('.form').show();
});

Answer 2

[xmoonlight]

1. Взять координаты картинки на странице
2. Отрисовать форму по этим координатам.

Или

1. Вначале, надо поместить картинку в DIV-контейнер
2. При наведении - заменить содержимое контейнера на форму

Comments

[Anton Почти]

размер картинки динамический

[xmoonlight]

janik_o1: ну так взять то после того, как она отрисуется - что мешает?