Image popup
Ik ben opzoek naar het volgende;
Ik heb een groepsfoto, nu wil ik als je met je muis op iemand gaat staan je een hover popupje krijgt met een foto en wat informatie.
Als je op deze site kijkt (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/) en je gaat met je muis over die foto krijg je de foto groter te zien.
Ik wil dus als je met mijn muis over een Groepsfoto ga, ik informatie krijg over een persoon.
Wie kan mij hier mee de goede richting in helpen.
Mark
http://jsbin.com/udoyoz/1/edit
Je kan ook nog met een imagemap, zo heet dat volgens mij, en area elementen gaan werken. Dat is veel preciezer, maar kost veel meer tijd.
Zo zou ik het doen: Je kan ook nog met een imagemap, zo heet dat volgens mij, en area elementen gaan werken. Dat is veel preciezer, maar kost veel meer tijd.
Wouter J op 24/09/2012 14:15:21:
Je kan ook nog met een imagemap, zo heet dat volgens mij ...
O ja, die was ik even vergeten.
Hier een voorbeeld.
http://www.w3schools.com/tags/tag_area.asp
----
Dit was ik aan het schrijven ...
Moet lukken, ja.
Er komt wel wat bij kijken ...
- In een db sla je gegevens op over de locatie van de persoon op de foto.
Een koppeltabel groepsfoto_personen of zo.
Daarin zet je (naast de referentie naar de foto en naar de persoon), uitgedrukt in pixel: top, right, bottom, left => die overeen komen met de locatie van het hoofd (je moet die velden wel anders noemen; er zitten gereserveerde woorden tussen).
- Je zet in javascript een array met alle rechthoeken waar hoofden staan. Telkens, bij elk rechthoek moet ook de id van de persoon staan.
- Dan is het kwestie van het detecteren van de muis-positie over een element. Je vergelijkt die met die array; leest de id.
- Met die id doe je een Ajax request, die de gegevens van die persoon ophaalt.
Eventueel kan je die gegevens ook al naar de gebruiker sturen bij het verzoek van de pagina. Je steekt die bv. in div's met display: none
Dan heb je geen verbinding met de server meer nodig.
- en dan nog wat prutsen met css om die popup goed te positioneren