login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Multi hover effect

Offline kleintje1977 - 07/01/2015 15:09 (laatste wijziging 07/01/2015 15:22)
Avatar van kleintje1977Nieuw lid Hoe zorg je voor een "multi-hover" effect? Je hebt dus een vaste afbeelding, en aan de plaats waar de cursor komt verschijnt een andere afbeelding op de plaats vann de originele afbeelding, dus popup-hover aan de cursor.

Dit is waar ik het voor wil gebruiken: klik hier
- Je ziet een ring met sterren
- de sterren moeten oplichten als je er met je cursor over gaat.
- klik je met de cursor, dan moet hij naar beneden scrollen met meer uitleg over die ster.

Ik probeerde dus dit: (klik hier). Maar de linkerbovenhoek van de popup-afbeelding verschijnt aan de cursor, terwijl ie net op dezelfde plaats als de originele afbeelding moet verschijnen.

Eerst had ik dit werkend voorbeeld (klik hier)- (beweeg over de zangeres) maar de opdrachtgever wilt nu dus dat met die sterren. Je kunt het script makkelijk terugvinden in de broncode.

5 antwoorden

Gesponsorde links
Offline Thomas - 07/01/2015 15:30 (laatste wijziging 07/01/2015 15:40)
Avatar van Thomas Moderator Allereerst, ben jij Gust? Waarom gebruik je een ander profiel? Wellicht was het onklaar maken van je vorige account een beetje voorbarig?

Daarnaast, je hebt het over opdrachtgever. Je bent dus bezig met een (betaald) project? Dit neigt naar samenwerken.

Ontopic: Waar je waarschijnlijk naar op zoek bent is een soort van image map, mogelijk uitgebreid met wat jQuery.
Citaat:
Je kunt het script makkelijk terugvinden in de broncode.
Oh ja, die had ik ook al voor je geschreven. En nu wil je hetzelfde weer? Heb je zelf al iets geprobeerd?

Kom op zeg...

EDIT:
Citaat:
Maar de linkerbovenhoek van de popup-afbeelding verschijnt aan de cursor, terwijl ie net op dezelfde plaats als de originele afbeelding moet verschijnen.
Hint: Bekijk elementtooltip.js eens, het stukje over custom positioning... Echt, veel makkelijker wordt het niet hoor.
Offline kleintje1977 - 07/01/2015 16:00 (laatste wijziging 07/01/2015 16:05)
Avatar van kleintje1977 Nieuw lid Ik weet niet waarom mijn vorig profiel door jullie is verwijderd, ben ook niet gebanned of zo. Dus heb ik maar een ander profiel gemaakt.

Opdrachtgever, klant, vrager,... Het is niet betaald maar weet niet welk woord ik hiervoor moest gebruiken. Het is vrijwillig omdat ik zelf lid ben.

Het script hebt jij inderdaad geschreven... waarvoor dank! Of ik al iets geprobeerd heb? Al heel wat eerlijk gezegd. Maar ik denk dat het in de javascript ligt, niet?
Offline Thomas - 07/01/2015 19:56
Avatar van Thomas Moderator
Citaat:
Ik weet niet waarom mijn vorig profiel door jullie is verwijderd, ben ook niet gebanned of zo.
Deze bestaat nog steeds bij mijn weten.
Citaat:
Dus heb ik maar een ander profiel gemaakt.
Hm, apart, volgens je profielpagina bestaat dit account al vanaf 16 september 2008.
Citaat:
Maar ik denk dat het in de javascript ligt, niet?
Zie de hint in mijn vorige bericht; var pl en var pt geven een positie-offset mee aan je muispointer. Als je die nou eens op 0 zet... Maar de vraag is of de mouseover in je nieuwe opzet aan je muispointer wilt hangen.
Offline kleintje1977 - 08/01/2015 16:51
Avatar van kleintje1977 Nieuw lid
FangorN schreef:
Maar de vraag is of de mouseover in je nieuwe opzet aan je muispointer wilt hangen.


Ja, dat bedoelde ik eigenlijk. Nee, wou dat niet laten hangen, maar wou het graag hebben zoals bij een standaar rollover waarbij op een vaste plaats de afbeelding verandert. Alleen gaat het hier om verschillende afbeeldingen.
Offline Thomas - 09/01/2015 15:04
Avatar van Thomas Moderator Er is een "eenvoudige" manier om dit te doen: je kunt aan de area-tags een onmouseover- en onmouseout-event koppelen en daarmee de bron van de imagemap aanpassen. Voordeel van deze methode is dat je de "actieve" oppervlaktes in je image-map alle mogelijke vormen kunt laten hebben. Nadeel van deze methode is dat je meerdere kopieën van je imagemap moet maken (voor elke mouseover die zou moeten resulteren in een ander uiterlijk moet je een aparte afbeelding maken van de hele imagemap).

Een alternatief is dat je, zodra je over een actief oppervlak heen beweegt, hier een div overheen plaatst met hierin een afbeelding en een hyperlink. Voordeel van deze methode is dat je enkel plaatjes hoeft te maken voor deze "hover" gebieden (hier komt mogelijk wel wat pas- en meetwerk bij kijken). Nadeel is dat hier wat meer programmeerwerk aan zit en het "actieve" oppervlak een rechthoek wordt (de div die je er overheen zet) zodra je hier overheen beweegt.

De eerste methode heeft in principe geen jQuery nodig maar kan in "native" JavaScript gemaakt worden. Bij de tweede variant kan jQuery handig zijn om te gebruiken, lijkt mij.

Probeer eens wat uit, zou ik zeggen.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s