JavaScript - 从不同的图像选择悬停时图像更改 [英] JavaScript - Image change on hover from different image selections

问题描述

您好。



我对这个东西很新。所以忍受我。



以下javascript是使用OpenCart的网站上所谓模块的一部分。该模块几乎显示了来自首选图像Y的图像X.代码如下：

Hello.

I am quite new to this stuff. So bear with me.

The following javascript is part of a so-called module on a website using OpenCart. The module pretty much shows images X from a preferred selection of images Y. The code is the following:

<script type="text/javascript"><!--
$(document).ready(function() {
	$('#banner<?php echo $module; ?> div:first-child').css('display', 'block');
});

var banner = function() {
	$('#banner<?php echo $module; ?>').cycle({
		before: function(current, next) {
			$(next).parent().height($(next).outerHeight());
		}
	});
}

setTimeout(banner, 2000);
//--></script>

此脚本使为横幅模块选择的图像循环遍历它们。



我想要它做的是在将鼠标悬停在横幅上时简单地从图像A更改为B.例如：当我选择的图像不超过两张时，A& B，对于横幅模块，我希望它在鼠标悬停时显示图像B，在鼠标移动时显示A.



我想它不可能一个固定的URL图像源，因为我将使用几个不同的横幅，为网站提供不同的图像。



横幅模块当前标识其图像（使用当前设置）如下：

This script makes the images selected for the banner module to cycle through them all in a loop.

What I want it to do is to simply change from image A to B when hovering the mouse over the banner. For example: When I have selected no more than two images, A & B, for the banner module, I want it to show image B on mouseover, and A on mouseout.

I suppose it can''t be a fixed URL image source, as I''m going to use several different banners with different images for the site.

The banner module currently identifies its images (with the current setup) as follows:

<div id="banner<?php echo $module; ?>" class="banner">
  <?php foreach ($banners as $banner) { ?>
  <?php if ($banner['link']) { ?>
  <div><a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></a></div>
  <?php } else { ?>
  <div><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>" /></div>
  <?php } ?>
  <?php } ?>
</div>

其中''image''是来自某个横幅设计的图片你可以将图像上传到网站的管理区域内。



到目前为止我尝试了不同的javascript设置而没有任何运气。任何想法都会很棒。

Where ''image'' is the image(s) from a certain banner design which you can upload images to within an admin area on the website.

I tried different javascript setups without any luck so far. Any ideas to this would be great.

推荐答案

（ document ）。ready（ function （）{

(document).ready(function() {

（' #banb<？php echo

('#banner<?php echo

module;？> div：first-child'）。css（' display'，' block'） ;
}）;

var banner = function （）{

module; ?> div:first-child').css('display', 'block'); }); var banner = function() {

这篇关于JavaScript - 从不同的图像选择悬停时图像更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！