oe kan ik een mouse over effect maken van mij afbeelding, en deze goed positioneren ?

[djeric]

hee bron.

bedankt voor je reacties hoor.

maar dit is totaal iets anders dan wat ik bedoel.

je maakt de plaatjes transparant en aan 1 kant met letters erin.
als ik jou 2 plaatjes vervang met mijn .png plaatje met exact de zelfde naam dan gaat het compleet mis.
ik zie dan wel button1.png maar geen button2.png hoewel button2.png in de css weer staat. (wat een verwarring)
kijk ik bedoel:

ik heb 2 plaatjes. dus button1.png & button2.png
en wil dus 10x button1.png aan de linkerkant hebben. en 10x button1.png aan de rechterkant hebben. beiden dus horizontaal en verticaal gecentreerd aan de rand van je scherm. (lijkt mij met padding)
dan wil ik van van ieder plaatje dat je ziet een mouse over maken naar button2.png en geen transparante mouse over zoals nu is.
en tevens een link naar een ander webpagina.


kortom: het word een menu met 20 druk knoppen. die veranderd in een ander plaatje bij een mouse over, en je doorklikt, linkt naar een ander webpagina.

 

[bron]

Hi, ik heb 2 verschillende voorbeelden gegeven (links is een ander voorbeeld als rechts).

je maakt de plaatjes transparant en aan 1 kant met letters erin

Transparant zodat je de planken ziet, en echte letters zodat je beter in Google wordt gevonden.

Zet even button-gewoon.png (knop zonder mouse-over) en button-mouse-over.png (knop voor mouse-over) als bijlage in deze post. Ik adviseer echte tekst te gebruiken om 2 redenen: je kunt achteraf snel menutekst aanpassen, en Google vindt je veel vriendelijker. De keuze is aan jouw.
Als ik de png's heb kan ik de css wat aanpassen. Laat even weten of je wel of geen echte tekst op de knop wilt.

 

[djeric]

Hi, ik heb 2 verschillende voorbeelden gegeven (links is een ander voorbeeld als rechts).

De keuze is aan jouw.
Als ik de png's heb kan ik de css wat aanpassen. Laat even weten of je wel of geen echte tekst op de knop wilt.

en dan button1.png 20x op de pagina plaatsen. (10 links, 10 rechts)
en met button2.png de mouse over maken. (niet transparant)

De echte tekst kan en mag wel...... maar snap zelf niet hoe het dan gaat worden.
ik wil een mooie menu hebben. dus zocht eerst dit plaat. en heb er toen letters ingezet. (een naam naar een pagina - in dit geval home)
die letters moeten beetje sierlijk zijn. liefst in richting houterige vorm. het gaat om een apres skihut informatie website.
maar met transparant vervaagd de mouse over, en zie je het menu niet duidelijk meer bij mouse over.

voorbeeld:

1=ik ga bv naar: www.mijnwebsite.nl
2= ik zie deze menu knoppen:
3= ik ga met de muis naar een van deze knoppen, en zie dan deze knop:
4= als ik hierop klik opent dus de link naar bv www.mijnwebsite.nl/home

 

[bron]

Als ik je goed heb begrepen is dit het.
Wijzig alle drukknop regels in de html:

<li><a href="http://www.telegraaf.nl" title="Krantje"></a></li>

In de css alles na #menuwrapper{} weghalen en dit ervoor in de plaats:

.menu {
  width: 113px; /* elk menu even breed als drukknop */
}
.menu li {
  margin: 10px 0; /* ruimte boven/onder knop is 2x10px */
  background: transparent; /* zodat je de planken ziet */
}
.menu a {
  width: 113px; /* breedte png */
  height: 47px; /* hoogte png */
  background: url(button1.png) no-repeat top left;
}
.menu a:hover {
  background: url(button2.png) no-repeat top left;
}

 

[djeric]

Als ik je goed heb begrepen is dit het.

ja perfect:thumb::thumb::thumb:

ik vind dit zelf weer duidelijker bij een mouse over, dan een transparante effect.
hoewel ik me bewust ben met jou ideeën het vast beter kan zijn, maar snap het zelf niet helemaal.

misschien als ik het complete voorbeeld nog eens terug kijk... maar vooralsnog ben ik wel goed geholpen. tnx.:thumb:

 

[bron]

Hoi, de andere optie is maar een klein beetje extra css maar dan wel Google vriendelijker.
button1a Bekijk bijlage 202559 button2a Bekijk bijlage 202561

<li><a href="http://www.telegraaf.nl" title="Home">Home</a></li>
<li><a href="http://www.telegraaf.nl" title="Info">Info</a></li>

.menu a {
  width: 113px; /* breedte png */
  height: 37px; /* padding-top + height = hoogte png (47px) */
  padding-top: 10px;  /* padding-top + height = hoogte png (47px) */
  background: url(button1a.png) no-repeat top left;
  font: normal 16px impact,georgia,verdana,sans-serif;
  text-align: center;
  color: #5f5f5f;
}
.menu a:hover {
  background: url(button2a.png) no-repeat top left;
}

 

[djeric]

Hoi, de andere optie is maar een klein beetje extra css maar dan wel Google vriendelijker.

ik ben toch maar met jou versie bezig

het lijkt dan ingewikkelder, maar ik geraak er wel uit.
het is misschien volgens jou google vriendelijker, en dat is wat ik wel nodig zou moeten hebben voor een goede website.

ik ben zo nu en dan er mee bezig, en zal hem daarna uploaden en een site check doen.

tevens enorm bedankt bron!:thumb:

edit:

zit alleen mee dat ik op geen enkele wijze die buttons kan wijigen in mij eigen afbeeldingen.
want de kleuren zijn niet precies goed. daarom wou ik 2 nieuwe afbeeldingen plaatsen, maar dan komt de tekst er weer niet goed in. die komt er dan verkeerd op te staan.

dus nog ff uitvissen.......

 

[bron]

De tekst kom je vast wel uit
Iets over de buttons: ik gebruik het gratis Paint.Net om plaatjes aan te passen. Hierin kun je een plaatje opslaan als 32bit transparant png zodat het op elke browser goed wordt getoond.