CSS Mouseouver button (afbeelding)
Ik heb een probleem.
Wanneer ik deze onderstaande code op mijn website plaats, en over de afbeelding ga met de muis, wordt hij wit. (transparant, want de achtergrondkleur van mijn website is wit)
Hoe kan ik er voor zorgen in dit script dat dit niet meer gebeurd?
Quote:
<html>
<head>
<title>CSS hover button</title>
<style type="text/css">
* html a:hover{visibility:visible}
.mouseover
{
width:150px;
height:105px;
background-image:http://www.bcdriveinshow.nl/foto1.png;
}
.mouseover a {display:block}
.mouseover img {width:100%; height:100%}
.mouseover a:hover img {visibility:hidden;}
</style>
</head>
<body>
<DIV class="mouseover">
<a href="http://www.bcdriveinshow.nl">
<img border="0" src="http://www.bcdriveinshow.nl/foto2.png" width="150" height="105"></a>
</DIV>
</body>
</html>
<head>
<title>CSS hover button</title>
<style type="text/css">
* html a:hover{visibility:visible}
.mouseover
{
width:150px;
height:105px;
background-image:http://www.bcdriveinshow.nl/foto1.png;
}
.mouseover a {display:block}
.mouseover img {width:100%; height:100%}
.mouseover a:hover img {visibility:hidden;}
</style>
</head>
<body>
<DIV class="mouseover">
<a href="http://www.bcdriveinshow.nl">
<img border="0" src="http://www.bcdriveinshow.nl/foto2.png" width="150" height="105"></a>
</DIV>
</body>
</html>
Of zouden jullie het script goed kunnen maken?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>CSS hover button</title>
</head>
<body>
<a href="http://www.bcdriveinshow.nl">
<img border="0" src="http://www.bcdriveinshow.nl/foto2.png" onmouseover="this.src='http://www.bcdriveinshow.nl/foto1.png'" onmouseout="this.src='http://www.bcdriveinshow.nl/foto2.png'" width="150" height="105"/>
</a>
</body>
</html>
<head>
<title>CSS hover button</title>
</head>
<body>
<a href="http://www.bcdriveinshow.nl">
<img border="0" src="http://www.bcdriveinshow.nl/foto2.png" onmouseover="this.src='http://www.bcdriveinshow.nl/foto1.png'" onmouseout="this.src='http://www.bcdriveinshow.nl/foto2.png'" width="150" height="105"/>
</a>
</body>
</html>