假设有3张背景图片P1 P2 P3和2个联接A1 A2
当鼠标不点联接时A1 A2的背景图片为P1
当鼠标onmouseover到A1时A1背景变成P2
当鼠标onclick到A1时A1背景变成P3
当鼠标onclick到A2时A2背景变成P3 A1背景变成P1
这样的JS怎么写 求高手指点代码<head>
<title>无标题文档</title>
</head><body>
<script language=javascript>
function ch_bg(obj_in_cell,new_picture)
{
obj_in_cell.parentNode.background=new_picture;
}
var temp;
function cb_bg(o)
{
if(temp =! undefined){
tem.style.background = "图片P1";}
temp=o; o.style.background="图片P3";
}
</script>
<table border=1><tr>
<td width="1" id="dnt"></td>
<td background="图片P1" height="100" width="100" ><a href="http://www.baidu.com" target="_blank" onclick="cb_bg(this)" onmouseover="ch_bg(this,'图片P2')" onmouseout="ch_bg(this,'图片P1')">A1</a></td>
<td background="图片P1" height="100" width="100"><a href="http://www.baidu.com" target="_blank" onclick="cb_bg(this)" onmouseover="ch_bg(this,'图片P2')" onmouseout="ch_bg(this,'图片P1')">A2</a></td>
</tr></table>
</body>
</html>
当鼠标不点联接时A1 A2的背景图片为P1
当鼠标onmouseover到A1时A1背景变成P2
当鼠标onclick到A1时A1背景变成P3
当鼠标onclick到A2时A2背景变成P3 A1背景变成P1
这样的JS怎么写 求高手指点代码<head>
<title>无标题文档</title>
</head><body>
<script language=javascript>
function ch_bg(obj_in_cell,new_picture)
{
obj_in_cell.parentNode.background=new_picture;
}
var temp;
function cb_bg(o)
{
if(temp =! undefined){
tem.style.background = "图片P1";}
temp=o; o.style.background="图片P3";
}
</script>
<table border=1><tr>
<td width="1" id="dnt"></td>
<td background="图片P1" height="100" width="100" ><a href="http://www.baidu.com" target="_blank" onclick="cb_bg(this)" onmouseover="ch_bg(this,'图片P2')" onmouseout="ch_bg(this,'图片P1')">A1</a></td>
<td background="图片P1" height="100" width="100"><a href="http://www.baidu.com" target="_blank" onclick="cb_bg(this)" onmouseover="ch_bg(this,'图片P2')" onmouseout="ch_bg(this,'图片P1')">A2</a></td>
</tr></table>
</body>
</html>
解决方案 »
- <a href="javascript:"> 这句话的作用
- 用iframe做的在线编译器没有出现效果,各位大虾帮帮忙啊
- 如何实现jquery点击切换的效果?
- jsp图片自动变换
- 函数传值问题,跪求各位大虾指导!!!!
- 紧急请教!在Javascript函数中给PHP中的变量赋值!
- 利用百度地图API开发地图软件,自定义坐标标示覆盖物,在放大和缩小地图的时候,坐标位置总是改变,请高手帮忙解决!!!
- getElementById("A")的时候,有两个ID,分别是"a","A","a"在前,结果取得了"a",怎么解决呀?
- 如何用javascript判断用的是什么浏览器!
- 请问如何校验单选框和复选框
- javascript 写的类能保存到页面上吗?
- 求教:鼠标移动到超链接上弹出一个图层,鼠标移开图层自动关闭 。如何做?
你加了mouseover和mouseout处理函数,你点击后一动鼠标设置的背景图片就没有了?这样有什么特别意义吗???<head>
<title> 无标题文档 </title>
</head> <body>
<script language=javascript>
function ch_bg(obj_in_cell,new_picture)
{
obj_in_cell.parentNode.background=new_picture;
}
function cb_bg(o)
{
if(o=="a1")
document.getElementById("dnt1").background="3h.jpg";
else
{
document.getElementById("dnt1").background="1h.jpg";
document.getElementById("dnt2").background="3h.jpg";
}
}
</script>
<table border=1> <tr>
<td width="1" id="dnt1"> </td>
<td background="1h.jpg" height="100" width="100 " > <a href="http://www.baidu.com" target="_blank " onclick="cb_bg('a1')" onmouseover="ch_bg(this, '2h.jpg')" onmouseout="ch_bg(this, '1h.jpg')"> A1 </a> </td>
<td background="1h.jpg" id="dnt2" height="100" width="100 "> <a href="http://www.baidu.com" target="_blank" onclick="cb_bg('a2')" onmouseover="ch_bg(this, '2h.jpg')" onmouseout="ch_bg(this, '1h.jpg')"> A2 </a> </td>
</tr> </table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body{margin:0px;background-color:#fff;color:#000;font-size:12px;font-family:宋体}
dl, ul{list-style:none;margin:0px;padding:0px}
dl dd, ul li{margin:0px;padding:0px}ul.sw{padding-left:1px;height:24px;line-height:24px;overflow:hidden;}
ul.sw li{float:left;display:inline;margin-left:-1px;text-align:center;cursor:pointer}
ul.sw li a{display:block;height:100%}
ul.sw li a{width:49px;float:left;}
ul.sw li a:link, ul.sw li a:visited{background:url(http://img.china.alibaba.com/images/wangshang/071024/sw1_w2_n.gif) no-repeat;}
ul.sw li a:hover{background:red;} /*这里修改 hover 图片背景*/
ul.sw li.hov a{color:#ff7300;font-weight:bold;background:url(http://img.china.alibaba.com/images/wangshang/071024/sw1_w2_v.gif) no-repeat !important;}/*这里修改 click 图片背景*/.dn{display:none !important}
</style>
<script type="text/javascript">
<!--
function swInitialize(nm,m){
var ula = document.getElementById(nm+'_a')
var ulb = document.getElementById(nm+'_b')
var lisa = ula.getElementsByTagName('li')
var lisb = ulb.getElementsByTagName('dd')
var i
ulb.setAttribute('curr_li',m)
for(i=0; i<lisb.length; i++){
if(i != m)
lisb[i].className = 'dn'
else{
lisb[i].className = ''
}
}
for(i=0; i<lisa.length; i++){
lisa[i].setAttribute('num',i)
if(i == m){
lisa[i].className = 'hov'
}
lisa[i].onclick = function(){
var c = parseInt(ulb.getAttribute('curr_li'))
lisa[c].className = ''
lisb[c].className = 'dn'
var n = this.getAttribute('num')
this.className = 'hov'
lisb[n].className = ''
ulb.setAttribute('curr_li',n)
}
}
} function aLnkClk(o){
o.className = 'v'
return false
}
//-->
</script>
</head><body>
<div style="width:360px">
<ul id="sw_a" class="sw">
<li><a href="#" onclick="return false">网商</a></li>
<li><a href="#" onclick="return false">诚信</a></li>
</ul>
<div class="cont pt9" style="height:205px">
<dl id="sw_b">
<dd class="">
1
</dd>
<dd class="dn">
2
</dd>
</dl>
</div>
</div>
<script type="text/javascript">
<!--
swInitialize('sw',0)
//-->
</script></body>
</html>