navigatie a selectors

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jos Vermassen

Jos Vermassen

16/11/2011 11:28:56
Quote Anchor link
Hallo,

Hier is mijn website: http://www.i4-it.be
als ik nu bijvoorbeeld op de homepagina ben zou ik willen dat navigatieknop 'home' actief blijft zoals de hoverafbeelding.
Weet iemand hoe ik dit moet doen?

Alvast bedankt!

CSS
/* Navigatie */

#nav {
margin-top:33px;
margin-left:5px;
width:444px;
height:32px;
float:left;
}

.home {
width:73px;
height:32px;
float:left;
}

.about {
width:80px;
height:32px;
float:left;
}

.services {
width:94px;
height:32px;
float:left;
}

.portfolio {
width:103px;
height:32px;
float:left;
}

.contact {
width:94px;
height:32px;
float:left;
}

HTML

<div id="nav">

<div class="home">
<a href="index.html" onmouseover="document.getElementById('home').src='img/home_hover.gif'" onmouseout="document.getElementById('home').src='img/home.gif'"><img src="img/home.gif" id="home" style="border:none;"></a>
</div>

<div class="about">
<a href="html/about.html" onmouseover="document.getElementById('about').src='img/about_hover.gif'" onmouseout="document.getElementById('about').src='img/about.gif'"><img src="img/about.gif" id="about" style="border:none;"></a>
</div>

<div class="services">
<a href="html/servweb.html" onmouseover="document.getElementById('services').src='img/services_hover.gif'" onmouseout="document.getElementById('services').src='img/services.gif'"><img src="img/services.gif" id="services" style="border:none;"></a>
</div>

<div class="portfolio">
<a href="html/portfolio.html" onmouseover="document.getElementById('portfolio').src='img/portfolio_hover.gif'" onmouseout="document.getElementById('portfolio').src='img/portfolio.gif'"><img src="img/portfolio.gif" id="portfolio" style="border:none;"></a>
</div>

<div class="contact">
<a href="html/contact.html" onmouseover="document.getElementById('contact').src='img/contact_hover.gif'" onmouseout="document.getElementById('contact').src='img/contact.gif'"><img src="img/contact.gif" id="contact" style="border:none;"></a>
</div>

</div>
 
PHP hulp

PHP hulp

25/12/2024 03:34:04
 
Ricardo Verboom

Ricardo Verboom

16/11/2011 11:46:39
Quote Anchor link
Je wilt dus dat de kleur blijft zoals hij was toen je erop klikte ?
 
Jos Vermassen

Jos Vermassen

16/11/2011 11:48:05
Quote Anchor link
Ricardo Verboom op 16/11/2011 11:46:39:
Je wilt dus dat de kleur blijft zoals hij was toen je erop klikte ?


als ik dus op de homepagina ben dat de knop blauw is
 
Elwin - Fratsloos

Elwin - Fratsloos

16/11/2011 12:32:32
Quote Anchor link
Je moet het wisselen van de achtergrondafbeelding regelen met behulp van je CSS (:hover). En op de actieve pagina's kan je het relevante menu-item een class meegegeven (bijvoorbeeld class="actief") en deze class in je CSS dezelfde eigenschappen geven als de :hover.

Overigens is je opbouw van het menu zo niet erg netjes. Sowieso zijn afbeeldingen niet het beste om mee te navigeren, vanwege SEO. Ook kan je beter een menu maken op basis van een lijst. Als je dan toch perse afbeeldingen wilt gebruiken (die hier niet nodig zijn) zou ik ook hier met achtergronden werken, de standaard tekst in de div (of in mijn geval in de li) zetten en met CSS text-indent verbergen.
 
Frank C

Frank C

17/11/2011 19:50:37
Quote Anchor link
@Elwin:
Maar hoe geef je telkens een ander menu-item een class mee, als je - naar ik aanneem - het menu includeert en gebruik maakt van een extern stijlblad?
Gewijzigd op 19/11/2011 15:29:06 door Frank C
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.