Hoe maak je een icoon huisje en een icoon vergrootglas?

[jorenman]

Op http://www.moodle.org heb je aan het begin een huisje (wat staat voor home) en aan het einde een vergrootglas (dat het zoek icoon is), maar ik heb overal zitten zoeken, maar ik weet maar niet hoe je dit in je navigation menu moet doen en ook niet met welke programmeertaal je dit moet doen...
Weet iemand hoe je zo'n huisje en vergrootglas maakt in je navigation menu?

 

[quintoo]

Geen idee hoe jou menustructuur in elkaar zit.
Maar dit is een manier op de home knop te fixen.
tip: iconarchive.com

<!-- Home button -->
<a href="/"><img src="/path/to/house/icon" width="32" height="32" /></a>

De search knop gaat natuurlijk ook zo alleen dan een andere image + andere href.
Om een search functionaliteit in te bouwen in je website kan je het beste gebruik maken van PHP.

Hoop dat je zo stapje verder komt

 

[Tha Devil]

Verplaatst van Javascript naar CSS.

Verder zou ik het op prijs stellen dat je eerst antwoord geeft op reacties in andere vragen die je stelt voor je weer nieuwe vragen plaatst.

De afgelopen dagen heb je aardig wat "verschillende" vragen gesteld maar allemaal gaan ze over het maken van een navigatie-menu.

 

[jorenman]

Ja ik heb het gezien, en het werkt gelukkig ook.
Maar is er ook een manier waarbij je geen afbeelding gebruikt?

 

[quintoo]

Hoe ben je ooit van plan zonder afbeelding aan een huisje te komen?
Als je de <img tag niet wilt zou je altijd nog een css classe kunnen maken
Dit doe je met behulp van "background-image".

.home-icon{
   background:url("img/to/path") no-repeat;
   width:16px;
   height:16px;
   display:block;
}

Iets in die trant (zelf niet getest), succes!

 

[jorenman]

Oke, dus het huisje is gewoon een kleine afbeelding.
Maar op http://biedmeerwebwinkels.nl/webwinkel-pakketten.html zorgen ze ervoor dat als je over het huisje 'hovert' dat het huisje dan donkerder wordt, hoe doen ze dat dan?

 

[quintoo]

Ze maken daar gebruik van 2 afbeeldingen, 1 die bv kleur wit is en 1 die zwart is :: house-zwart.png & house-wit.png
1) het huisje die er altijd is
2) het huisje die er moet komen als je eroverheen hovert

.home-icon{
   background:url("img/to/house-wit.png") no-repeat;
   width:16px;
   height:16px;
   display:block;
}
/* Als je er nu overheen hovert pakt die de zwarte afbeelding */
.home-icon:hover{
    background:url("img/to/house-zwart.png") no-repeat;
}

succes

 

[jorenman]

Weet iemand ook hoe je zo'n pijltje maakt als bij dit navmenu op deze site?
http://atoms.artillegence.com/kinetic/

 

[Tha Devil]

In de bron van die pagina vind je het antwoord. Even element inspecteren en je ziet precies hoe het gedaan wordt.