鼠标悬停时的Javascript图像交换 - 丑陋的突出显示效果？

时间：2011-03-03 09:41:51

标签： javascript image mouseover highlight swap

我是 JavaScript新手在网站上工作，我遇到的问题超出了我的解决范围......

我制作了一些图片链接，并且一直在研究着名的图像交换鼠标悬停 JavaScript效果，可以在网络上找到。我有一些简单的白色图像，我想在用户滚动它们时切换到蓝色。我从这里和那里得到了一些代码，并慢慢地将初学者理解为我正在尝试做的内部工作。我只用javascript代码拼凑了一个快速沙箱 html文件，你可以看到here。

（注意脚本运行没有问题）

现在，当我将工作代码迁移到我的主页时，除了当光标悬停在链接上时链接周围出现的丑陋的蓝色高光外，一切似乎都没问题

见这里：

http://www.kendallfrancis.com/

我真的想解决这个问题！

如果你能提供帮助，我将非常非常感激，因为我的大部分时间都是徒劳地试图解决这个问题 - 我需要一些专家观点！

这是我的（臃肿）代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">    
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <title>Kendall Francis | Musician | Galactic Circus Diplodocus</title>
  <meta content="Kendall Francis" name="author">
  <meta content="Kendall Francis 1990-2011" name="copyright">
  <meta content="all" name="robots">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css"><!-- @import "francis.css";--></style>

  <SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
   var mus1 = new Image();
   mus1.src = "images/music1.jpg";
   var mus2 = new Image();
   mus2.src = "images/music2.jpg";
}

function show_music() {
  if (document.images) {
    document["mus"].src = mus2.src;
  }
}

function hide_music() {
  if (document.images) {
    document["mus"].src = mus1.src;
  }
} 
//-->
<!--
if (document.images) {
   var pho1 = new Image();
   pho1.src = "images/photo1.jpg";
   var pho2 = new Image();
   pho2.src = "images/photo2.jpg";
}

function show_photo() {
  if (document.images) {
    document["pho"].src = pho2.src;
  }
}

function hide_photo() {
  if (document.images) {
    document["pho"].src = pho1.src;
  }
} 
//-->
<!--
if (document.images) {
   var vid1 = new Image();
   vid1.src = "images/video1.jpg";
   var vid2 = new Image();
   vid2.src = "images/video2.jpg";
}

function show_video() {
  if (document.images) {
    document["vid"].src = vid2.src;
  }
}

function hide_video() {
  if (document.images) {
    document["vid"].src = vid1.src;
  }
} 
//-->
<!--
if (document.images) {
   var who1 = new Image();
   who1.src = "images/who1.jpg";
   var who2 = new Image();
   who2.src = "images/who2.jpg";
}

function show_who() {
  if (document.images) {
    document["who"].src = who2.src;
  }
}

function hide_who() {
  if (document.images) {
    document["who"].src = who1.src;
  }
} 
//-->
</SCRIPT>       
</head>    
<body>
<div class="cenimg">
<img src="images/break.jpg" alt="kendallfrancis.com" title="Perpetual growth" width="424px" height="456px" class="imgcen"/>
</div>
<div>
   <div align="center">
    <a href="music.htm"
  onMouseOver="show_music(); return true" 
  onMouseOut="hide_music()">
<IMG SRC="images/music1.jpg" ALT="Kendall's music" title="Kendall's music" 
  WIDTH="200" HEIGHT="40" name="mus" border=0></a>
  <img src="images/duck.jpg" title="What the duck?" alt="What the duck?" width="45px" height="40px">
  <a href="photo.htm"
  onMouseOver="show_photo(); return true" 
  onMouseOut="hide_photo()">
<IMG SRC="images/photo1.jpg" ALT="Kendall's photos" title="Kendall's photos"
  WIDTH="200" HEIGHT="40" name="pho" border=0></a>      
  <img src="images/duck.jpg" alt="What the duck?" title="quack!" width="45px" height="40px">      
    <a href="video.htm"
  onMouseOver="show_video(); return true" 
  onMouseOut="hide_video()">
<IMG SRC="images/video1.jpg" ALT="Kendall's videos" title="Kendall's videos"
  WIDTH="200" HEIGHT="40" name="vid" border=0></a>          
  <img src="images/duck.jpg" title="You're despicable!" alt="What the duck?" width="45px" height="40px">          
      <a href="who.htm"
  onMouseOver="show_who(); return true" 
  onMouseOut="hide_who()">
<IMG SRC="images/who1.jpg" ALT="Who is this guy?" title="Who is this guy?" 
  WIDTH="200" HEIGHT="40" name="who" border=0></a>      
</div>
</body>    
</html>

另外，如果你有关于我如何减少代码量的任何提示（我读了一些关于函数的参数，或某些东西......但是并没有真正理解它）呃......是的，就像你一样可以说我是一个真正的业余爱好者......但是如果你愿意忍受我，我真的愿意学习！

哦，我事先搜索了这个 - 很多---找不到任何适用的东西。但是，如果你知道这已经得到了回答，我很抱歉。

2 个答案:

答案 0 :(得分：1)

这些亮点在于过度影像本身 - 背景并非完全黑色

这是较短的代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Kendall Francis | Musician | Galactic Circus Diplodocus</title>
  <meta content="Kendall Francis" name="author">
  <meta content="Kendall Francis 1990-2011" name="copyright">
  <meta content="all" name="robots">
  <style type="text/css"><!-- @import "francis.css";--></style>

<script type="text/javascript">
  // an object containing one member per image 
  // with the corresponding images in an array
  var links = {
    "music":  ["images/music1.jpg","images/music2.jpg"],
    "photo":  ["images/photo1.jpg","images/photo2.jpg"],
    "video":  ["images/video1.jpg","images/video2.jpg"],
    "who"  :  ["images/who1.jpg",  "images/who2.jpg"]
  } // note: no comma after the last entry

  // preload
  for (var o in links) {
    links[o].images = []; // create an array
    for (var i=0;i<links[o].length;i++) { // only two images but could be more
      links[o].images[i]=new Image();
      links[o].images[i].src=links[o][i];
    }
  }

function show(img,idx) { 
  // pass the name of the image, which is also the key to the links object
  // the idx is 1 for over and 0 for out
  document[img].src = links[img].images[idx].src; 
}
</script>

</head>

<body>
<div class="cenimg">
<img src="images/break.jpg" alt="kendallfrancis.com" title="Perpetual growth" width="424px" height="456px" class="imgcen"/>
</div>
<div>

   <div align="center">

    <a href="music.htm"
  onMouseOver="show('music',1); return true" 
  onMouseOut="show('music',0); return true"><img 
  src="images/music1.jpg" alt="Kendall's music" title="Kendall's music" width="200" height="40" name="music" border="0"></a>

  <img src="images/duck.jpg" title="What the duck?" alt="What the duck?" width="45px" height="40px">

  <a href="photo.htm"
  onMouseOver="show('photo',1); return true" 
  onMouseOut="show('photo',0)"><img 
  src="images/photo1.jpg" alt="Kendall's photos" title="Kendall's photos" width="200" height="40" name="photo" border="0"></a>

  <img src="images/duck.jpg" alt="What the duck?" title="quack!" width="45px" height="40px">

    <a href="video.htm"
  onMouseOver="show('video',1); return true" 
  onMouseOut="show('video',0)"><img 
  src="images/video1.jpg" alt="Kendall's videos" title="Kendall's videos" width="200" height="40" name="video" border="0"></a>

  <img src="images/duck.jpg" title="You're despicable!" alt="What the duck?" width="45px" height="40px">

      <a href="who.htm"
  onMouseOver="show('who',1); return true" 
  onMouseOut="show('who',0)"><img 
  src="images/who1.jpg" ALT="Who is this guy?" title="Who is this guy?" width="200" height="40" name="who" border="0"></a>


</div>

</body>


</html>

答案 1 :(得分：-1)

我认为这是一个CSS问题..

http://www.w3schools.com/css/tryit.asp?filename=trycss_link_background

链接css属性会导致蓝色背景出现在链接

周围
相关问题
最新问题