Plaatje wijzigen bij mouseover

Status
Niet open voor verdere reacties.

pilootnour5

Terugkerende gebruiker
Lid geworden
22 nov 2008
Berichten
1.895
Ik wil graag een knop maken. (BMP of GIF) en als ik daar dan met mijn muis overheen ga, wil ik dat hij dan in een ander plaatje verandert. Weet iemand hier de HTML code. Geen flash. De rest kan allemaal. Alvast bedankt.
 
Laatst bewerkt door een moderator:
dat is met CSS,

a:link, a:active, a:visited {
background-image: url(images/knop1.bmp);
}


a:hover {
background-image: url(images/knop2.bmp);
}
 
Note: Ik zou wel gaan voor GIF (of PNG), een BMP duurt langer om te laden namelijk plus dat het je meer ruimte kost.
 
ik zette in die code alleen maar bmp omdat hij het erover had. mij maakt het niet uit wat hij gebruikt, gebruik zelf het liefst png,
maar denk wel dat zijn vraag is opgelost
 
nit gelukt

Nou, eigenlijk is het niet gelukt. Kun je nog wat precieser zijn?
Het liefst een nederlandse site. Anders snap ik er geen Bal van?
 
Ik zou toch liever de CSS-variant aanraden.

Die code lijkt mij aardig wat makkelijker te begrijpen dan hetzelfde kunstje in JavaScript.
 
Css

Wat is CSS???? Jullie hebben het daar wel over maar ik heb geen flauw idee wat het is.
 
CSS = Cascading StyleSheet

Daarmee bepaal je de opmaak van je pagina.
Misschien is het handiger eerst je ergens in te verdiepen voor je iets wilt maken :rolleyes:
 
Hierbij een style opmaak.

HTML:
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
	<head>
		  
		<meta http-equiv="content-type"
		 content="text/html; charset=iso-8859-1" >
		  
		<title>
			ray ray le tarde's house of cards
		</title>
<style type="text/css">
ul.navvylist li a
{
display: block;
width: 120px;
font-weight:normal;
margin:0;
color: #000;
background-image: url("menu_fill_gl.gif");
background-repeat: repeat-x;
border-bottom:1px solid #ededed;
text-decoration: none;
padding-left:10px;
padding-top:7px;
padding-bottom:7px;

}

.navvy>ul#navvylist li a { width: auto; }

ul.navvylist li#active a
{
background: #f1f1f1;
color: #2a508a;

}


ul.navvylist li a:hover, ul#navvylist li#active a:hover {
color : #ff0000;
font-weight : bold;
background-image: url("menu_fill_bl.gif") ;
background-repeat:repeat-x;
list-style: url('arrow.gif');

}
ul {list-style-type: none}

</style>
	</head>
	<body>
		<div class="leftcolumn">
			<h2>
				laatse videos
			</h2>
			<div class="navvy" >
				<ul class="navvylist" >
					  
					<li>
					<a href="http://atsquad.com/rayray/test/index.html#">linkje</a>
					 
					</li>
					  
					<li>
					<a href="http://atsquad.com/rayray/test/index.html#">linkje</a>
					 
					</li>
					  
					<li>
					<a href="http://atsquad.com/rayray/test/index.html#">linkje</a>
					 
					</li>
					  
					<li>
					<a href="http://atsquad.com/rayray/test/index.html#">linkje</a>
					 
					</li>
					  
					<li>
					<a href="http://atsquad.com/rayray/test/index.html#">linkje</a>
					</li>
				</ul>
			</div>
		</div>
		
		<img src="arrow.gif" width="10" height="10" alt="a">
		<img src="menu_fill_bl.gif" width="6" height="38" alt="b">
		<img src="menu_fill_gl.gif" width="6" height="38" alt="g">
		

	</body>
</html>

Plaatjes in bijlages.

:cool:
 

Bijlagen

  • arrow.gif
    arrow.gif
    59 bytes · Weergaven: 48
  • menu_fill_bl.gif
    menu_fill_bl.gif
    899 bytes · Weergaven: 50
  • menu_fill_gl.gif
    menu_fill_gl.gif
    901 bytes · Weergaven: 51
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan