plaatje van mouse over button laten staan na aanklikken

Status
Niet open voor verdere reacties.
M

merlijn16

Gebruiker
Lid geworden
2 mrt 2010
Berichten
132
Hoi, weet iemand of het ook mogelijk is om na aanklikken van een button het mouse over plaatje te laten staan bij die pagina die aangeklikt is?
Hier een link naar testsite http://www.thermografie-centrum.nl/test-site/testpagina.html

Dit is de css
Code: 
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 975px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
#navlist a {
	padding: 3px 10px;	
	height: 20px;
	width: 93px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 116px;}
#n3{left: 232px;}
#n4{left: 348px;}
#n5{left: 464px;}
#n6{left: 580px;}
#n7{left: 696px;}
#n8{left: 812px;}

en dit de XHTML
HTML: 
<ul id="navlist">
      <li><a id="n1" href="testpagina.html">home</a></li>
      <li><a id="n2" href="test.html">button2</a></li>
      <li><a id="n3" href="test.html">button3</a></li>
      <li><a id="n4" href="test.html">button4</a></li>
      <li><a id="n5" href="test.html">button5</a></li>
      <li><a id="n6" href="test.html">button6</a></li>
      <li><a id="n7" href="test.html">button7</a></li>
      <li><a id="n8" href="test.html">button8</a></li>      
    </ul>
 
De eenvoudigste oplossing hiervoor is om het plaatje dat je wil laten staan in het menu te zetten op de pagina waar je naartoe linkt. Elke pagina heeft dan 1 afwijkende button, van de pagina waar je bent.
 
bedankt voor je reactie. Ik had hiertoe een poging gedaan, echter dan krijg ik dat het knopje ertussenin komt en tekst opschuift.
Ik weet niet hoe ik dit in de code als achtergrondplaatje in het menu moet zetten.
Heb het online gezet op: http://www.thermografie-centrum.nl/test-site/test.html Als je op Home klikt zie je wat ik bedoel.
 
Laatst bewerkt:
Je kan de button die een achtergrondplaatje krijgt een ID meegeven:

<li id="active"><a href="test.html">button4</a></li>


In je stylesheet geef je het achtergrondplaatje op (en de positie). Bijvoorbeeld zo:

#active
{
padding-left: 10px;
background-image: url(plaatje.gif);
background-repeat: no-repeat;
background-position: 0.5em;
}
 
bedankt voor je hulp, heb een poging gedaan, echter er gebeurt niets.
Heb dit in de stylesheet gezet.
Code: 
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 975px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
#navlist a {
	padding: 3px 10px;	
	height: 20px;
	width: 93px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 116px;}
#n3{left: 232px;}
#n4{left: 348px;}
#n5{left: 464px;}
#n6{left: 580px;}
#n7{left: 696px;}
#n8{left: 812px;}
#active
{
padding-left: 10px;
background-image: url(images/buttonover.gif);
background-repeat: no-repeat;
background-position: 0.5em;
}

en dit in de pagina bij knopje home
HTML: 
<li><a id="n1" "active" href="index.html">home</a></li>
<li><a id="n2" href="test.html">button2</a></li>

en dit in de pagina bij button 2
HTML: 
<li><a id="n1" href="index.html">home</a></li>
<li><a id="n2" id="active" href="test.html">button2</a></li>

bij deze laatste heb ik 2x id= gezet.
Beide werkt niet, zowel knopje home of button 2 krijgt geen achtergrondplaatje na aanklikken.
Heb het online gezet. Zodat je het kunt zien. Hoop dat je weet waar het probleem zit.
 
Je kan maar 1 ID meegeven aan een tag, dus "active" of "n1" maar niet allebei.
Verder moet je het achtergrondplaatje aan de <li> meegeven, en niet aan de link <a>

Als je weinig ervaring hebt met CSS kun je in een testdocument je CSS het beste stukje voor stukje gaan toevoegen. Steeds als iets werkt voeg je het volgende toe, zodat je precies ziet waar het misgaat.

Succes!
 
bedankt voor je uitleg.

Als ik iets nieuws wil toevoegen aan website waarvan ik niet weet hoe dit in de codes moet staan werk ik met deze "testwebsite" tot het werkt. Minder risico dat er wat fout gaat in de oorspronkelijke website.

was ik al bang voor dat 1 id maar mogelijk was.
id "n1" kan ik niet weghalen, dat geeft de plaats van het knopje aan.
Weet je misschien andere mogelijkheid?
 
In plaats van elke knop een positie te geven kun je alle #navlist li een breedte geven (width) van - bijvoorbeeld - 200px.
De buttontekst zet je in het midden.
 
Wederom bedankt voor je hulp.
Voor ik alles ga aanpassen..... zou ik ook class="active" kunnen doen ipv id="active" ?
Zodat er id="n2" class="active" komt te staan.
 
Als ik dit onderstaande uitvoer dan is mijn lay out weg.
Verder moet je het achtergrondplaatje aan de <li> meegeven, en niet aan de link <a>
 
Als ik het goed heb begrepen zou het op deze plek moeten staan. Dan is lay-out weg. Zal het online zetten.
Code: 
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 975px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
#active {
        padding-left: 10px;
        background-image: url(images/buttonover.gif);
        background-repeat: no-repeat;
        background-position: 0.5em;
}
#navlist a {
	padding: 3px 10px;	
	height: 20px;
	width: 93px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #ffffff;
	text-decoration: none;
        font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 116px;}
#n3{left: 232px;}
#n4{left: 348px;}
#n5{left: 464px;}
#n6{left: 580px;}
#n7{left: 696px;}
#n8{left: 812px;}
 
Het is gebruikelijk om het zo te doen:

navlist - daarin zet je het menu op de goede plek
li - daarin maak je de layout van de knoppen (width, height, background, padding etc) N.B. zet display op "block" ipv "inline"!
active - de afwijkende layout van de actieve menu-knop
a - alleen de opmaak van de tekstlink (font-family, font-size, text-decoration etc)

En jawel, je kan ook "class" gebruiken ipv ID.
 
maar mijn hele lay out is weg, nadat ik dit onderstaand stukje code erin heb gezet bij #navlist li{

#active {
padding-left: 10px;
background-image: url(images/buttonover.gif);
background-repeat: no-repeat;
background-position: 0.5em;
}

zie http://www.thermografie-centrum.nl/test-site/index.html



zet ik inline op block dan gaan de linken onder elkaar staan
 
Laatst bewerkt:
Er mist een haakje achter het blok #navlist li

Als je er niet uitkomt kun je op de plaats van de linktekst natuurlijk ook een plaatje zetten (met de buttontekst in het plaatje). Dan hoef je de buttons niet te layouten met CSS.
 
Thanks ik heb de lay out terug. Heb steeds over dat haakje heen gekeken bij het controleren :(

Is dit toegestaan? id en class?

<li><a id="n1" class="active" href="index.html">home</a></li>
 
het werkt nu wel (tenminste in IE 8, rest nog niet getest). Heb het online gezet zodat je het kunt zien. (Alleen home en button 2 heeft code voor het plaatje)

heb deze code nu in css staan;
Code: 
#navlist li{
	display: inline;
	list-style-type: none;
}
.active {
        padding-left: 10px;
        background-image: url(images/buttonover.gif);
        background-repeat: no-repeat;
        background-position: 0.15em;
}
kun je me dat 0.15em uitleggen wat dit doet?


Heb dit in pagina
HTML: 
<li><a id="n1" class="active" href="index.html">home</a></li>

Heb ik op deze manier de codes goed staan?
 
De basis is er! Nu kun je het zelf verder uitbouwen.
Het is niet gebruikelijk om een ID en een class in één tag te plaatsen.

Om verder te komen kun je het beste een CSS tutorial doornemen, zoals w3schools of een boek aanschaffen. Dat is ook handig als je tag wil opzoeken.

Succes!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan