如何从onMouseOver的CSS样式表加载图像？
如何从onMouseOver的CSS样式表加载图像？
提问于 2018-07-23 07:08:35
我正在为一组处于不同状态的按钮(Yellow.png=onload按钮、red.png=onmouseover Selected按钮、Blue e.png=onmouseover未选定按钮、White e.png=mouseout按钮)加载图像。
我正在使用Javascript，但我并不完全确定如何在保留按钮当前功能的同时从.css样式表加载图像。
如何做到这一点？按钮图像：https://www.campaignmonitor.com/css/
HTML
<html>
<head>
<meta charset="UTF-8"/>
<title>test</title>
<meta name="test" content="description">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="screen.css" media="handheld"/>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>
<script language="Javascript">
function load (button1, button2, button3) {
document.getElementById('load') = button1;
document.getElementById('load') = button2;
document.getElementById('load') = button3;
}
</script>
<script language="Javascript">
function change (button1, button2, button3) {
document.button1.src = button1;
document.button2.src = button2;
document.button3.src = button3;
}
</script>
</head>
<body>
<div id=buttons>
<center?
<a href="" onMouseOver="change('red.png','blue.png','blue.png');"
onMouseOut="change('white.png','white.png','white.png');">
<img src="yellow.png" name="button1" style="max-width:22%;" border="0"
width="100%" height="100%"></a>
<a href="" onMouseOver="change('blue.png','red.png','blue.png');"
onMouseOut="change('white.png','white.png','white.png');">
<img src="yellow.png" name="button2" style="max-width:22%;" border="0"
width="100%" height="100%"></a>
<a href="" onMouseOver="change('blue.png','blue.png','red.png');"
onMouseOut="change('white.png','white.png','white.png');">
<img src="yellow.png" name="button3" style="max-width:22%;" border="0"
width="100%" height="100%"></div></a>
</center>
</div>
</body>
</html>CSS
body {
background-color: rgb(0,0,0);
margin: 0px;
border: 0px black;
padding: 0px;
line-height: 1.25;
overflow: hidden;
}
#buttons {
background-color: rgba(0,0,0,0);
width: 70vw;
font-size: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
max-width:70vw;
}
div.load {
background: url("yellow.png") no-repeat;
display: inline;
}回答 1
Stack Overflow用户
发布于 2018-07-23 16:17:11
你不需要load函数，因为浏览器在读取CSS文件时会加载图像。使其在发生事件(onMouseOver、onMouseOut)时更改元素的类名，图像将出现/消失。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005634
复制相关文章
相似问题