Смена изображения по клику и подгрузка файлов с описанием

[Admin]

К теме Смена изображения при клике по ссылке пользователь Герасим оставил интересный комментарий, в котором он нашел интересное решение и хорошее применение выше указанному скрипту.

А именно он предложил при смене изображения по клику подгружать файл с описанием появившегося изображения. Файл подгружается из-за того, что описания к изображениям довольно объемные и нет смысла их все запихивать в скрипт смены изображения.

Вот полный текст комментария:

Код:

Без оных технологий, но опираясь на Ваш пример и iframe всё получилось!
Добавляем на страницу iframe:
<iframe id="example_frame" src="" frameborder="0" scrolling="auto" width="700" height="300" align="left">
    not support!
</iframe>

В скрипте прописываю изменение SRC у iframe (передаю URL):
<script type="text/javascript">
function l_image (a, b) {
document.example_img.src=a;
document.getElementById("example_frame").src=b
}
</script>

Ну и при нажатии моих кнопок-ссылок вызываю скрипт:
<A HREF="javascript:l_image ('vte_model/vte-14-22.gif', 'vte_model/vte.htm')">
В итоге появляется крупная картинка выбранного продукта и развёрнутое описание под ним (теперь можно отказаться от отдельной картинки, так как её можно впихнуть в показываемый html).

Ещё раз спасибо за Ваш экзампл!

Получилось не дурно. Сам о iframe даже не подумал, т.к. не долюбливаю их и не использую.

[Admin]

Решил доделать до конца.
Код получился довольно универсальный, т.к. с его помощью можно подгружать как PHP и HTML странички, так и просто файл с изображением.

Код:

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

<iframe id="example_frame" src="" frameborder="1" scrolling="auto" width="700" height="300" align="left">
Изначально пусто
</iframe>

<a href="javascript:l_image ('index.php')">Страничка PHP</a><br>
<a href="javascript:l_image ('example.htm')">Страничка HTML</a><br>
<a href="javascript:l_image ('image/img_3.png')">Просто изображение</a>

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

[dveriraduga]

Не работает в Mozilla Firefox (Мазила Фаерфокс) почему-то, так же в Мозиле не работает Ваш скрипт http://usefulscript.ru/change_img_link.php.
В остальных браузерах все отлично. В чем может быть причина?

[dveriraduga]

Все разобрался. Текст надо было писать в строчку. Спасибо за замечательный скрипт.

[Admin]

Рад, что у Вас все получилось.
Как я понял по IP адресу, в комментариях к теме тоже Вы писали, но вчера был занят и не мог ответить. Раз все закончилось благополучно, то Ваши комментарии удалил.

[muzz-as]

А как можно осуществить смену изображений при переходе со страницы на страницу. Допустим: в шапке сайта. Т.е. есть 10-15 картинок и посетитель, переключаясь с одной страницы на другую, видит рандомные изображения?

[Admin]

Посмотрите другую нашу тему - Скрипт выбора случайного изображения из указанных папок.

[Admin]

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

Ссылка на сам комментарий - # 2920.

(20.12.2015 19:43:26)xoxol39 писал(а):Спасибо! Допилил так:
Создал класс contacts
Обернул в div

Этот код вставил в header.php

Код:

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

<div class="contacts"><table border="0" cellspacing="0" cellpadding="0">
<tr valign="center" align="center">
<td width="120" height="70" >
<a href="javascript:l_image ('+7(****)********')">Иркутск</a><br><br>
<a href="javascript:l_image ('+7(***)*********')">Красноярск</a><br><br>
<div id="example_text">Выберите город</div>
</td>
</tr>
</table></div>

В файл style.css добавил код:

Код:

.contacts
{
color:#000000;
font-size:14px;
float:right;
padding-right:150px;
padding-top:25px;
}

Результат здесь, (сайт тестовый) 1uspekh-rf.1gb.ru

[xoxol39]

Тоже самое, только в одну строку:

Код:

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

<div class="contacts"><table border="0" cellspacing="0" cellpadding="0">
<tr valign="center" align="center">
<td width="52" height="15" >
<a href="javascript:l_image ('+7(3952)98-51-57')">Иркутск</a></td>
<td width="80" height="15" >
<a href="javascript:l_image ('+7(923)296-10-19')">Красноярск</a></td>
<td width="110" height="15" >
<div id="example_text">Выберите город</div></td>
</tr>
</table></div>