Hoe zorg je dat een hover effect alleen werkt op zichtbare afbeeldingen, inplaats van het gehele vierkante pixelgebied?

Ik heb een afbeelding, een schuine lijn, die moet van kleur veranderen bij hover.

Maar een schuine lijn wordt gezien als een vierkant vak. En wanneer men zich binnen die kaders bevindt veranderd de lijn van kleur.

Hoe zorg ik ervoor dat het hovereffect alleen plaatsvind wanneer men daadwerkelijk hovert over de lijn, inplaats van het vierkante kader wat je eromheen kan maken?

Verwijderde gebruiker

12 jaar geleden

in: Programmeren

884

884 keer bekeken

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Antwoorden (2)

Ik denk dat je twee afbeeldingen moet maken van het hele vierkante vak, eentje met een lijn in de ene kleur en eentje met de lijn in een andere kleur, en de rest het zelfde.

Daarna met javascript of CSS het hele plaatje omwisselen. Dan lijkt het of alleen de lijn verandert. HTML is niet zo slim om met vector graphics om te gaan. Je moet de boel foppen. Misschien wordt het met HTML-5 allemaal mogelijk, daar heb ik me nog niet in verdiept.

In de link wat voorbeeldcode.

(Lees meer...)

Bronnen:

http://www.webmasterworld.com/forum21/6615.htm

Verwijderde gebruiker

12 jaar geleden

Verwijderde gebruiker

12 jaar geleden

Ja, dat kan opzich wel. Das geen probleem. het probleem uit eindelijk is: Het zijn 5 plaatjes die elkaar kruisen, elk een lijn met een andere kleur. Als ik dus zorg dat het hover effect op elk plaatje zit, dan veranderen ze allemaal, omdat het hover effect gebonden is tot het kader van het plaatje. Ik wil juist dat het hover effect gebonden is tot alleen het plaatje, niet de transparante rest van het plaatje. Misschien voorbeeld:
Ik heb een rondje en wil dat alleen wanneer ik met mn muis over het rondje ga dat het effect komt, niet als ik in de hoeken zit (van het vierkant). Dit is hetzelfde met mijn lijnen, welke op elkaar staan en als je dus ove reentje gaat, ga je over ze allemaal in feite.

Verwijderde gebruiker

12 jaar geleden

Ah, ik snap 'm. Hmmm... lastig. Ik denk dat het een javascript oplossing moet worden. Zoektermen die ik kan bedenken zijn "css hover non-rectangular hotspots" of "css sprites". Kun je aan de hand van het muiscoordinaat gemakkelijk berekenen welk image je wil swappen? Sprites: http://www.alistapart.com/d/sprites/ala-blobs2.html

Hier vraagt iemand zich iets soortgelijks af: http://stackoverflow.com/questions/2689308/hover-only-on-non-transparent-part-of-image
Uit de antwoorden blijkt dat het niet zomaar mogelijk is, het gebruik van een wordt aangeraden.

Als het om (rechte) lijnen gaat zou je naar de coordinaten van de hover events kunnen kijken en de afstand tot de lijn kunnen berekenen, als die onder een bepaalde waarde komt (de halve dikte van de lijn bv) laat je het hover effect zien.

(Lees meer...)

gvrox

12 jaar geleden

Verwijderde gebruiker

12 jaar geleden

Mooi voorbeeld: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Verwijderde gebruiker

12 jaar geleden

Of nog beter (met 'onmouseover'): http://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 2500