Помощь со скриптом "Смена изображения при клике по ссылке"

[Admin]

Можно сделать даже гораздо лучше и не прописывать большое количество ссылок вручную (это совсем не благодарная работа), но это уже будет совсем другой скрипт.

[narvel]

(09.04.2016 23:09:38)Admin писал(а):  Можно сделать даже гораздо лучше и не прописывать большое количество ссылок вручную (это совсем не благодарная работа), но это уже будет совсем другой скрипт.

Подскажите, где можно посмотреть такой скрипт. Сможете сделать такой скрипт за плату?

[selftrips.ru]

Добрый день.
1. А как можно сделать чтобы область с картинкой была неподвижно относительно экрана, т.е. не менялось при сколинге?
2. Можно ли выводимые картинки вписывать в определенный размер, вне зависимости от их размера?
3. Может не совсем по теме, но связанный вопрос.
Как организовать неподвижный сайбар? Как раз куда будет выводиться неподвижная картинка? (сайбар начинается под заголовком)
Спасибо.

[selftrips.ru]

А как можно подтягивать title и alt?

---

Еще вопрос можно ли все картинки вывести разом одна на другой с alt и title, а по клику на сслку только поднимать "наверх" нужную?

[Erick S]

Подскажите, как сделать чтобы при наведении мыши на картинку она менялась?

<script type="text/javascript">
function l_image (a, b) {
document.example_img.src=a;
document.getElementById("link").onmouseover()=b;
}
</script>

<a href="img/ip7-1-fll.jpg" rel="lightbox[roadtrip]" id="link"><img src="img/ip7-1.png" name="example_img" border="0"></a> - при наведении на неё нужно изменении

<table border="0" cellpadding="0" align="center" width="210"><tr align="center">
<td><a href="jl_image ('img/ip7-1.png','img/ip7-1b.png')"><img src="img/color-black1.png"></a></td>
<td><a href="jl_image ('img/ip7-1w.png','img/ip7-1wb.png')"><img src="img/color-white1.png"></a></td>
<td><a href="jl_image ('img/ip7-1g.png','img/ip7-1gb.png')"><img src="img/color-gold1.png"></a></td>
<td><a href="jl_image ('img/ip7-1r.png','img/ip7-1rb.png')"><img src="img/color-rose1.png"></a></td>
<td><a href="jl_image ('img/ip7-1red.png','img/ip7-1redb.png')"><img src="img/color-red1.png"></a></td>
</tr></table>

[Admin]

Если нужно просто заменить одно изображение на другое при наведении курсора мышки, то при можно помощи CSS :hover

или при помощи onmouseout и onmouseover:

Код:

<img src="image/img_1.png" alt="" onmouseout="this.src='image/img_1.png'" onmouseover="this.src='image/img_2.png'">

[Erick S]

(04.10.2018 15:04:16)Admin писал(а):  Если нужно просто заменить одно изображение на другое при наведении курсора мышки, то при можно помощи CSS :hover

или при помощи onmouseout и onmouseover:

Код:

<img src="image/img_1.png" alt="" onmouseout="this.src='image/img_1.png'" onmouseover="this.src='image/img_2.png'">

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

Код:

<script type="text/javascript">
function l_image (a, b) {
document.example_img.src=a;
document.getElementById("link").onmouseover()=b;
}
</script>

<a href="img/img_1-fll.jpg" id="link"><img src="img/img_1.png" name="example_img" border="0"></a> - при наведении на неё нужно изменении

<table border="0" cellpadding="0" align="center" width="210"><tr align="center">
<td><a href="jl_image ('img/img_1.png','img/img_1-back.png')"><img src="img/color-black.png"></a></td>
<td><a href="jl_image ('img/img_2.png','img/img_2-back.png')"><img src="img/color-white.png"></a></td>
<td><a href="jl_image ('img/img_2.png','img/img_3-back.png')"><img src="img/color-gold.png"></a></td>
<td><a href="jl_image ('img/img_4.png','img/img_4-back.png')"><img src="img/color-rose.png"></a></td>
<td><a href="jl_image ('img/img_5.png','img/img_5-back.png')"><img src="img/color-red.png"></a></td>
</tr></table>

[Admin]

Ну, если я правильно понял задание, то вот код:

Код:

<script type="text/javascript">
function l_image (a, b, c) {
    var img=document.getElementById("example_img");
    img.src=a;
    img.onmouseout=function () { img.src=a };
    img.onmouseover=function () { img.src=c };
    document.getElementById("link").href=b;
}
</script>

<a href="img/img_1-fll.jpg" id="link">
    <img src="image/img_1.png" id="example_img" border="0"
    onmouseout="this.src='image/img_1.png'" onmouseover="this.src='image/li_11.png'">
</a> - при наведении на неё нужно изменении

<table border="0" cellpadding="0" align="center" width="210"><tr align="center">
<td><a href="javascript:l_image ('image/img_1.png', 'link1', 'image/li_11.png')"><img src="image/img_11.png"></a></td>
<td><a href="javascript:l_image ('image/img_2.png', 'link2', 'image/li_22.png')"><img src="image/img_12.png"></a></td>
<td><a href="javascript:l_image ('image/img_3.png', 'link3', 'image/li_33.png')"><img src="image/img_13.png"></a></td>
<td><a href="javascript:l_image ('image/img_4.png', 'link4', 'image/li_44.png')"><img src="image/img_14.png"></a></td>
<td><a href="javascript:l_image ('image/img_5.png', 'link5', 'image/li_55.png')"><img src="image/img_15.png"></a></td>
</tr></table>

[patisosha]

Здравствуйте, на странице с скриптом Константин писал самое последнее сообщение, но ответ на него я так и не нашел.
Вернусь немного обратно...
Есть скрипт

Код:

<script type="text/javascript">
    function l_image (b,a) { document.getElementById(b).src='image/'+a; }
</script>

<img src="image/img_1.png" id="layer_1"></br>
<img src="image/img_2.png" id="layer_2"></br>

Слой 1: <a href="javascript:l_image('layer_1','img_1.png')">red</a>,
<a href="javascript:l_image('layer_1','img_2.png')">green</a>,
<a href="javascript:l_image('layer_1','img_3.png')">blue</a>.

</br>
Слой 2: <a href="javascript:l_image('layer_2','img_2.png')">magenta</a>,
<a href="javascript:l_image('layer_2','img_3.png')">yellow</a>,
<a href="javascript:l_image('layer_2','img_4.png')">black</a>.

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

[patisosha]

Я прошу прощения, читаю сам свое сообщение и понимаю, что написал не понятную ерунду.

Формулировал вопрос так чтоб вроде было понятно.
Можно ли сделать что-то типа такого:

Код:

<script>
function l_image (b,a) { document.getElementById(b).src='image/'+a; }
</script>


<img src="image/img_1.png" id="layer_1"></br> <div id="111">тут что-то о собачках</div>
<img src="image/img_2.png" id="layer_2"></br> <div id="222">тут что-то о кошечках</div>

Собачки: <a href="javascript:l_image('layer_1','img_3.png','ВКЛ div id=333')">Шарик</a>  
               <div id="333" style="НЕВИДИМ">тут инфа и ссылки о Шарике</div>,

         <a href="javascript:l_image('layer_1','img_4.png','ВКЛ div id=444')">Тузик</a>  
               <div id="444" style="НЕВИДИМ">тут инфа и ссылки о Тузике</div>.
</br>
Кошечки: <a href="javascript:l_image('layer_2','img_5.png','ВКЛ div id=555')">Барсик</a>
               <div id="555" style="НЕВИДИМ">тут инфа и ссылки о Барсике</div>,

         <a href="javascript:l_image('layer_2','img_6.png','ВКЛ div id=666')">Пушок</a>  
               <div id="666" style="НЕВИДИМ">тут инфа и ссылки о Пушке</div>.

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