实现鼠标hover图片时image切换以及背景backgroundImage切换

2015 年 12 月 15 日 by 沧海之树 In 其他

功能：

1. 实现鼠标hover图片时图片切换；

2. 同时实现背景的切换；

js代码：

<script type="text/javascript">
function picShow(nwhich)
{
if(!document.getElementById) return;
if(nwhich==2)
{
document.getElementById('doc').style.backgroundImage="URL(images/con5_2_bg.jpg)";
}
else if(nwhich==3)
{
document.getElementById('doc').style.backgroundImage="URL(images/con5_3_bg.jpg)";
}
else if(nwhich==4)
{
document.getElementById('doc').style.backgroundImage="URL(images/con5_4_bg.jpg)";
}
else
{
document.getElementById('doc').style.backgroundImage="URL(images/con5_1_bg.jpg)";
}
}

</script>

 

html调用：

<div class="con5" id="doc">
<img src="images/dark_lyj.png" onmouseover="this.src='images/gold_lyj.png';picShow(1);" onmouseout="this.src='images/dark_lyj.png'" class="doc1"/>
<img src="images/dark_tym.png" onmouseover="this.src='images/gold_tym.png';picShow(2);" onmouseout="this.src='images/dark_tym.png'" class="doc2"/>
<img src="images/dark_cbx.png" onmouseover="this.src='images/gold_cbx.png';picShow(3);" onmouseout="this.src='images/dark_cbx.png'" class="doc3"/>
<img src="images/dark_ftx.png" onmouseover="this.src='images/gold_ftx.png';picShow(4);" onmouseout="this.src='images/dark_ftx.png'" class="doc4"/>
</div>