Смена изображения, телефона по клику на ссылку (кнопку)

Здравствуйте уважаемые читатели блога Digrand.

Сегодня хочу вам показать вариант смены изображения, контента по клику на ссылку. Столкнулся я с данным вопросом в верстке одного psd макета. Идея была в том, что на картинке были кнопки, по нажатию на которые нужно было заменять под ними картинку. CSS кода всего блока выставлять не буду, т.к. запутаетесь, много лишнего для вас. Основной функционал в Javascript. Также данная фишка часто используется для смены телефонов, например по клику на город (но в таких случаях надо использовать куки, что бы при обновлении страницы данные оставались).

Сначала покажу вам демо, на примере смены телефонов и изображений. Вместо них можно использовать любой другой контент, вплоть до загрузки в iframe других страниц. Скачать готовый Javascript функционала смены изображений, телефона по клику вы сможете ниже:

Download – Demo

Ну а далее покажу вам все более подробно.

Смена изображений по клику

1. Сначала добавляем HTML код

<a href="javascript:l_image ('https://owl-themes.net/images/digrand.jpg')">Ссылка на изображение №1</a>
<a href="javascript:l_image ('https://owl-themes.net/images/food/food.jpg')">Ссылка на изображение №2</a> 
<img src="https://owl-themes.net/images/digrand.jpg" name="example_img" alt="Картинки для демонстрации работы скрипта смены изображений">

<a href="javascript:l_image ('https://owl-themes.net/images/digrand.jpg')">Ссылка на изображение №1</a>

<a href="javascript:l_image ('https://owl-themes.net/images/food/food.jpg')">Ссылка на изображение №2</a>

2. Добавляем немного JS

<script type="text/javascript">
    function l_image (a) {document.example_img.src=a}
</script>

function l_image (a) {document.example_img.src=a}

</script>

Смена телефона по клику

1. Добавляем HTML код

 <a href="javascript:l_phone ('+7(123)456789')">Москва</a>
 <a href="javascript:l_phone ('+8(234)567890')">Киев</a>
 <div id="example_text">Выберите город</div>

<a href="javascript:l_phone ('+7(123)456789')">Москва</a>

<div id="example_text">Выберите город</div>

2. Добавляем немного JS

<script type="text/javascript">
    function l_phone (a) { document.getElementById("example_text").innerHTML=a; }
</script>

function l_phone (a) { document.getElementById("example_text").innerHTML=a; }

</script>

На этом все, выше по ссылке найдете код в действии. Ах да, и не забываете что на сайте должен быть подключен Jquery. Можете подключить так:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Смена изображения, телефона по клику на ссылку (кнопку)

Смена изображений по клику

Смена телефона по клику

Залишити відповідь Скасувати коментар