Поменять центр ролловера изображений сайта

По какой-то причине я не могу заставить что-то работать. Все, что я хочу сделать, это иметь изображение в центре страницы (это единственное на странице), и когда я переворачиваю его, оно меняется на другое изображение.

Я могу сделать эффект ролловера с помощью jquery, и я могу центрировать изображение на странице. Но я не могу их объединить. Потому что эффект ролловера с помощью jquery использует абсолютную позицию.

Пожалуйста, помогите?

Заранее спасибо!

2 ответа

Решение

Вы можете попытаться обернуть ваше изображение в элемент div и расположить его по центру на странице с относительной позицией, чтобы ваше изображение относилось к этому элементу div вместо тела документа.

Вы можете выполнить оба действия с таким JavaScript

$(".container img").hover(function() {  
  $(".container img").toggle();
});

и в вашем HTML

<div class="container">
  <img src="http://www.placehold.it/140x140&text=Image%201" />
  <img style="display:none;" src="http://www.placehold.it/140x140&text=Image%202" />
</div>

простой живой пример: http://jsbin.com/agirul/1/edit

Другие вопросы по тегам