Изменить изображение OnClick & OnMouseover

Question

Я полный орех с JS, но иногда я играю с ним, когда это необходимо. Я пишу функцию, которая меняет два изображения на странице (до & после изображений галереи), когда скользящее изображение нажимается/выбирается из рамки под ними. У меня это работает. Проблема заключается в том, что мне также нужно изменить ПОСЛЕ изображения, когда ДО изображение наведении мышки, и я не кажется, чтобы быть в состоянии передать эту переменную в функции правильно - вот то, что у меня есть:

<script> 
    function changeImage(imgName) 
    { 
var img = imgName; 
img += 'a.jpg'; 
var img1 = imgName; 
img1 += 'b.jpg'; 

image = document.getElementById('imgDisp'); 
image.src = img;  

image = document.getElementById('imgDisp1'); 
image.src = img1; 
    } 


    function swap1(image) 
    { 
var img = 'newgallery/'; 
img += image; 
img += 'b.jpg'; 
    image = document.getElementById('imgDisp'); 
    image.src = img;  

    } 


    function swap2(image) 
    { 
var img = 'newgallery/'; 
img += image; 
img += 'a.jpg'; 
    image = document.getElementById('imgDisp'); 
    image.src = img;  
    } 
</script> 



<table border=0 width=85%> 
<tr> 
<td align=center valign=top> 
<img id="imgDisp1" src=newgallery/1b.jpg height=80 
onmouseover="swap1(img)" 
onmouseout="swap2(img)" 
> 
<p class=content>BEFORE</b></p></td> 
<td width=35></td> 
<td align=center><img id="imgDisp" src=newgallery/1a.jpg width=550></td> 
</tr> 
</table> 


<marquee behavior="scroll" direction="left" scrollamount="3"  onMouseOver="this.stop();" onMouseOut="this.start();"> 


<?php 

$imagenum = '1'; 
$imageset = 'a.jpg'; 
$imagesetalt = 'b.jpg'; 

while($imagenum < 37){ 

$imagename = "$imagenum$imageset"; 
$imagethumb = "$imagenum$imagesetalt"; 

if($imagenum == '13'){ 

}else{ 

echo"    
<img src=\"newgallery/$imagename\" height=\"120\" border=0 onclick=\"changeImage('newgallery/$imagenum')\"> 
<img src=images/spacer.gif width=25 height=1>"; 

} 

$imagenum++; 

} 


?> 

Я могу изменить изображения при щелчке в области выделения, вызывающей функцию changeImage, потому что я могу передать назначенную им переменную имени имени функции. Кажется, я не могу понять, как передать переменную имени переименованного знака в функции mouseover (swap1) & (swap2) соответственно. Это может быть просто синтаксическое решение, но опять же я не знаю JS достаточно хорошо, чтобы понять это - любая помощь будет оценена.

Answer 1

Честно говоря, ваш код немного сложнее. Вы можете упростить это, воспользовавшись атрибутом data элементов HTML.

Допустим, у вас есть контейнер определяется как

<div id = 'img_container' class = 'some_class'> 
    <img id = 'image' class = 'some_image_class' src = '/path/to/default/image.jpg' 
    data-alt = '/path/to/hover/image.jpg' /> 
</div> 

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

function swap(image){ 
    //temporary variable to hold the alternate image path 
    var newImage = image.data("alt"); 

    //store the image src attribute in the `data-alt` attribute 
    image.data("alt", image.attr("src"); 

    //replace the image src attribute with the new image path 
    image.attr("src", newImage); 

} 

Теперь, вы можете применять события к изображению через

$("#image").on("mouseover", function(e){ 
       swap($(e.currentTarget)); 
       }) 
       .on("mouseout", function(e){ 
       swap($(e.currentTarget)); 
       }); 

Это позволит вам заменить e onmouseover и onmouseout событий в вашем HTML.