Изменить эскиз изображения на ролловер в цикле

Question

У меня есть вопрос.Я работаю с WordPress и у меня есть блог, сообщения которого представлены с миниатюрами.Мне бы хотелось, чтобы эти миниатюры менялись, когда вы нажимаете на кнопку мыши.Проблема в том, что я хочу, чтобы разные картинки меняли миниатюры.в основном, каждая миниатюра будет иметь свое уникальное изображение ролловера.проблема в том, что я не совсем знаю, как прикрепить код js к циклу.И как это должно выглядеть для создания разных ролловеров для разных постов
, если я прикреплю код js к постоянной ссылке, он превратит все миниатюры в одно и то же изображение.Кроме того, мне сказали, что это можно сделать с помощью jquery.это достойно?
я пытался быть максимально ясным
любая помощь приветствуется!

Answer 1

Вы можете добавить настраиваемое поле для каждого из ваших сообщений с именем hoverImg, значением которого является ссылка на изображение, которое вы хотите использовать в качестве ролловера.

Затем вы получаете ссылку в цикле и добавляете ее:

<?php $hover_image = get_post_meta($post->ID, 'hoverImg', true); ?>

<img class="hover-img" src="<?php echo $hover_image; ?>" />  

это изображение должно быть изначально невидимым и позиционироваться как наложение на миниатюру. Затем просто покажите его при наведении курсора с помощью jquery.

Поскольку у меня нет вашего изображения, я создал jsFiddle с двумя элементами div, один из которых представляет вашу миниатюру, а другой - ваше изображение при наведении курсора, чтобы имитировать эффект:

http://jsfiddle.net/9Xa92/1/

Вы должны просто заменить <div class="hover-img"></div> в jsfiddle фактическим изображением эскиза (созданным выше).