login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Menu met links

Offline bennieboy - 19/07/2006 14:35
Avatar van bennieboyHTML beginner http://www.metallic-overpelt.be

Zoals je ziet op deze site zijn de opsommingstekens voor de links gewoon statisch. Hoe kan ik er voor zorgen dat dat blokje opgevuld wordt zonder gebruik te maken van een overroll img?

10 antwoorden

Gesponsorde links
Offline WimJ - 19/07/2006 14:52
Avatar van WimJ Grafische gevorderde zonder roll overs er van te maken van dat blokje ?
Je kan een sproberen met css, maar mij lijkt toch het makkelijkste met roll overs hoor! 

Groeten, Wim
Offline Simon - 19/07/2006 14:56
Avatar van Simon PHP expert aangezien je niet gebruik maakt van ul,ol,li e.d. maar van images, zal je wel degelijk nieuwe images moeten maken voor de rollover
Offline WimJ - 19/07/2006 16:58
Avatar van WimJ Grafische gevorderde jeps, gewoon de vierkantjes in de kleur rood ofzo of het geen dat je wenst met die vierkantjes aanmaken en een roll over genereren ervoor want anders gaat het volgens mij echt niet gaan hoor !
Offline knoopa - 19/07/2006 17:27 (laatste wijziging 19/07/2006 23:19)
Avatar van knoopa Onbekend
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2.    <li id="sidebarLeft1" onmouseover="changeUp('sidebarLeft1');" onmouseout="changeDown('sidebarLeft1');"><a href="javascript:;">Webdesign</a></li>
  3.    <li id="sidebarLeft2" onmouseover="changeUp('sidebarLeft2');" onmouseout="changeDown('sidebarLeft2');"><a href="javascript:;">Webhosting</a></li>
  4.    <li id="sidebarLeft3" onmouseover="changeUp('sidebarLeft3');" onmouseout="changeDown('sidebarLeft3');"><a href="javascript:;">Dedicated Hosting</a></li>
  5.    <li id="sidebarLeft4" onmouseover="changeUp('sidebarLeft4');" onmouseout="changeDown('sidebarLeft4');"><a href="javascript:;">Artistic</a></li>
  6.    <li id="sidebarLeft5" onmouseover="changeUp('sidebarLeft5');" onmouseout="changeDown('sidebarLeft5');"><a href="javascript:;">Very Nice</a></li>
  7.    <li id="sidebarLeft6" onmouseover="changeUp('sidebarLeft6');" onmouseout="changeDown('sidebarLeft6');"><a href="javascript:;">Lorem Ipsum</a></li>
  8.     </ul>

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. <!--
  3. function changeUp ( id ) {
  4.   document.getElementById(id).className = "listHover";
  5. }
  6. function changeDown ( id ) {
  7.   document.getElementById(id).className = "listNormal";
  8. }
  9. -->
  10. </script>

php code - Bekijk de code zonder highlighting - Klap code in 
  1. .listHover {
  2.  
  3.    list-style-image: url(hover.gif);
  4.  
  5.  }
  6.  
  7.  .listNormal {
  8.  
  9.    list-style-image: url(normaal.gif);
  10.  
  11.  }


maar dan moet je nog steeds twee afbeeldingen hebben
Offline svm - 20/07/2006 13:46
Avatar van svm PHP ver gevorderde Misschien kun je iets met radio buttons maken.
Dat het plaatje een radio button is en bij mouseover geselecteerd wordt.
Offline Grayen - 20/07/2006 14:10 (laatste wijziging 20/07/2006 14:12)
Avatar van Grayen PHP ver gevorderde ik heb het ff in css voor je gemaakt:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. ul {
  2. list-style: none;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. li a {
  7. background: url(normaal.gif) no-repeat left; /* de afbeelding normaal */
  8. padding-left: 10px; /* de breedte van de afbeelding ervoor + de ruimte die je tussen de afbeelding en de link wilt */
  9. line-height: 10px; /* de hoogte van de afbeelding ervoor */
  10. padding: 5px;
  11. width: 150px;
  12. }
  13. li a:hover {
  14. background: url(hover.gif) no-repeat left; /* de afbeelding als je erover heen gaat */
  15. }


en de html:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2. <li><a href="#">link</a></li>
  3. <li><a href="#">link</a></li>
  4. <li><a href="#">link</a></li>
  5. <li><a href="#">link</a></li>
  6. </ul>


als het goed is moet dit werken heb het niet getest, want had niet ff snel twee kleine afbeeldingen, maar zou moeten werken 
Offline knoopa - 20/07/2006 14:56
Avatar van knoopa Onbekend @grayen die van mij is wel getest
Offline nielsvdwal - 20/07/2006 15:09
Avatar van nielsvdwal PHP gevorderde @skatelife, die van jou is in javascript, en doet het dus niet altijd. Css werkt overal wel..
Offline Thomas - 20/07/2006 15:09
Avatar van Thomas Moderator het netste is om dit met CSS op te lossen, zodat de werking van je navigatie niet afhankelijk is van JavaScript.
Offline nathanael - 20/07/2006 17:13
Avatar van nathanael Gouden medaille

HTML gevorderde		 ik denk dat je dit wel heel goed kan gebruiken:

http://www.site...amp;id=212 en dan gaat het met name om display: block;
hiervan heb ik ook zeer veel geleerd
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.247s