Как сделать смену картинки при наведении мышью ?

AndreyM · November 10, 2008

Примерно так:

Картинкамаленькая1 | Картинкамаленькая2 | Картинкамаленькая3

КАРТИНКАБОЛЬШАЯ1

Т.е три маленькие картинки находятся в верхней табличке, состоящей из 1 ячейки и трех столбцов, а Большая картинка расположена под этой табличкой, нужно чтобы при наведении мышью на маленькие картинки, большая картинка внизу менялась на соответствующую. Спасибо.

vvsh · November 10, 2008

-

Edited November 10, 2008 by vvsh

rus · November 10, 2008

Вот посмотри, на примере одного моего знакомого как он делал.

З.Ы. просто мой вариант был немного другим, а писать опять лениво, хоть и по времени занимает не больше 5 мин.

Пример на css.

Edited November 10, 2008 by rus

vvsh · November 10, 2008

<html>
<head>
<script type="text/javascript">
function zam1() {
new_p = "<img src='первая большая'>";
document.getElementById('big').innerHTML=new_p;
}
function zam2() {
new_p = "<img src='вторая большая'>";
document.getElementById('big').innerHTML=new_p;
}
function zam3() {
new_p = "<img src='третяя большая'>";
document.getElementById('big').innerHTML=new_p;
}
</script>
</head>

<body>
<img src="первая малая" onMouseOver="zam1()">
<img src="вторая малая" onMouseOver="zam2()">
<img src="третяя малая" onMouseOver="zam3()">
<div id="big"></div>
</body>
</html>

Edited November 10, 2008 by vvsh

Иван Шумов · November 10, 2008

у vvsh опять хреновое решение

<script type="text/javascript">
mypics[0] = '01img.jpg';
mypics[1] = '02img.jpg';
mypics[2] = '03img.jpg';
function change(id) {
new_pic = '<img src="http://site_url/path_to_images/'+mypics[id]+'" alt="">';
document.getElementById('big').innerHTML=new_pic;
}
</script>

<img src="первая малая" onMouseOver="change(0)">
<img src="вторая  малая" onMouseOver="change(1)">
<img src="третяя  малая" onMouseOver="change(2)">
<div id="big"></div>

при желании еще улучшить можно

vvsh · November 10, 2008

так тоже можно, я просто js мало знаю, написал как смог...

rus · November 10, 2008

На js вообще хреново делать, так как не секрет если он отключен, то работать не будет, а на css если чнстно не знаю на сколько это будет валидно и кроссбраузерно, но все лучше чем js.

Иван Шумов · November 10, 2008

На js вообще хреново делать, так как не секрет если он отключен, то работать не будет, а на css если чнстно не знаю на сколько это будет валидно и кроссбраузерно, но все лучше чем js.

на CSS это вообще не возможно

Pavel_html · November 10, 2008

у vvsh опять хреновое решение

<script type="text/javascript">
mypics[0] = '01img.jpg';
mypics[1] = '02img.jpg';
mypics[2] = '03img.jpg';
function change(id) {
new_pic = '<img src="http://site_url/path_to_images/'+mypics[id]+'" alt="">';
document.getElementById('big').innerHTML=new_pic;
}
</script>

<img src="первая малая" onMouseOver="change(0)">
<img src="вторая  малая" onMouseOver="change(1)">
<img src="третяя  малая" onMouseOver="change(2)">
<div id="big"></div>

при желании еще улучшить можно

ну давай улучшим

<script type="text/javascript">
function change(img) {
new_pic = '<img src="http://site_url/path_to_images/'+img+'" alt="">';
document.getElementById('big').innerHTML=new_pic;
}
</script>

<img src="первая малая" onMouseOver="change('iiddh.gif')">
<img src="вторая  малая" onMouseOver="change('img1.gif')">
<img src="третяя  малая" onMouseOver="change('img.gif')">
<div id="big"></div>

лично я бы такую штуку сделал бы на jQuery.. как я здесь например сделал.

<html>
<head>
<script type="text/javascript">
function zam1() {
new_p = "<img src='первая большая'>";
document.getElementById('big').innerHTML=new_p;
}
function zam2() {
new_p = "<img src='вторая большая'>";
document.getElementById('big').innerHTML=new_p;
}
function zam3() {
new_p = "<img src='третяя большая'>";
document.getElementById('big').innerHTML=new_p;
}
</script>
</head>

<body>
<img src="первая малая" onMouseOver="zam1()">
<img src="вторая малая" onMouseOver="zam2()">
<img src="третяя малая" onMouseOver="zam3()">
<div id="big"></div>
</body>
</html>

вова. ты слышал такую вещь как передача даных в функцию? ты же в php функции помнишь? так вот, в js тоже можно передавать значения в функцию.

Иван Шумов · November 10, 2008

Паш, в этот раз признаю - качественно, однако jQuery опять-же нафиг не нужен - зачем тяжелые библиотеки с собой таскать?

vvsh · November 10, 2008

на CSS это вообще не возможно wink.gif

Тока хотел это сказать.

blink.gif вова. ты слышал такую вещь как передача даных в функцию? ты же в php функции помнишь? так вот, в js тоже можно передавать значения в функцию.

...

Pavel_html · November 10, 2008

...

а ты вежливей стал..

AndreyM · November 10, 2008

Спасибо всем огромное ! Работает !

rus · November 10, 2008

на CSS это вообще не возможно

Ты бы хоть скачал и посмотрел что ли прежде чем говорить.

Ну или можно так посмотреть.

Edited November 10, 2008 by rus

Иван Шумов · November 10, 2008

Ты бы хоть скачал и посмотрел что ли прежде чем говорить.

почему-то я уже уверен что ослик бы загнулся)

rus · November 10, 2008

Отредактировал и добавил ссылку.

UPD: правда внимательно перечитав пост автора, понял это не совсем то..., но кто ему мешает вместо ссылок 1,2,3... поставить картинки превьюшки?

rome.ro · November 14, 2008

"на CSS это вообще не возможно"

Почему это невозможно? Прочитайте в нете про псевдокласс HOVER в СSS - это намного проще и не нужен никакой JAVASCRIPT. Это реально простой метод.

Sign In

Как сделать смену картинки при наведении мышью ?

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information