繁体   English   中英

更改图像点击和鼠标悬停

[英]Change Image OnClick & OnMouseover

我对JS完全陌生,但有时在必要时偶尔摆弄它。 我正在编写一个功能,当单击滑动图像或从其下方的选取框中选择滑动图像时,该功能会更改页面上的两个图像(画廊图像前后)。 我有工作。 问题是,当鼠标悬停在BEFORE图像上时,我还需要更改AFTER图像,而我似乎无法正确地将该变量传递给函数-这是我所拥有的:

<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函数的字幕中单击更改图像,因为我可以将分配的图像名称变量传递给该函数。 我似乎无法弄清楚如何将BEFORE缩略图名称变量分别传递给鼠标悬停函数(swap1)和(swap2)。 这可能只是一个简单的语法解决方案-但同样,我对JS不够了解,无法弄清楚-任何帮助将不胜感激。

老实说,您的代码有些复杂。 您可以利用HTML元素的data属性来简化此过程。

假设您有一个定义为的容器

<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>

您可以定义一个函数来检索存储在data属性中的路径,并通过交换数据和源值

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));
              });

这将允许您替换HTML中的onmouseoveronmouseout事件。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM