login  Naam:   Wachtwoord: 
Registreer je!
 Forum

hover werkt niet goed (Opgelost)

Offline san - 17/04/2010 19:50
Avatar van sanHTML interesse Ik maak gebruik van een menu waarin de afbeelding van de button veranderd als je er met je muis over gaat. Het werkt wel...maar niet echt goed. Het inladen van de afbeelding wanneer je er met je muis overgaat(menu1a) duurt nl erg lang waardoor een paar seconde niets te zien is. Als je dit eenmaal een keer gedaan hebt werkt het wel goed. Wat zou dit kunnen zijn?
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="menu">
  2.     <a id="home" href="index.html"></a>
  3. </div>
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu {
  2.     width: 900px;
  3.     height: 53px;
  4.     margin-top: 60px;
  5.     background: #FFFFFF;
  6.     text-align: center;
  7. }
  8.  
  9. #home, #home:visited
  10. {
  11.     background-image: url(menu/menu1.png);
  12.     height: 43px;
  13.     width: 140px;
  14.     float: left;
  15.     margin-right: 12px;
  16.     margin-top: 2px;
  17. }
  18.  
  19. #home:hover, #home:active
  20. {
  21. background-image: url(menu/menu1a.png);
  22. }

12 antwoorden

Gesponsorde links
Offline voltrex - 17/04/2010 20:02 (laatste wijziging 17/04/2010 20:04)
Avatar van voltrex Lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #menu {
  2.     width: 900px;
  3.     height: 53px;
  4.     margin-top: 60px;
  5.     background: #FFFFFF;
  6.     text-align: center;
  7. }
  8.  
  9. #menu #home a, #menu #home a:visited
  10. {
  11.     background-image: url(menu/menu1.png);
  12.     height: 43px;
  13.     width: 140px;
  14.     float: left;
  15.     margin-right: 12px;
  16.     margin-top: 2px;
  17. }
  18.  
  19. #menu #home a:hover, #menu #home a:active
  20. {
  21. background-image: url(menu/menu1a.png);
  22. }

Probeer dit eens.

EDIT:
Het komt omdat de browser deze hover afbeeldingen waarschijnlijk nog moet inladen. Ja dat kan soms lang duren. ;)
Je kan proberen deze dmv JavaScript al in te laden bij het laden van de pagina.
Offline san - 17/04/2010 21:18
Avatar van san HTML interesse met bovenstaande code komt zelfs afbeelding 1 al niet tevoorschijn 
Offline Raze - 18/04/2010 13:38
Avatar van Raze PHP beginner probeer eens met onmouseover() en onmouseout() in javascript.
Offline larssy1 - 19/04/2010 08:44
Avatar van larssy1 MySQL beginner JS functie:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function roll_over(img_name, img_src)
  2.    {
  3.    document[img_name].src = img_src;
  4.    }


HTML
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
  2. onmouseout="roll_over('but1', 'icon1.gif')">
  3. <IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
  4. NAME="but1" BORDER="0">
  5. </A>

----------------------
Kon zo gauw mijn eigen code niet vinden, dus heb even gegoogled =)
Offline lemoinet - 19/04/2010 11:08
Avatar van lemoinet PHP gevorderde @larssy1: ik krijg koude rillingen van zulke bagger code.

het probleem is door toepassing van javascript niet opgelost.

je kan gebruik maken van sprites. Afbeelding menu1.png bestaat dan uit de oude afbeelding menu1.png met daaronder menu1a.png (140px op 86px)

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #home, #home:visited
  2. {
  3.     background-image: url(menu/menu1.png);
  4.     height: 43px;
  5.     width: 140px;
  6.     float: left;
  7.     margin-right: 12px;
  8.     margin-top: 2px;
  9. }
  10.  
  11. #home:hover, #home:active
  12. {
  13. background-position: 0 -43px;
  14. }


afbeelding wordt eerst volledig opgehaald en de vertraging bij :hover is dan verdwenen.
De bestandsgrootte van de nieuwe afbeelding is ook nog een kleiner dan die van de twee
afbeeldingen afzonderlijk.
Bedankt door: san
Offline larssy1 - 19/04/2010 11:09
Avatar van larssy1 MySQL beginner @lemoinet
ik heb de code niet gemaakt.. enkel van google gehaald =) zoals ik al heb gezegt..
spreek dus niet mij erop aan lol..

Geef enkel een voorbeeld..
Offline san - 19/04/2010 12:35
Avatar van san HTML interesse @lemoinet
Ja dat is een idee. Snap het principe denk ik. Heb het alleen iets anders gedaan want met die 140 x 86 werkte niet goed. Heb het nu zo dat eerst beide afbeeldingen inladen(denk ik) maar alleen menu1.png zichtbaar is en dan bij hover alleen 1a zichtbaar wordt maar dit lijkt ook wel nog niet goed te werken.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #home, #home:visited
  2. {   background-image: url(menu/menu1a.png);
  3.     background-image: url(menu/menu1.png);
  4.     height: 43px;
  5.     width: 140px;
  6.     float: left;
  7.     margin-right: 12px;
  8.     margin-top: 2px;
  9. }
  10.  
  11. #home:hover, #home:active
  12. {
  13. background-image: url(menu/menu1a.png);
  14. }
Offline lemoinet - 19/04/2010 14:49
Avatar van lemoinet PHP gevorderde heb je misschien een online voorbeeld van je menu
Offline san - 19/04/2010 14:56 (laatste wijziging 19/04/2010 14:57)
Avatar van san HTML interesse online voorbeeld
Offline WouterJ - 19/04/2010 22:39 (laatste wijziging 19/04/2010 22:39)
Avatar van WouterJ HTML gevorderde Je kan hem wel iets sneller maken door margin-top en margin-right samen te voegen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. margin: 2px 12px 0 0;

Dat doe je met deze code:
margin: top right bottom left;

Maar ik weet niet of het hier aan ligt.
Offline san - 20/04/2010 01:02 (laatste wijziging 20/04/2010 01:18)
Avatar van san HTML interesse Heb de code veranderd en hiermee is het uiteindelijk gelukt. Heel erg bedankt voor de hulp.
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #home, #home:visited
  2. {
  3.     background-image: url(menu/menu1.png);
  4.     height: 43px;
  5.     width: 140px;
  6.     float: left;
  7.     margin: 2px 12px 0 0;
  8. }
  9.  
  10. #home:hover, #home:active
  11. {
  12. background-position: 0 -43px;
  13. }

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a id="home" href="index.html"></a>
Offline Slives - 27/04/2010 22:48
Avatar van Slives Nieuw lid Het heeft inderdaad met de afbeeldingsgrootte te maken, om dit te voorkomen ga je anders te werk:
Je maakt een nieuwe afbeelding "MENU.png" bestaand uit all uw afbeeldingsversies, ik ga ervan uit dat je afbeelding 43px hoog is, dus je verzamelt alle afbeeldingen in één afbeelding, van boven je gewone knop-background, juist eronder je hover-afbeelding daarna de visited gedeelte en je nieuwe afbeelding wordt dan 129px hoog. In je css-bestand verander je gewoon de x-coördinaat, je zegt bij link de background-image is 0px 0px, maar bij de hover bv wordt de background-position 0px -43px om het hover-gedeelte van de afbeelding te tonen, op die manier heb je maar één afbeelding nodig en dit zal het veranderen van de background-image versnellen en is je probleem opgelost:


css code - Bekijk de code zonder highlighting - Klap code in 
  1. #home:link{
  2.    background-image: url(menu/MENU.png) 0px 0px;
  3.    width: 140px;
  4.    height: 43px;
  5. }
  6. #home:hover{
  7.    background-position: 0 -43px;
  8. }
  9. #home:visited{
  10.    background-position: 0 -86px;
  11. }

Dit is ook wat san probeerde te zeggen, ik heb het gewoon wat meer uitgebreid en duidelijker gemaakt  

Greetz Slives
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.339s