Смена картинок при наведении курсора

@edR0s · Регистрация: 03.08.2012

Author24 — интернет-сервис помощи студентам

Народ, прошу сильно не ругайте меня, я всего третий день осваиваю javascript. помогите разобраться.

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

HTML5

<div id="blok1">
<img src="blok1.png" border="0"/>
<a href="ssilka.html" onmouseover="imgOn('img1')"; onmouseout="imgOff('img1')" >
<img src="kartinka1.png" border="0" name=img1 /></a>
 
<a href="ssilka2.html" onmouseover="imgOn('img2')"; onmouseout="imgOff('img2')" >
<img src="kartinka3" border="0" name=img2 /></a>
</div>
<div id="Animation"><img src="blok2.png" border="0"/>
<img src="animation.gif" border="0" ) /></div>
 
<script language="JavaScript">
if (document.images) { 
img1on = new Image();   
img1on.src ="kartinka2.png"; 
img1off = new Image();  
img1off.src = "kartinka1.png"; 
 
img2on = new Image();   
img2on.src ="kartinka4.png"; 
img2off = new Image();  
img2off.src = "kartinka3.png";
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src"); }}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src"); }}
</script>

Так вот, есть еще kartinka5 и kartinka6, которые должны появляться в блоке Animation. И вообще надо чтобы скрипт работал на 10 и более картинок. Пожалуйста, помогите разобраться)

@newJS · 04.08.2012, 07:58

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

HTML5

<div id="blok1">
<img src="../pics/avant48.gif" alt="">
<img src="../pics/chrome48.gif" alt="">
<img src="../pics/firefox48.gif" alt="">
<img src="../pics/ie48.gif" alt="">
<img src="../pics/navigator48.gif" alt="">
<img src="../pics/nichrom48.gif" alt="">
<img src="../pics/opera48.gif" alt="">
<img src="../pics/safari48.gif" alt="">
 
</div>
<div id="Animation"><img src="../pics/safari48.gif"alt="">
</div>

CSS

1	#blok1, #Animation {border:0;}

Javascript

(function(){
var d, obj;
d=document;
 
onload=function(){
var m, k;
obj=d.getElementById("Animation").getElementsByTagName("img")[0];
m=d.getElementById("blok1").getElementsByTagName("img");
k=m.length;
while(k--){
m[k].onmouseover=over;
m[k].onmouseout=out;
};
 
 
 };
 
function over(){
obj.src=this.src;
this.src="../pics/yandex48.gif";
 
 };
 
function out(){
this.src=obj.src;
 };
 
 })();

@edR0s · 04.08.2012, 23:33 **[ТС]**

Ну вот, к примеру, как на этом сайте - http://derfas13.narod.ru/UMKCombos.html
Скрин

в блоке 1 я мышкой навожу на картинку, а в блоке 2, она меняется на нужную.

@vrodnenok · 05.08.2012, 01:32

Сообщение от edR0s

Ну вот, к примеру, как на этом сайте - http://derfas13.narod.ru/UMKCombos.html
Скрин -

в блоке 1 я мышкой навожу на картинку, а в блоке 2, она меняется на нужную.

Вы же сами привели пример кода, который Вам нужен.

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

Javascript

$('.pictures').mouseover(function() {
var selected_picture = $(this)... (тут сами придумайте, как резолвить название картинки из выбранного элемента)
$('#big_picture').attr("src", selected_picture);
});

@edR0s · 05.08.2012, 04:10 **[ТС]**

Попробую по-другому обрисовать задачу.
Имеется:
Блок А - в нем картинка А1
Блок Б - в нем картинка Б1
Блок В - в нем картинка В1

Надо сделать так, чтобы:
при наведении курсором на блок А,в блоке А картинка А1 менялась на картинку А2, а в блоке В на картинку А3;
при наведении на блок Б, в блоке Б картинка Б1 менялась на картинку Б2, а в блоке В менялась на картинку Б3.

@vrodnenok · 05.08.2012, 09:23

Сообщение от edR0s

Надо сделать так, чтобы:
при наведении курсором на блок А,в блоке А картинка А1 менялась на картинку А2, а в блоке В на картинку А3;

при наведении курсора на элемент, вызывается хэндлер - mouseover. чтобы восстановить картинку после того, как курсор покидает элемент - используется хэндлер - mouseleave. как меняется сорс картинки я уже написал.

если нужен полный скрипт, то в Вашем же примере ПКМ -> Исходный код страницы. И там уже подробно изучайте, как реализовано.

@edR0s · 05.08.2012, 17:30 **[ТС]**

Всё проблему решил...Может кто столкнется с похожей проблемой..

HTML5

<div id="blokA"><a href="index.html" onmouseover="imgOn('img1')"; onmouseout="imgOff('img1')"><img src="kartinkaA1.png" onmouseover="kartinkavblokV(id)" id="A3" name=img1 /></a></div>
<div id="blokB"><a href="index2.html" onmouseover="imgOn('img2')"; onmouseout="imgOff('img2')" ><img src="kartinkaB1.png" onmouseover="kartinkavblokV(id)" id="B3" name=img2 /></a>
</div>
<div id="blokV"><img name="blokV" src="kartinkaV1.png">
</div>

Javascript

if (document.images) { 
img1on = new Image();   
img1on.src ="kartinkaA2.png"; 
img1off = new Image();  
img1off.src = "kartinkaA1.png";
 
img2on = new Image();   
img2on.src ="kartinkaB2.png"; 
img2off = new Image();  
img2off.src = "kartinkaB1.png";
 
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src"); }}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src"); }}
 
function kartinkavblokV(n) {
   if (document.blokV.src) {
      document.blokV.src = "kartinka" + n + ".png"};
}}

@edR0s 0 / 0 / 0 Регистрация: 03.08.2012 Сообщений: 4
	04.08.2012, 23:33 [ТС]	3
	Ну вот, к примеру, как на этом сайте - http://derfas13.narod.ru/UMKCombos.html Скрин в блоке 1 я мышкой навожу на картинку, а в блоке 2, она меняется на нужную. 0

@edR0s 0 / 0 / 0 Регистрация: 03.08.2012 Сообщений: 4
	05.08.2012, 04:10 [ТС]	5
	Попробую по-другому обрисовать задачу. Имеется: Блок А - в нем картинка А1 Блок Б - в нем картинка Б1 Блок В - в нем картинка В1 Надо сделать так, чтобы: при наведении курсором на блок А,в блоке А картинка А1 менялась на картинку А2, а в блоке В на картинку А3; при наведении на блок Б, в блоке Б картинка Б1 менялась на картинку Б2, а в блоке В менялась на картинку Б3. 0

@vrodnenok 16 / 16 / 5 Регистрация: 17.05.2012 Сообщений: 124
	05.08.2012, 09:23	6
	Сообщение от edR0s Надо сделать так, чтобы: при наведении курсором на блок А,в блоке А картинка А1 менялась на картинку А2, а в блоке В на картинку А3; при наведении курсора на элемент, вызывается хэндлер - mouseover. чтобы восстановить картинку после того, как курсор покидает элемент - используется хэндлер - mouseleave. как меняется сорс картинки я уже написал. если нужен полный скрипт, то в Вашем же примере ПКМ -> Исходный код страницы. И там уже подробно изучайте, как реализовано. 0

	05.08.2012, 17:30