Question

我希望有人帮我解决这个问题。问题是，我有5个锚标签，每个标签都有一个图像。鼠标悬停时，图像应更改为不同的图像，鼠标输出应回滚到同一个上一个图像。我使用一些代码做了这个，但它根本不工作。有时鼠标悬停工作有时鼠标输出有效，但两者都无法同时工作。也有人可以帮助我将这个JavaScript编码简化为紧凑的jQuery编码。

Fiddle

HTML：

<body>
  <div class="home_wrapper">
    <div class="header">
      <div class="left_head">
        <img src="Images/logo.jpg" />
      </div>
      <div class="right_head">
        <div class="empty"></div>
        <a href="#" class="menu_but" id="1" onmouseover="roll(this.id)" onmouseout="rollback(this.id)">
          <img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
        </a>

        <img class="menu_line" src="Images/line.png" />
        <a href="#" class="menu_but" id="2" onmouseover="roll(this.id)">
          <img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
        </a>

        <img class="menu_line" src="Images/line.png" />
        <a href="#" class="menu_but" id="3" onmouseover="roll(this.id)">
          <img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
        </a>

        <img class="menu_line" src="Images/line.png" />
        <a href="#" class="menu_but" id="4" onmouseover="roll(this.id)">
          <img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
        </a>

        <img class="menu_line" src="Images/line.png" />
        <a href="#" class="menu_but" id="5" onmouseover="roll(this.id)">
          <img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
        </a>

        <img class="menu_line" src="Images/line.png" />
        <a href="#" class="menu_but" id="6" onmouseover="roll(this.id)">
          <img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
        </a>

        <img class="menu_line" src="Images/line.png" />
        <a href="#" class="menu_but" id="7" onmouseover="roll(this.id)">
          <img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" />
        </a>

      </div>
    </div>
  </div>
</body>

的JavaScript：

function roll(a) {
  var a;
  //alert(a);
  var alloc = document.getElementById(a);

  if (a == 1) {
    alloc.innerHTML = '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCr1SVvp2w2_tA9MEb3myB-GMC8HBA3X_b0OahVp8HBynzyGS7"/>';

  } else if (a == 2) {
    alloc.innerHTML = '<img src="http://www.clker.com/cliparts/0/7/9/2/11954285511639254892power_button_raoul_rene__01.svg.med.png
"/>';
  } else if (a == 3) {
    alloc.innerHTML = '<img src="http://www.gifs.cc/home/large-home-button-amber.jpg"/>';
  } else if (a == 4) {
    alloc.innerHTML = '<img src="http://www.gifs.cc/home/large-home-purple.jpg"/>';
  } else if (a == 5) {
    alloc.innerHTML = '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTuEEKlyX_gmwmHSOoOCM31sCF-hs0humgJ956hOgYEDn23_3fa"/>';
  } else if (a == 6) {
    alloc.innerHTML = '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRW1zA5eAA8-GcasNeSsln7J1R51lclCQqYbYE_pqZSC2WpPcs9"/>';
  } else if (a == 7) {
    alloc.innerHTML = '<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQHSS3Xaa0f9Jkc2bI-uQErfsNRmSHA0Q9VkSjZOrUGkyX-yj-7Ug"/>';
  }
}

function rollback(obj) {
  var obj;
  alert(obj);
  var disalloc = document.getElementById(obj);
  if (obj == 1) {
    disalloc.innerHTML = '<img src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG"/>';
  }
}

CSS：

.home_wrapper {
    border: 1px solid black;
    width: 100%;
    height: 700px;
}
.header {
    //border:1px solid red;
    width: 100%;
    height: 14.5%;
}
.left_head {
    //border:2px solid black;
    width: 25.5%;
    height: 100%;
    float: left;
    margin-left: 1%;
    background-image: url(Images/bg.png);
    //background-repeat:repeat-x;
    //background-repeat:repeat-y;
    background-repeat: repeat;
}
.left_head img {
    width: 100%;
    height: 89%
}
.right_head {
    margin-left: 0.2%;
    //border:1px solid red;
    width: 73%;
    height: 100%;
    float: left;
    background-image: url(Images/bg.png);
    //background-repeat:repeat-x;
    //background-repeat:repeat-y;
    background-repeat: repeat;
}
.menu_but img {
    margin-top: 2.8%;
    width: 12%;
    height: 70%;
}
.menu_line {
    margin-bottom: 3%;
}
.empty {
    //border:1px solid black;
    width: 8%;
    height: 100%;
    float: left;
}

Answer 1

使用jQuery会很简单。以下小提琴会帮助你。

http://jsfiddle.net/17g6q8k0/2/

var sourceSwap = function () {
        var $this = $(this);
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    }

    $(function() {
        $('img[data-alt-src]').each(function() { 
            new Image().src = $(this).data('alt-src'); 
        }).hover(sourceSwap, sourceSwap); 
    });

Answer 2

这是为了简化你的分配功能：

function roll(a)
{
var a;
//alert(a);
var alloc =document.getElementById(a);
    var myImageOptions = {
        '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCr1SVvp2w2_tA9MEb3myB-GMC8HBA3X_b0OahVp8HBynzyGS7" />',
        '<img src="http://www.clker.com/cliparts/0/7/9/2/11954285511639254892power_button_raoul_rene__01.svg.med.png" />',
        '<img src="http://www.gifs.cc/home/large-home-button-amber.jpg" />',
        '<img src="http://www.gifs.cc/home/large-home-purple.jpg" />',
        '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTuEEKlyX_gmwmHSOoOCM31sCF-hs0humgJ956hOgYEDn23_3fa" />',
        '<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRW1zA5eAA8-GcasNeSsln7J1R51lclCQqYbYE_pqZSC2WpPcs9" />',
        '<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQHSS3Xaa0f9Jkc2bI-uQErfsNRmSHA0Q9VkSjZOrUGkyX-yj-7Ug" />'
    };
    alloc.html(myImageOptions[a+1]);
}

我在编辑器中看到，您的图片无法加载。先解决这个问题。

Answer 3

这个解决方案只需要jQuery的魔力。对于每个图像，您需要定义下一个标记：

类等于“changeimage”
src 等于原始图片的完整网址。
数据输入等于鼠标结束时图像的完整网址。
数据输出等于鼠标离开时图像的完整网址（等于 src ）

这是一个例子：

<img class="changeimage" 
     src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" 
     data-out="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" 
     data-in="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCr1SVvp2w2_tA9MEb3myB-GMC8HBA3X_b0OahVp8HBynzyGS7" />

<img class="changeimage" 
     src="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" 
     data-out="http://img2.imagesbn.com/p/2940147140789_p0_v4_s260x420.PNG" 
     data-in="http://www.clker.com/cliparts/0/7/9/2/11954285511639254892power_button_raoul_rene__01.svg.med.png" />

然后，这个脚本将满足您的需求：

$(".changeimage").hover(
  function () {
    $(this).attr('src', $(this).data('in'));
  },
  function () {
    $(this).attr('src', $(this).data('out'));
  }
);

您可以在http://jsfiddle.net/msnm0w35/1/

上看到它

鼠标悬停＆amp;单个锚标记中的mouseout事件

Fiddle

HTML：

的JavaScript：

CSS：

3 个答案: