login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Afbeelding in het groot laten verschijnen na mousover of hover

Offline Kickbabtje - 20/04/2011 11:34 (laatste wijziging 20/04/2011 11:35)
Avatar van KickbabtjeNieuw lid Beste,

Momenteel ben ik bezig met een website te optimaliseren. Ik heb een pagina gemaakt waarop een tabel staat met allemaal foto's. In het midden van de tabel zou ik graag de foto's in het groot laten verschijnen na on hover of mouseover op de kleine afbeeldingen in de tabel. Ik heb reeds verschillende sites afgegaan naar oplossing, maar eerlijkheidshalve lukt het mij niet goed.
Kan iemand mij aub verder helpen in css en html?
Het gaat om http://www.bruggenramen.be/realisaties.html .

Alvast bedankt!

8 antwoorden

Gesponsorde links
Offline koosax - 20/04/2011 11:47
Avatar van koosax Lid Plaats bij elke tumbnail de volgende regel:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. onmouseover="this.src='vergroting.jpg'"


Let wel op dat je THIS veranderd in de ID van het grote plaatje.
Op deze manier wijzigt de source van het grote plaatje wanneer je over een thumbnail gaat.
Offline Martijn - 21/04/2011 18:26
Avatar van Martijn Crew PHP die manier wil je liever niet, dat is heel onvriendelijk voor gebruikers. Ik weet niet of je jQuery hebt, als je dat hebt kun je eens kijken naar iets als Fancybox. Erg makkelijk en mensen zijn het al gewent Bovendien staat daar de hele uitleg over hoe je het moet maken

@koosax: this moet je juist niet veranderen, je wilt toch juist dat 'this' waar je muis op staat veranderd? Als je er een ID in zet, maak je je code alleen maar beperkt, je kunt beter proberen dit soort dingen zo algemeen mogelijk te maken zodat je het overal kan gebruiken
Offline koosax - 22/04/2011 00:53
Avatar van koosax Lid
Martijn schreef:
@koosax: this moet je juist niet veranderen, je wilt toch juist dat 'this' waar je muis op staat veranderd? Als je er een ID in zet, maak je je code alleen maar beperkt, je kunt beter proberen dit soort dingen zo algemeen mogelijk te maken zodat je het overal kan gebruiken


De THIS moet je in het geval van kickbabtje wel degelijk aanpassen aangezien je de hover-image niet op dezelfde plek wilt hebben als de thumbnail. Wanneer je dan THIS gebruikt veranderen de thumbnail en niet het plaatje wat hij wilt veranderen. Wanneer je de vergroting bijvoorbeeld het ID 'groot' meegeeft en je bij de thumbnail in plaats van THIS het ID 'groot' gebruikt veranderd elke keer alleen het grote plaatje.

Dat hij beter iets als Fancybox kan gebruiken ben ik het trouwens mee eens.
Offline Kickbabtje - 26/04/2011 19:28
Avatar van Kickbabtje Nieuw lid Bedankt beide voor de uitleg. Ik heb geen jQuery. Ik ga mij er eens op toeleggen...
Offline Flemming - 05/05/2011 23:05
Avatar van Flemming Nieuw lid Beste Kickbabtje,

hetzelfde heb ik ook gemaakt in mijn "website" die ik eens voor de lol gemaakt had.
check de broncode :[url]http:// http://www.immo...llery.html[/url]
en de css : http://www.immo-verslegers.be/flemming/gallery.css

Goodluck =)

Met Vriendelijke Groeten,
Flemming
Offline cyberninjah - 06/05/2011 15:57
Avatar van cyberninjah Lid Wat ik gemaakt heb met behulp van jquery was een onmouse over event waarneer dit gebeurde werd het plaatje in het groot getoond een paar pixels boven de plek waar mijn cursor zich bevond.
Offline ArieMedia - 06/05/2011 16:34 (laatste wijziging 06/05/2011 16:38)
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde
cyberninjah schreef:
Wat ik gemaakt heb met behulp van jquery was een onmouse over event waarneer dit gebeurde werd het plaatje in het groot getoond een paar pixels boven de plek waar mijn cursor zich bevond.
Gefeliciteerd!!

Maar je post wordt een heel stuk nuttiger als je vertelt hoe je dit hebt gedaan (misschien zelfs ondersteund met code)

 
Offline Capoe01 - 14/05/2011 10:30 (laatste wijziging 14/05/2011 10:35)
Avatar van Capoe01 Nieuw lid Ik heb dit kunnen doen zonder gebruik te maken van java maar alleen met CSS en html


Op de site http://www.olis...kenNL.html
kan je zo'n voorbeeld zien.

Onderstaande code is een stukje van de CSS
#pic a .large{
border:0px;
display:block;
height:1px;
left:-1px;
posisition:absolute;
}

#pic a.vergroot:hover .large{
z-index:1;
border: 1px solid #000000;
height:300px;
left:150px;
top:30%;
position:absolute;
width:300px;
}


Code in html:
<div id="pic"><li><a class="vergroot" href"=#">Graafmachines 13-18-23-27T <img src=
"Images/300x300_Graafmachine.jpg" class="large" /></a></li></div>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.175s