关于鼠标经过，点击更换图片！

时间：2023-01-12 10:22:40
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图像交换</title>
<script language="javascript">
var circleoff;
var circleon;
if(document.images){
circleoff=new Image(50,50);
circleoff.src="one.PNG";
circleon=new Image(50,50);
circleon.src="tow.PNG";
circleChange=new Image(50,50);
circleChange.src="three.PNG";
}
function On(name){
if(document.images){
document.images['img'+name].src=circleon.src;
}
}
function Off(name){
if(document.images){
document.images['img'+name].src=circleoff.src;
}
}
function onChange(name){
if(document.images){
document.images['img'+name].src=circleChange.src;
}
}
</script>
</head>

<body>
<a href="" onMouseOver="On(0)" onMouseOut="Off(0)"  onclick="onChange(0)"><img style="border:none;" src="one.PNG" name="img0"></a>
</body>
</html>


one.PNG为暗图片，鼠标经过该暗图片后就变成2.PNG亮图片，单击后就还是2.PNG亮图片，但是当鼠标离开之后又变回了暗图片，怎么实现单击图片后就算鼠标离开还是亮图片！

10 个解决方案

#1

主要就是自己要去控制这个状态，比如设置个全局变量来控制：
var flag = false;

onChange()中：
flag = true;

Off()中：
if (!flag) {
  if(document.images){
  document.images['img'+name].src=circleoff.src;
  }
}

#2

<a href="#" onclick="onChange(0)"></a>


a {
  width: 100px;
  height: 20px;
  background-image: url("one.PNG");
  display: block;
}
a:hover {
  background-image: url("two.PNG");
}
a:visited {
  background-image: url("two.PNG");
}

#3

改变class的名称，写三种不同的样式 分别在不同的事件调用 即可实现这个效果

#4

我来出个馊主意
//加个ID
<a href="" onMouseOver="On(0)" onMouseOut="Off(0)" onclick="onChange(0)" id="aTag">
function onChange(name){
  if(document.images){
    document.images['img'+name].src=circleChange.src;
}
改成
function onChange(name){
  if(document.images){
    document.getElementById('aTag').setAttribute("onMouseOut",""); //把这个事件改成空的..
    document.images['img'+name].src=circleChange.src;
}

#5

好，我逐个都来试下！

#6

大家觉得我分应该怎么给？

#7

引用 6 楼 better_ 的回复:
大家觉得我分应该怎么给？


分不重要，平分也行，看谁的更优美就给谁高点也行。

重要的是你要说你最后是怎么做的，以及为什么你这么选择。

这样才是交流，大家才觉得帮你出主意是有收获的。

#8

引用 7 楼 ldh911 的回复:
引用 6 楼 better_ 的回复:
大家觉得我分应该怎么给？


分不重要，平分也行，看谁的更优美就给谁高点也行。

重要的是你要说你最后是怎么做的，以及为什么你这么选择。

这样才是交流，大家才觉得帮你出主意是有收获的。

暂时还未发现更准确的用法。不过第一次来，非常感谢你们！

#9

建议使用 jquery   你会发现原来JS 代码框架是多嘛方面！

#10

通过css写几个样式，js去控制什么时候显示那个样式。

#1

主要就是自己要去控制这个状态，比如设置个全局变量来控制：
var flag = false;

onChange()中：
flag = true;

Off()中：
if (!flag) {
  if(document.images){
  document.images['img'+name].src=circleoff.src;
  }
}

#2

<a href="#" onclick="onChange(0)"></a>


a {
  width: 100px;
  height: 20px;
  background-image: url("one.PNG");
  display: block;
}
a:hover {
  background-image: url("two.PNG");
}
a:visited {
  background-image: url("two.PNG");
}

#3

改变class的名称，写三种不同的样式 分别在不同的事件调用 即可实现这个效果

#4

我来出个馊主意
//加个ID
<a href="" onMouseOver="On(0)" onMouseOut="Off(0)" onclick="onChange(0)" id="aTag">
function onChange(name){
  if(document.images){
    document.images['img'+name].src=circleChange.src;
}
改成
function onChange(name){
  if(document.images){
    document.getElementById('aTag').setAttribute("onMouseOut",""); //把这个事件改成空的..
    document.images['img'+name].src=circleChange.src;
}

#5

好，我逐个都来试下！

#6

大家觉得我分应该怎么给？

#7

引用 6 楼 better_ 的回复:
大家觉得我分应该怎么给？


分不重要，平分也行，看谁的更优美就给谁高点也行。

重要的是你要说你最后是怎么做的，以及为什么你这么选择。

这样才是交流，大家才觉得帮你出主意是有收获的。

#8

引用 7 楼 ldh911 的回复:
引用 6 楼 better_ 的回复:
大家觉得我分应该怎么给？


分不重要，平分也行，看谁的更优美就给谁高点也行。

重要的是你要说你最后是怎么做的，以及为什么你这么选择。

这样才是交流，大家才觉得帮你出主意是有收获的。

暂时还未发现更准确的用法。不过第一次来，非常感谢你们！

#9

建议使用 jquery   你会发现原来JS 代码框架是多嘛方面！

#10

通过css写几个样式，js去控制什么时候显示那个样式。
标签：

相关文章