При наведении на картинку, она меняется! (Нужна помощь) - Joomla 3.x: Шаблоны, разметка и макеты вывода

Здравствуйте! очень нужна помощь в ставке кода.
Искал как изменить картинку при наведении на нее курсором. Нашел такой материал:


К сожалению я только учусь и мои знания очень ограничены!
Пожалуйста подскажите куда это надо вставить и как этим пользоваться?

Вы не обижайтесь, но Вам бы основы CSS и HTML поизучать. Ибо вопрос совсем уж "детский".

Что касается самого вопроса, то смысл Вашего кода следующий: есть ссылка с классом izo и размером 400х400 пикселей. В качестве фона ей задано некое изображение изо1.jpg, которое меняется на изо2.jpg при наведении курсора на ссылку.
Собственно <a href="#" class="izo"></a> это сама ссылка, которую нужно вставить в исходный код страницы.
А все что в теге style - это стилевое оформление.  Его можно вставить в исходный код страницы (сместе с тегом) или добавить к таблице стилей Вашего шаблона.
Естественно, и в ссылке и в стилях нужно указать свои размеры/имена файлов/пути к файлам...

Нет, я абсолютно не обижаюсь Я в этом деле новичок, для вас это как чай заварить а мне темный лес
Смотрите, у меня в одном материале 2 картинки (рис1 и рис3). Как вы уже поняли, мне надо чтобы они менялись при наведении. Для этого в папке лежат еще две картинки (рис2 и рис4).

Как я понял, в материале перед картинкой, мне надо вставить код: <a href="#" class="izo"></a>
А в какой файл нужно поместить весь код? и между чем его надо вставить?
Если вам не тяжело, объясните пожалуйста.

эх, зря я ответил на Ваше сообщение теперь не знаю как это всё объяснить на пальцах.
Начнем сначала: что это за картинки будут (желательно пример) и что Вы хотите получить в итоге? Я понял что картинка при наведении меняться должна. Но, одно дело там у ссылки будет фоновая картинка, типа эффекта пламени. И другое дело, если там превьюшка должна открываться, или еще что-то...
Ссылка на страницу приветствуется.
Чем четче Вы сформулируете задачу, тем быстрее получите результат.
А может это я чего-то не понимаю и говорю ерунду

Почему вы уперлись в ссылку.Псевдокласс :hover должен сработать хоть <p>  , хоть на <span>
< p class="izo"></p>

Sergei-1209847, поставьте редактор JCE, там можно прописывать для картинки hover прямо в форме редактора

master-smeta Специально для вас попробую изложить подробно. Если будет много лишнего, заранее прошу прощение.

Установил шаблон "Purity III" http://www.joomlart.com/joomla/templates/purity-iii

Главную страницу хочу сделать как меню из картинок. Для этого я вывел один материал как избранный с тремя картинками:


К каждой картинке привязал пункт меню. Теперь осталось сделать так чтобы они менялись при наведении.
Картинки все разбиты по парам (Рис1  на Рис2) (Рис3 на Рис4) и т.д.
JCE стоит.

Может есть плагин или модуль который может это делать?! Мне все равно каким способом это реализовывать, может у вас есть проще решение?!

И простите если для вас уж совсем нубская тема мы новички такие

Я пробовал это сделать обычным HTML кодом, который просто вставляется в материал:

Все работает, но проблема в том что при наведении картинки долго подгружаются (при том что они весят 20-50Кб)

master-smeta Специально для вас попробую изложить подробно. Если будет много лишнего, заранее прошу прощение.

Супер! Сразу все понятно Лично я не встречал таких "больших меняющихся картинок" и не знаю как правильно их реализовать. Обычно при наведении на такую картинку на ней появляется DIV например с кнопками или описанием.
Sergei-1209847 предложил хороший вариант. Он так же прав в том, что есть/будет проблема с подгрузкой картинок. Как вариант - объединить все изображения в спрайт, но это не самый легкий способ.

Заранее прошу прощения у модераторов, если тут запрещены ссылки!
Код который я написал в первом сообщении, был взят от суда: http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html

Там то что я пытаюсь сделать с картинками. Идеальный вариант третий, но мне бы с первым разобраться.

Заранее прошу прощения у модераторов, если тут запрещены ссылки!
Код который я написал в первом сообщении, был взят от суда: http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html

Там то что я пытаюсь сделать с картинками. Идеальный вариант третий, но мне бы с первым разобраться.

Ссылки не запрещены, а такие полезные, как ваша - даже рекомендуются.