Klein probleempje met mouseover, wie helpt?

**Patrick Rijks** · 21-11-2010, 13:08

Ik heb een probleempje met een menu dat gebruik maakt van een mouseover.
Het betreft het horizontale menu aan de bovenzijde op de volgende website: http://snipurl.com/1hvu0r

Huidige code:

Code:

<body onload="MM_preloadImages('img/nav/loodgietersover.jpg','img/nav/verwarmingover.jpg','img/nav/elektraover.jpg','img/nav/renovatieover.jpg','img/nav/tegelwerkenover.jpg','img/nav/projectenover.jpg','img/nav/vacaturesover.gif')">
 <div id="nav">
  <a href="loodgieters.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('loodgieters','','img/nav/loodgietersover.jpg',1)"><img src="img/nav/loodgieters.gif" alt="Loodgieters" name="loodgieters" width="97" height="43" border="0" id="loodgieters" /></a>
  <a href="verwarming.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('verwarming','','img/nav/verwarmingover.jpg',1)"><img src="img/nav/verwarming.gif" alt="Verwarming" name="verwarming" width="100" height="43" border="0" id="verwarming" /></a>
  <a href="elektra.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('elektra','','img/nav/elektraover.jpg',1)"><img src="img/nav/elektra.gif" alt="Elektra" name="elektra" width="72" height="43" border="0" id="elektra" /></a>
  <a href="renovatie.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('renovatie','','img/nav/renovatieover.jpg',1)"><img src="img/nav/renovatie.gif" alt="Renovatie" name="renovatie" width="83" height="43" border="0" id="renovatie" /></a>
  <a href="tegelwerken.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('tegelwerken','','img/nav/tegelwerkenover.jpg',1)"><img src="img/nav/tegelwerken.gif" alt="Tegelwerken" name="tegelwerken" width="98" height="43" border="0" id="tegelwerken" /></a>
  <a href="projecten.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('projecten','','img/nav/projectenover.jpg',1)"><img src="img/nav/projecten.gif" alt="Projecten" name="projecten" width="80" height="43" border="0" id="projecten" /></a>
  <a href="vacatures.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('vacatures','','img/nav/vacaturesover.gif',1)"><img src="img/nav/vacatures.jpg" alt="Vacatures" name="vacatures" width="79" height="43" border="0" id="vacatures" /></a>
 </div>

Wie helpt verder?

**Freek G** · 21-11-2010, 13:22

Kan je het probleem noemen? Ik zie namelijk niet wat er fout is.

**Robin L** · 21-11-2010, 13:26

Origineel gepost door Freek G

Kan je het probleem noemen? Ik zie namelijk niet wat er fout is.

Denk de mouseover heh

http://www.johnvandijck.nl/js/menu.js

Not Found

The requested URL /js/menu.js was not found on this server.
Apache Server at www.johnvandijck.nl Port 80

**Jeroen F.** · 21-11-2010, 13:26

Volgens mij kan je dit veel beter met css doen

**Robert v. Huizen** · 21-11-2010, 13:27

Je zou dit makkelijker geheel in CSS kunnen vormgeven. Niet alleen praktischer maar ook beter voor het overzicht in je code.

Bijvoorbeeld zo:

Code:

<a href="loodgieters.html" class="menu_loodgieters">Loodgieters</a>

Code:

.menu_loodgieters{
background:url(img/nav/loodgieters.gif);
}
.menu_loodgieters:hover{
background:url(img/nav/loodgietersover.jpg);
}

Dan nog wel even attributen zoals breedte, hoogte e.d. erbij zetten.

**Patrick Rijks** · 21-11-2010, 13:33

Thnxx :)
Momenteel opgelost met het js bestand. Met CSS ga ik binnenkort aan de slag! :)

**Frank van L.** · 21-11-2010, 13:35

Een oplossing zou inderdaad via CSS zijn. Hieronder zie je een klein voorbeeldje.

Code:

<style>
#nav a {
    float:left;
    height:43px;
    display:block;
    overflow:hidden;
    background-repeat:no-repeat;}
#nav a#loodgieters {
    width:97px;
    background-image:url(http://www.johnvandijck.nl/img/nav/loodgieters.gif);}
#nav a#loodgieters:hover {
    background-image:url(http://www.johnvandijck.nl/img/nav/loodgietersover.jpg);}
</style>

<div id="nav">
    <a id="loodgieters" href="loodgieters.html"></a>
</div>

Zelf zou ik alle menu plaatjes in 1 plaatje zetten en de background-position aanpassen, maar dat is mischien een volgende stap voor je ;)

Klein probleempje met mouseover, wie helpt?