Смена изображения при клике по ссылке
Для того чтобы не загружать одновременно всеми изображения одну страничку (а изображений могут быть десятки), предлагаем Вам воспользоваться скриптом, который будет менять изображение на другое при клике по нужной ссылке.
Для примера покликайте по ссылкам, расположенным слева от изображения, и Вы увидите как меняется изображение без перезагрузки всей странички.
|
Ссылка на изображение № 1 Ссылка на изображение № 2 Ссылка на изображение № 3 Ссылка на изображение № 4 |
|
){kind=link}
){kind=link}
){kind=link}
){kind=link}
Для получения такого эффекта "смены" изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:
<script type="text/javascript">
function l_image (a) {
document.example_img.src = a;
}
</script>В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:
<table style="width: 100%;">
<tr style="text-align: center; vertical-align: center;">
<td style="width: 50%;">
<a href="javascript:l_image('image/img_1.png')">Ссылка на изображение № 1</a><br>
<a href="javascript:l_image('image/img_2.png')">Ссылка на изображение № 2</a><br>
<a href="javascript:l_image('image/img_3.png')">Ссылка на изображение № 3</a><br>
<a href="javascript:l_image('image/img_4.png')">Ссылка на изображение № 4</a><br>
</td>
<td style="width: 50%;">
<img src="image/img_1.png" name="example_img"
alt="Картинки для демонстрации работы скрипта смены изображений">
</td>
</tr>
</table>Данный пример поможет Вам избежать переизбытка изображений на одной страничке сайта и улучшит общую читабельность.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
<style type="text/css">
a:focus {color: #00FF00;}
</style>
<script type="text/javascript">
function l_image (a, b) {
document.example_img.src = a;
document.getElementById("example_text").innerHTML = b;
}
</script>
<table style="width: 100%;">
<tr style="text-align: center; vertical-align: center;">
<td style="width: 50%;">
<a href="javascript:l_image('image/img_1.png', 'Просто картинка')">Ссылка на изображение № 1</a><br>
<a href="javascript:l_image('image/img_2.png', 'Вторая картинка')">Ссылка на изображение № 2</a><br>
<a href="javascript:l_image('image/img_3.png', 'Это не картинка')">Ссылка на изображение № 3</a><br>
<a href="javascript:l_image('image/img_4.png', 'Изображение')">Ссылка на изображение № 4</a><br>
</td>
<td style="width: 50%;">
<img src="image/img_1.png" name="example_img"><br>
<div id="example_text">Просто картинка</div>
</td>
</tr>
</table>
<div id="example_text">Просто картинка</div> можете расположить как Вам угодно. Текст внутри блока со всеми тегами разместите вместо 'Просто картинка' и т.д.
Подробнее - http://usefulscript.ru/forum/showthread.php?tid=219
В стили пропишите следующее .l_image:hover{width: 400px;}
Т.е., например, кликнул по первой ссылке, посмотрел картинку через лупу, кликнул по второй ссылке, посмотрел другую картинку через лупу и так далее.
Вот, например, я кликнул по первой ссылке, а у меня в буфер сохранился адрес картинки?
Заранее благодарю за любую помощь или ссылки.
Не подскажете, возможно ли реализовать подгрузку контента из SQL?
Или я что-то не верно сделал:
<script type="text/javascript">
function l_image (a) { document.getElementById("example_frame").src = a; }
</script>
<?php
while($news = mysql_fetch_array($qr_result)){
echo '<li><a href="javascript:l_image (./admin/'.$news['url_pict'].', '.$news['body'].')"><img class="more" src="./images/elements/more.png"></a><img class="border" width="162" height="144" src="./admin/'.$news['url_pict'].'"/>';
}
?>
<img src="admin/files/20140204225623.jpg" name="example_img"><br>
<div id="example_text">Просто картинка</div>
Смена контента при клике не происходит.
Заранее спасибо.
В function l_image (a) { document.getElementById("example_frame").src = a; } у Вас example_frame, а в коде странички example_img. Это раз. Во-вторых, нужно добавить одинарные кавычки внутри скобок:
<a href="javascript:l_image (\'./admin/'.$news['url_pict'].', '.$news['body'].'\')"><img class="more" src="./images/elements/more.png"></a>
frame/img описался, пока варианты пробовал.
Причем, видел эти кавычки, а как вторые поставить - не владею.
Единственное, у меня заработало таким образом: <a href="javascript:l_image (\'./admin/'.$news['url_pict'].'\', \''.$news['body'].'\')">
P.S. Вдруг кто еще столкнется, если в базе текст "example_text" содержит кавычки "" - не работает, но не проблема, имхо.
Хороший скрипт. В html встает нормально, но вот если его вставлять в шаблон WordPress (например), на страницу, то адрес картинок не читает, точнее просто не может пройти по ссылке и не отображает изображение('img/0_2.jpg').
Плагин установил "Allow Javascript in posts and pages", реакции "0". Пробовал прописать полный путь к изображению ('krivbass-krepost/wp-content/themes/medical_treatment_wp_theme/img/0_2.jpg'), тот же "0".
Помогите, пожалуйста. Заранее благодарен.
P.S. Глянул Ваш сайт, у Вас неправильно указаны пути до изображений (попробуйте указать полный путь)!
Как необходимо изменить скрипт, чтобы его можно было использовать неоднократно на сайте?
Если на странице необходимо вывести несколько блоков с картинками. Структура следующая:
<img src="image/1.jpg" name="example_img1"></br>
ссылка 11, ссылка12
<img src="image/2.jpg" name="example_img2"></br>
ссылка 21, ссылка22
Как необходимо изменить функцию, чтобы данная структура заработала или это можно по другому реализовать?
<style type="text/css">
a:focus {color: #00FF00;}
</style>
<a tabindex="0" href="javascript:l_image('image/img_1.png')">Ссылка на изображение № 1</a>
$('.slide_link').click(function(){
$('.slide_link').css("color", "blue");
$(this).css("color", "red");
});
Нашел простое решение: строчки "Картинка 1", "Картинка 2", "Картинка 3" представлены как список <li></li>.
Первой картинке присвоен класс <li class="active">Картинка 1</li>.
В стилях этого класса описан цвет отличный от остальных пунктов списка. Т.е. при первой загрузке первая строка будет гарантировано отличаться от других. При клике по какой-либо строке, просто присваивается этот класс. Код такой:
var myTarget = $(".product_menu"); //блок со списком
targetLi = myTarget.find("li"); //элементы li
$(targetLi).click(function(){
$(targetLi).removeClass("active"); // отменяет класс
$(this).addClass("active"); // присваивает класс
});
PS только начинаю осваивать JS, возможно код можно сделать ещё проще, но может кому-то пригодится.
<div style="width: 20px; height: 20px; background-color: #990000;" onclick="l_image('image/img_1.png')"><br>
<div style="width: 20px; height: 20px; background-color: #009900;" onclick="l_image('image/img_2.png')"><br>
З.Ы. Аналог OpenCart но не на PHP.
.im_w { z-index: 1; position: absolute; }
.im_d { z-index: 2; position: absolute; }
.im_c { z-index: 3; position: absolute; }
<a href="" onmouseover="l_image('image/img_1.png')">Ссылка на изображение № 1</a>
Мне бы хотелось, чтобы при наведении на заголовок пункта меню (городской транспорт, пригородные электрички и др.) под меню менялась картинка. Меню сделано списком <ul><li>. Спасибо.
Присвойте картинке под меню уникальный id (например, <img id="change_img" ...).
Добавьте на страничку JavaScript код:
function chgImg(url) {
$('#change_img').fadeOut('fast',function(){ $('#change_img').attr('src', url).fadeIn('fast'); });
}
А в пункты меню добавьте событие onmouseover, например:
<font id="megor" onmouseover="chgImg('image_1.png')">Городской транспорт</font>
где image_1.png - картинка, которая будет отображена при наведении на пункт меню "Городской транспорт". Для следующих пунктов меню по аналогии, только с другими изображениями.
И хотелось бы задать положение этого дела в шапке, понимаю, что в CSS делается, но не силён. Спасибо!
<script type="text/javascript">
function l_image (a) { document.getElementById("example_text").innerHTML = a; }
</script>
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="center" align="center">
<td width="120" height="50" >
<a href="javascript:l_image ('+7(395)***-**-**')">Иркутск</a><br>
<a href="javascript:l_image ('+7(391)***-**-**')">Красноярск</a><br>
</td>
<td width="120" height="50">
<div id="example_text">Выберите город</div>
</td>
</tr>
</table>
Код был перенесен на наш форум.
<script type="text/javascript">
function l_image (a, b) {
document.example_img.src = a;
document.getElementById("link").href = b.href;
}
</script>
<a href="index.php" onMouseOver="l_image('image/img_1.png', this)">Ссылка № 1</a><br>
<a href="forum.php" onMouseOver="l_image('image/img_2.png', this)">Ссылка № 2</a><br>
<a href="script.php" onMouseOver="l_image('image/img_3.png', this)">Ссылка № 3</a><br>
<a href="index.php" id="link"><img src="image/img_1.png" name="example_img"></a>
function l_image (a, b) {
document.example_img.src = a;
document.getElementById("link").href = b;
}
</script>
<a href="javascript:l_image('image/img_1.png', 'index.php')">Ссылка № 1</a><br>
<a href="javascript:l_image('image/img_2.png', 'forum.php')">Ссылка № 2</a><br>
<a href="javascript:l_image('image/img_3.png', 'script.php')">Ссылка № 3</a><br>
<a href="index.php" id="link"><img src="image/img_1.png" name="example_img"></a>
P.S. Код удалил, т.к. он повторяет код из сообщения.
Спасибо.
document.body.style.background="url(image/" + bg_url[counter] + ")";
где bg_url - массив url изображений.
1. А как можно закрепить на экране изображение? Т.е. что бы при скролинге оно оставалось неподвижно?
1.1. Как сделать, чтобы это выглядело как неподвижный сайдбар?
2. Можно ли добавить фиксированный размер обрасти, а картинка должна в нее "встраиваться", вне зависимости от своего размера.
Спасибо.
Значения top/right(left) меняй как тебе нужно.
2. Помести картинку в div с фиксированной шириной, а картинке задай width: 100%, должно помочь.
PS: Автору скрипта спасибо, очень помог!
Скажем, "Добавить в закладки" рисунок красный квадратик (есть картинка) с title="Добавить в Закладки", после нажатия кнопки происходит смена этой же картинки на рисунок Зеленого цвета с title="Уже в закладках".
Заранее спасибо.
Скрипт подключен правильно проверял через консоль.
Если, например, добавлять код на страницу то все работает.
Но если добавить этот код в каждый слайдер (то есть заказчик попросил в первом слайдер по тексту меняются картинки, во втором слайдере тоже самое и т.д.).
То не работает код, я так понимаю что JS конфликтуют между собой
Подскажите как это исправить?
Но вот как сделать чтоб на странице несколько таких работало? Всю голову поломал, ничего не получается.
<script type="text/javascript">
function l_image (a, b) {
document.example_img.src = a;
document.getElementById("example_text").innerHTML = b;
}
</script>
<img src="small/dg-19-rubin-d.png" name="example_img"><br>
<div id="example_text">Просто картинка</div>
<a href="javascript:l_image('small/do-19zhemchug2a.png', 'Просто картинка')"><img src="big/kollekziya-elit/bristol-steklo-rombi-bronza.png" width="48" height="72"></a><br>
<a href="javascript:l_image('small/do-19zhemchug2v.png', 'Вторая картинка')"><img src="big/kollekziya-elit/bristol-steklo-vitraj-veronik.png" width="48" height="72"></a><br>