HTML-menu

Status
Niet open voor verdere reacties.
M

Max306542

Gebruiker
Lid geworden
18 jul 2012
Berichten
33
Hallo,

Ik ben bezig met mijn website, en wil een speciaal menu maken d.m.v. HTML.

Het menu moet als volgt werken:

- Werk
- Extra
- Privé
- Contact

Als ik met mijn muis over de optie "Werk" ga, verandert een plaatje aan de rechter (of linker) kant van de pagina in een ander plaatje. Dat andere plaatje verandert wéér in een ander plaatje als ik over "Extra" ga met de muis, etc.

Ik kon hier helaas niks in HTML over vinden. Wel kon ik een "onmouseover"-code gevonden, maar die doet net niet wat ik wil..

Heeft iemand een HTML-Code voor dit menu? Ik maak de website in Wordpress.

Alvast vriendelijk bedankt.

Groeten,
Max
 
Dat kun je niet met Html alleen regelen.

Daarvoor heb je JavaScript nodig of je kunt het met CSS doen.

Als je bij elke muiswissel een 'random' image wilt laten zien, zit je aan JavaScript vast;
Als het niet erg is om bij elke menu-optie steeds eenzelfde bijbehorende plaatje te zien dan kan het met CSS. Dan heb je per optie een image voor de 'standaard' of 'vaste' toestand en een voor de 'hover' toestand. Desnoods nog een derde plaatje voor de 'visited' toestand.
 
Bedankt voor je reactie;

Voor zover zou javascript ook in een pagina-editor geplakt kunnen worden, toch?

Ik ben niet bekend in de Javascript-wereld.. Weet je toevallig de naam van de code die ik dan moet invoeren?
 
Sorry,
Ik werk zelf ook niet met JavaScript maar ik weet toevallig wel de verschillen in functionaliteit.
 
mischien helpt dit

</FONT></b></td><td width=4></td><td>
<a title='Click Me!' class=body_con href=http://index.html>
My Journal</a>


veel suc6 verder
 
Oké.. Wat jamano plaatste was een kliklink, maar ik bedoel echt een mouse-over interactie op de zelfde pagina. Ga je met je muis over een foto, dan verschijnt er rechts op de pagina ook een foto.
 
Heb je al geprobeerd een Wordpress plugin te vinden die zoiets doet? Dat zou een stuk handiger zijn dan zelf een stuk HTML/CSS in elkaar draaien om dat vervolgens op je site te zetten. Wat je wilt kan trouwens wel degelijk met alleen wat CSS en HTML, ik zou alleen niet weten hoe je dat vervolgens netjes met Wordpress zou kunnen integreren. (dat antwoord van jamano sloeg overigens nergens op, kun je beter negeren)
olaf88 zei:
javascript, php, css
Klik om te vergroten...
Groen, blauw rood?
 
Bedankt voor je reactie! Helaas ben ik met de plugins slechter dan met codes.. Ik heb liever een HTML-code waarin ik alles kan maken.
Ik zat te denken om deze code:
Code: 
<a><img title="Test1" onmouseover="this.src='Plaatje1'" onmouseout="Plaatje2'" src="Plaatje1" alt="" width="300" height="224" /></a>

te bewerken.. Moet te doen zijn, maar ik weet dus niet wat ik eraan moet veranderen.. Het kleinste foutje zorgt al dat de hele code onbruikbaar is..
 
Nah, nergens voor nodig om javascript te gebruiken. Ik ken je site natuurlijk niet dus het is wat lastig om een volledig antwoord te geven maar ik heb even een demo voor je in elkaar gedraaid die laat zien hoe je dit kunt bereiken met alleen wat CSS en HTML (http://jsfiddle.net/t8b7H/1/). Op de meeste websites wordt het menu in een lijst (<ul>) geplaatst, google en consorten verwachten dit ook dus als jij je menu in een lijst plaatst is er een grotere kans dat google je site 'snapt'. Binnen de <ul> staat, zoals je ziet, voor iedere knop in je menu een <li> (List Item), daarbinnen staat dan weer de link waar je heen wilt, en een <img> tag met een afbeelding.

Met de CSS, rechtsboven in het demoscherm, wordt die afbeelding aanvankelijk verborgen met display:none;, pas als iemand met de muis op een <li> gaat staan dan wordt de afbeelding die er in staat getoond, op de aangegeven plek.
 
Ja, dat is precies wat ik zoek! (de afbeeldingen moeten dan wel op de zelfde plaats blijven, dus allemaal op 1 en de zelfde plaats verschijnen).

Maar Wordpress geeft een statische afbeelding weer, ook als ik niet met de muis over "werk" ga.

Code: 
<ul class="menu">
            <li><a href="werk">Werk</a><img src="http://www.*knip*.nl/Bootverhuur/images/Graphics/WerkInUitv250Tr.gif" alt=""></li>
            <li><a href="extra">Extra</a><img src="" alt=""></li>
            <li><a href="prive">Prive</a><img src="" alt=""></li>
            <li><a href="contact">Contact</a><img src="" alt=""></li>
       </ul>​
 
Laatst bewerkt door een moderator:
Als ik die er onder zet gebeurt er niks nieuws..
Waar moet ik die zetten?
 
Zou ik je niet kunnen zeggen. Normaal hoort CSS code in je <head> tussen <style></style> tags, of in een extern CSS bestand,maar waar je het in het geval van Wordpress precies zou moeten zetten weet ik niet. Je kunt proberen om dit in je code te zetten. Maar ik kan niet garanderen dat dat niet door een of andre filter wordt weggehaald.
Code: 
.menu li{
    list-style:none;/*Haalt de punten uit de lijst*/
}

.menu li>img{
    display:none;/*verbergt de afbeelding*/
}

.menu li:hover>img{/*deze code gaat dus over afbeeldingen in <li> waar de muis op staat*/
    display:block;/*laat de afbeelding weer zien*/
    position:absolute;/*zorgt dat de afbeelding boven alle andere elementen komt te staan en ze niet opzij drukt*/
    right:0;/*zet de afbeelding rechts*/
}
 
Ik heb alles geprobeerd, maar wordpress werkt (als je de thema's handmatig wilt bewerken) met PHP. Dus waar die CSS-code moet weet ik niet. Is er geen mogelijkheid om die CSS-code om te zetten naar HTML?
Want wat op deze website staat is het basisprinciepe: http://www.estherwerkt.nl/ Die site kwam ik tegen toen ik naar het effect zocht. De kleine plaatjes worden aan de rechter kant groot als je er met je muis over gaat.. Dat wil ik in een menu verwerken.
 
Mijn fout, ik heb je incomplete code gegeven :o
Dit had het moeten zijn. Als je die code vlak boven de HTML code van het menu zet zou het kunnen werken. Het is denk ik wel handig om de class "menu" (en de bijbehorende CSS) in iets anders te veranderen om conflicten met Wordpress te voorkomen.
HTML: 
<style>
.menu li{
    list-style:none;/*Haalt de punten uit de lijst*/
}

.menu li>img{
    display:none;/*verbergt de afbeelding*/
}

.menu li:hover>img{/*deze code gaat dus over afbeeldingen in <li> waar de muis op staat*/
    display:block;/*laat de afbeelding weer zien*/
    position:absolute;/*zorgt dat de afbeelding boven alle andere elementen komt te staan en ze niet opzij drukt*/
    right:0;/*zet de afbeelding rechts*/
}
</style>
 
Ik test hem hier even:

<style>
.menu li{
list-style:none;/*Haalt de punten uit de lijst*/
}

.menu li>img{
display:none;/*verbergt de afbeelding*/
}

.menu li:hover>img{/*deze code gaat dus over afbeeldingen in <li> waar de muis op staat*/
display:block;/*laat de afbeelding weer zien*/
position:absolute;/*zorgt dat de afbeelding boven alle andere elementen komt te staan en ze niet opzij drukt*/
right:0;/*zet de afbeelding rechts*/
}
</style>

Deze code heb ik neergezet, maar werkt helaas nog niet. Er verschijnt helemaal niks..

Code: 
<style>
.lijst li{
    list-style:none;
}
 
.lijst li>img{
    display:none;
}
 
.lijst li:hover>img{
    display:block;
    position:absolute;
    right:0;
}
</style>
<ul class="lijst"> 
            <li><a href="werk">Werk</a><img src="http://www.*knip*.nl/Bootverhuur/images/Graphics/WerkInUitv250Tr.gif" alt=""></li>
            <li><a href="extra">Extra</a><img src="" alt=""></li>
            <li><a href="prive">Prive</a><img src="" alt=""></li>
            <li><a href="contact">Contact</a><img src="" alt=""></li>
       </ul>
 
Laatst bewerkt door een moderator:
Bah, daar was ik al bang voor, dan moet het toch maar met wat inline javascript en inline CSS (dat is javascript/CSS die in de HTML tags zelf staat, in plaats van in een apart bestand). Allereerst moet de lijst dan een beetje anders worden aangepakt.
HTML: 
<ul style="list-style:none; position:relative;">
    <li>
        link en plaatje komen hier
    </Li>
</ul>
Het gedeelte na style= zorgt er voor dat er geen bullets voor de tekst komen en dat straks alle afbeeldingen op dezelfde positie ten opzichte van de lijst komen te staan
Dan de link, die komt er als volgt uit te zien
HTML: 
<a onmouseover="firstChild.style.display='block'"  onmouseout="firstChild.style.display='none'" href="home">
    <img src="plaatje.jpg" alt="Beschrijving" style="position:absolute; left:100px; top:0; display:none;"/>
    Home
</a>
* onmouseover="firstChild.style.display='block'" Zorgt er voor dat afbeelding wordt weergegeven wanneer de muis over de link gaat (De afbeelding is het eerste element binnen de <a> firstChild dus.

* onmouseout="firstChild.style.display='none'" En verbergt hem weer zodra de muis weg is

* href="home" is gewoon het adres waar de link heen moet

* style="position:absolute; left:100px; top:0; display:none;" Dit stukje inline CSS zorgt er voor dat de afbeelding normaal niet getoond wordt, de left en top waardes geven de positie van de afbeelding aan, die moet je dus zelf even naar smaak aanpassen.

NB: Als je een CMS gebruikt is het veel handiger om een menu te hebben dat je ook met dat CMS gemaakt hebt, zodat het netjes geïntegreerd wordt, met bovenstaande methode komt het er in feite als gewone tekst in te staan. Dat kan wel, maar praktisch is anders.

PS: Het kan best zijn dat de beveiliging van Wordpress bovenstaande ook wegfiltert.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan