[DHTML] map area inkleuren

[Standeman]

Ik heb een heel leuk plaatje gekregen en het is de bedoeling dat onderdelen van dit plaatje klikbaar worden en er wat text automagisch geselecteerd wordt.

het was allemaal vrij simpel.. Ik heb een tooltje gedownload en ben lekker shapes gaan tekenen over het plaatje heen zodat de coordinaten werden gegenereerd.

Nu ik klaar ben en het allemaal werkt, hebben ze opeens nog een wens (en ik heb al min of meer ja gezegd ). Ze willen dat de shapes oplichten als ze met hun muis erover heen gaan. Ik dacht dat dit niet zo'n probleem was, maar het blijkt dat het volgende niet werkt:

code:

        <MAP NAME="bla.gif">
            <AREA SHAPE="CIRCLE" COORDS="189,30,6" ALT="test" 
onMouseOver="javascript:colorShape(this);">
        </MAP>

en

code:

            function colorShape(obj) {
                    obj.style.background = '#119955';
            }

Iemand enig idee hoe ik het kan bereiken dat de de area's gekleurd worden zonder dat ik allemaal gifjes moet maken en deze er overheen te leggen? (het zijn namelijk aardig wat shapes).

[ Voor 6% gewijzigd door Standeman op 15-08-2005 16:57 ]

[NMe]

Clientside spul hoort in Webdesign & Graphics, zoals je prominent in onze stickies en in onze FAQ had kunnen lezen.

PW>>WG

[Michali]

Volgens mij kan dat niet met css. Je zult toch echt meerdere plaatjes moet maken.

[Bosmonster]

Of er een Flashje van bakken...

Met DHTML is dit niet te doen iig.

[ Voor 38% gewijzigd door Bosmonster op 15-08-2005 17:17 ]

[Standeman]

-NMe- schreef op maandag 15 augustus 2005 @ 17:02:
Clientside spul hoort in Webdesign & Graphics, zoals je prominent in onze stickies en in onze FAQ had kunnen lezen.

PW>>WG

Verkeerd knoppie..

Volgens mij kan dat niet met css. Je zult toch echt meerdere plaatjes moet maken.

Waarom kan dat dan niet?? Omdat <area> per definitie niet gerendered wordt in zowel IE als Mozilla ?

Ik kan het (meestal) niet geloven dat iets niet kan.. Misschien iemand een idee hoe / of je een gekleurde polygoon op een plaatje getekend krijgt met html/css ?


Flash is overigens geen optie, aangezien we er de tools + kennis niet voor hebben...

[ Voor 15% gewijzigd door Standeman op 15-08-2005 17:31 ]

[Michali]

Het is gewoon een gebied waarop je kan klikken en niet iets wat te stijlen valt.

[André]

Het zou met DHTML prima moeten kunnen, want je kunt via de DOM alle coordinaten uitlezen. Alleen cirkels geven dan wel weer een probleem.

[Standeman]

André schreef op maandag 15 augustus 2005 @ 20:23:
Het zou met DHTML prima moeten kunnen, want je kunt via de DOM alle coordinaten uitlezen. Alleen cirkels geven dan wel weer een probleem.

hmmm... ik denk dat dat een gebed zonder end wordt met mijn kennis... Ik ga gewoon voor de optie "bolletje in geselecteerd gebied". Het midden van een dergelijk area uitrekenen is nog vrij eenvoudig...

Jammer dat een area niet te stylen valt.. Ik hoopte dat het iets met transparacy te maken had..

[Bosmonster]

André schreef op maandag 15 augustus 2005 @ 20:23:
Het zou met DHTML prima moeten kunnen, want je kunt via de DOM alle coordinaten uitlezen. Alleen cirkels geven dan wel weer een probleem.

En hoe wil je dat dan gaan inkleuren?

[André]

Een transparante layer er overheen plaatsen

[Verwijderd]

css icm opacity een optie?!

[Verwijderd]

Verwijderd schreef op dinsdag 16 augustus 2005 @ 09:50:
css icm opacity een optie?!

Je kan toch niet alleen een area een opacity geven?

[Verwijderd]

Een veelzijdige opzet is misschien de volgende, gebaseerd op drie over elkaar liggende layers.
• top-layer: transparante afbeelding met daaraangekoppeld de map met events per area;
• mid-layer: hier geef je het vlak of de arcering weer;
• bot(tom)-layer: hier geef je de eigenlijke afbeelding weer.

Op de middelste laag kun je het vlak of de arcering dan -zoals Andre aangaf- laten tekenen met DHTML van bijv. Walter Zorn. Een wat ouderwetser methode die meer domme arbeid vergt, is om voor elk vlak een bijbehorende arcerings-afbeelding te maken en die neer te leggen op de juiste plaats in de grote afbeelding en vervolgens te tonen als dat nodig is.

Je vroeg om bewijs dat <area> geen style kent?
Zie voor MSIE de referentie voor het element area (onderdeel Styles).

[Standeman]

Verwijderd schreef op dinsdag 16 augustus 2005 @ 20:41:
Een veelzijdige opzet is misschien de volgende, gebaseerd op drie over elkaar liggende layers.
• top-layer: transparante afbeelding met daaraangekoppeld de map met events per area;
• mid-layer: hier geef je het vlak of de arcering weer;
• bot(tom)-layer: hier geef je de eigenlijke afbeelding weer.

Op de middelste laag kun je het vlak of de arcering dan -zoals Andre aangaf- laten tekenen met DHTML van bijv. Walter Zorn. Een wat ouderwetser methode die meer domme arbeid vergt, is om voor elk vlak een bijbehorende arcerings-afbeelding te maken en die neer te leggen op de juiste plaats in de grote afbeelding en vervolgens te tonen als dat nodig is.

Je vroeg om bewijs dat <area> geen style kent?
Zie voor MSIE de referentie voor het element area (onderdeel Styles).

Ik hou dus niet van "dom" werk, vandaar dat ik deze post had gemaakt.. Met layers werken heb ik nog niet echt gedaan, dus dat wordt een leuk uitzoek & probeer klusje Maar ik ga het zeker proberen (het is toch rustig op mijn werk)!

Bevestiging dat het niet gerendered wordt heb ik daarnet ook al een beetje gevonden op w3.org

[Verwijderd]

Voor de duidelijkheid: met layers bedoel ik niet <layer>-s, maar <div>-s met verschillende z-index.

Daarnaast bedacht ik me dat de "dom werk" methode ook slimmer gemaakt kan worden. Maak een script dat als input een imagemap gebruikt en als output voor elke area een plaatje oplevert met daarbij de coördinaten voor je JS om deze plaatjes te plaatsen. Eén keer scripten, -tig keer imagemaps van een arcering of kader voorzien.

[Dope-E]

Wat natuurlijk ook kan is de image voor elke mogelijke varianten maken, dus voor elke area gekleurd 1 versie en de standaardversie. Dan kun je met een mouseover de images swappen...

[SchizoDuckie]

Dámn! die walter zorn scripts kon ik nog niet
Die moet ik echt onthouden voor dit soort dingen
Zeker aangezien je ook polygonen kan maken, je zou zo een script kunnen bouwen dat je imagemap properties uitleest en even :hover layertjes aanmaakt voor elk item

Iemand daar al eens mee gespeeld? OneZero misschien?

[Bosmonster]

André schreef op dinsdag 16 augustus 2005 @ 08:28:
Een transparante layer er overheen plaatsen

Laat ik m'n vraag anders stellen:

Hoe wil je dan niet vierkante vormen gaan inkleuren? (zonder afbeeldingen te gebruiken)...

Dit zijn dus van die dingen waar Flash ideaal voor is.

[ Voor 11% gewijzigd door Bosmonster op 17-08-2005 09:01 ]

[Janoz]

pixels zijn ook vierkant bosmonster, daar kun je ook rondjes mee tekenen

[Standeman]

Dope-E schreef op dinsdag 16 augustus 2005 @ 23:52:
Wat natuurlijk ook kan is de image voor elke mogelijke varianten maken, dus voor elke area gekleurd 1 versie en de standaardversie. Dan kun je met een mouseover de images swappen...

hmmm.. lijkt me niet echt plezierig voor de laadtijd om 78 plaatjes met elkaar te gaan swappen..

Eén keer scripten, -tig keer imagemaps van een arcering of kader voorzien.

hmmm.. dat is een afweging die ik moet maken, aangezien ik het niet zie gebeuren dat er veel imagemaps op deze mainer worden gebruikt. Hoogtens 2 per jaar ofzo... Dus ik geloof niet zo snel dat ik daar de tijd voor ga krijgen..