menu - image rollover, active image
HejsanHar lavet følgende menu, ud af grafik lavet i photoshop:
http://30something.dk
Menuen er lavet i javascript og lidt css
Html og javascript koden er her:
<script language="JavaScript" type="text/javascript">
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "menuknapper2/hjem1.jpg" ;
homebuttondown = new Image() ;
homebuttondown.src = "menuknapper2/hjem2.jpg" ;
ombuttonup = new Image();
ombuttonup.src = "menuknapper2/om3.jpg" ;
ombuttondown = new Image() ;
ombuttondown.src = "menuknapper2/om4.jpg" ;
webbuttonup = new Image();
webbuttonup.src = "menuknapper2/web1.jpg" ;
webbuttondown = new Image() ;
webbuttondown.src = "menuknapper2/web2.jpg" ;
fotobuttonup = new Image();
fotobuttonup.src = "menuknapper2/foto1.jpg" ;
fotobuttondown = new Image() ;
fotobuttondown.src = "menuknapper2/foto2.jpg" ;
indretbuttonup = new Image();
indretbuttonup.src = "menuknapper2/indretning1.jpg" ;
indretbuttondown = new Image() ;
indretbuttondown.src = "menuknapper2/indretning2.jpg" ;
refbuttonup = new Image();
refbuttonup.src = "menuknapper2/reference1.jpg" ;
refbuttondown = new Image() ;
refbuttondown.src = "menuknapper2/reference2.jpg" ;
galleributtonup = new Image();
galleributtonup.src = "menuknapper2/galleri1.jpg" ;
galleributtondown = new Image() ;
galleributtondown.src = "menuknapper2/galleri2.jpg" ;
prisbuttonup = new Image();
prisbuttonup.src = "menuknapper2/pris1.jpg" ;
prisbuttondown = new Image() ;
prisbuttondown.src = "menuknapper2/pris2.jpg" ;
blogbuttonup = new Image();
blogbuttonup.src = "menuknapper2/blog1.jpg" ;
blogbuttondown = new Image() ;
blogbuttondown.src = "menuknapper2/blog2.jpg" ;
kontaktbuttonup = new Image();
kontaktbuttonup.src = "menuknapper2/kontakt1.jpg" ;
kontaktbuttondown = new Image() ;
kontaktbuttondown.src = "menuknapper2/kontakt2.jpg" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<div id="menuknapper">
<a href="index.php"
onmouseover="buttondown('homebutton')"
onmouseout="buttonup('homebutton')">
<img src="menuknapper2/hjem1.jpg" name="homebutton" alt="Hjem" border="0" /></a>
<a href="om.php" onmouseover="buttondown('ombutton')" onmouseout="buttonup('ombutton')">
<img src="menuknapper2/om3.jpg" name="ombutton" alt="Om os" border="0" /></a>
<a href="webdesign.php" onmouseover="buttondown('webbutton')" onmouseout="buttonup('webbutton')">
<img src="menuknapper2/web1.jpg" name="webbutton" alt="Webdesign" border="0" /></a>
<a href="foto.php" onmouseover="buttondown('fotobutton')" onmouseout="buttonup('fotobutton')">
<img src="menuknapper2/foto1.jpg" name="fotobutton" alt="Fotografi" border="0" /></a>
<a href="indretning.php" onmouseover="buttondown('indretbutton')" onmouseout="buttonup('indretbutton')">
<img src="menuknapper2/indretning1.jpg" name="indretbutton" alt="Indretning" border="0" /></a>
<a href="referencer.php" onmouseover="buttondown('refbutton')" onmouseout="buttonup('refbutton')">
<img src="menuknapper2/reference1.jpg" name="refbutton" alt="Referencer" border="0" /></a>
<a href="galleri.php" onmouseover="buttondown('galleributton')" onmouseout="buttonup('galleributton')">
<img src="menuknapper2/galleri1.jpg" name="galleributton" alt="Galleri" border="0" /></a>
<a href="priser.php" onmouseover="buttondown('prisbutton')" onmouseout="buttonup('prisbutton')">
<img src="menuknapper2/pris1.jpg" name="prisbutton" alt="Priser" border="0" /></a>
<a href="http://blog.30something.dk" target="_blank" onmouseover="buttondown('blogbutton')" onmouseout="buttonup('blogbutton')">
<img src="menuknapper2/blog1.jpg" name="blogbutton" alt="Blog" border="0" /></a>
<a href="kontakt.php" onmouseover="buttondown('kontaktbutton')" onmouseout="buttonup('kontaktbutton')">
<img src="menuknapper2/kontakt1.jpg" name="kontaktbutton" alt="Kontakt" border="0" /></a></div>
Hvordan laver jeg det sådan, at jeg ved den pågældende side jeg er på, har en aktiv knap i en anden farve, så man lettere kan se, at det er der man er?
Svært at forklare, men jeg vil godt have at hvis man er på forsiden så er hjem knappen fx. turkis i stedet for grøn....
Har søgt på nettet men kan ikke llige finde det jeg søger.....
