使用onmouseover和onmouseout事件切换案例

时间:2017-01-20 07:04:21

标签: javascript switch-statement case onmouseover onmouseout

我一直试图让onmouseover和onmouseout一起工作,但我不知道如何将它绑定到事件上。在此先感谢您的帮助

<script>
function img(img){
switch(img)
{
case "showSq": 
document.getElementById("square").innerHTML = '<img src="square.png">';
break;
case "hideSq": 
document.getElementById("square").innerHTML = '';
break;
case "showCr": 
document.getElementById("circle").innerHTML = '<img src="circle.png">';
break;
case "hideCr": 
document.getElementById("circle").innerHTML = '';
break;
}}
</script> 
<body>
<div id=right>
<h1> Geometry </h1>
<p>
<span onmouseover="img(showSq)" onmouseout="img(hideSq)"> SQUARE</span>,
<span onmouseover="img(showCr)" onmouseout="img(hideCr)"> CIRCLE </span>
</p>
<p> <span id="circle"> <span id="square"> </p>
</div>

2 个答案:

答案 0 :(得分:1)

你的参数应该是img(&#39; showSq&#39;)而且<span>标签缺少</span>标签

<p> <span id="circle"></span> <span id="square"></span> </p>

答案 1 :(得分:0)

添加单个法院以创建一个函数参数字符串

<span onmouseover="img('showSq')" onmouseout="img('hideSq')"> SQUARE</span>,
<span onmouseover="img('showCr')" onmouseout="img('hideCr')"> CIRCLE </span>