[html] gekleurde area boven plaatje

[xillius]

Ik heb een jpg plaatje ingeladen.
Dit plaatje kun je vergelijken met een hele makkelijke kleurplaat (bestaande uit 18 verschillende kleurgedeeltes)

Nu wil ik dat er client side (dus niet reloaden van de pagina)
Een segment van kleur verandert op dit plaatje.

Ikzelf zat te denken aan het maken van een Map met area's maar deze kan je geen kleur geven.
Een div kan je wel een kleur geven maar bij mijn weten weer niet een rare vorm geven, alleen een rechthoek.
Ik weet niet hoe ik een combinatie van deze twee zou kunnen maken en of dit mogelijk is.

Misschien zit ik wel in de verkeerde richting te denken, maar is het mogelijk om dus een segment client side in te kleuren zonder dat ik heeeel veel plaatjes moet maken (want alle segmenten zijn anders)
en zonder te reloaden???

[Bosmonster]

Nee dit kan niet, niet in Javascript. Pak Flash er eens bij want daar kan het wel vrij makkelijk mee

[Verwijderd]

ga ff wat voor je testen

[Verwijderd]

moet het per se met een jpegje? in flash zou je het met een color object kunnen doen. en zijn de kleuren vantevoren bepaald/beperkt of moet dat ook clientside gekozen kunnen worden?

[xillius]

sorry maar flash of een java applet of een dergelijk programma wil ik niet gebruiken.
moet eigenlijk puur met html

[disjfa]

dan kan je allerlij transparante gifjes gaan bouwen die pcies t formaat hebben als een vlak eronder en pcies allemaal goed gepositioneerd zijn ..... kan je doen.....

maar gebruik liever flash ofzo

[Bosmonster]

xillius schreef op 13 februari 2003 @ 16:52:
sorry maar flash of een java applet of een dergelijk programma wil ik niet gebruiken.
moet eigenlijk puur met html

Dan gaat het niet lukken... HTML is ook niet bedoeld voor dit soort dingen, daar heb je van die applicaties als Flash voor...

Heb je ook een reden dat je het niet wilt gebruiken? Of zomaar?

(niet zonder een berg plaatjes te maken dan.. maar dat lijkt me nog dramatischer...)

[ Voor 10% gewijzigd door Bosmonster op 13-02-2003 16:55 ]

[xillius]

het is voor gebruikers waar ik niet teveel eisen aan wil stellen, dus eigenlijk is het html of anders niet. Blijkbaar word dit een niet
moeten ze zelf maar niet bedenken dat ze een plaatje willen die van kleur kan verspringen per segment enzo.
Ik dacht dat het misschien kon maar dat ik fout zit te denken. Helaas is dat niet zo.

Ze moeten eigenlijk maar gewoon een ding maken die de eigenschappen van een DIV en een AREA heeft.

helaas bestaat dit dus niet.

[disjfa]

bijna iedereen heeft flash, dus daar kan je het makkelijk in maken. als jij het html only wilt doen heb jij het probleem dat je erug veel codewerk moet maken om het cross browser compatible te maken en dat is echt niet leuk om te doen

dus waarom niet flash, word toch overal gebruikt

[Verwijderd]

ik heb wel iets bedacht, of het helemaal gaat werken moet je zelf maar verder uitwerken...

je knipt het plaatje in stukjes zodat de vakken allemaal los komen te staan, je krijgt dan allemaal vierkantje plaatjes...

die gooi je met divjes zo over elkaar heen dan het weer allemaal precies passend wordt..

vervolgens voeg je dit toe aan de cod e van het plaatje..

style="Filter: Chroma(color=#000000) Mask(color=#FF0000) Mask(color=#FF0000)"

met de mask kun je de kleur van het object weergeven, het enigste nadeel wat je nu hebt is dat je geen zwarte randjes er meer om heen hebt staan, maar dat kun je oplossen door de lijntjes in een transparant gifje te zetten en die daar dan weer boven te leggen,

echter nu kun je niet meer klikken op de kleur vlakken, waardoor je bij onclick de positie van de muis moet achterhalen en dan adhv de coordinaten bepalen in welk gebied dat is en vervolgens de mask kleur veranderen.

het kan theoretisch wel, maar kost zoooo veel werk dat je beter flash kunt gebruiken..

[Not Pingu]

een andere oplossing zou kunnen zijn:

maak het plaatje volgens de originele staat (dus zonder mouseover), en plaats daar een imagemap over. vervolgens maak je een aantal nieuwe plaatjes (hetzelfde als de originele) waarbij je een voor een de vlakken hun onmouseover-uiterlijk geeft.
dan kun je door javascript toe te passen bij de HREF attribute van de <AREA> gedeeltes, de SRC van het plaatje aanpassen voor elk vlak.

dat zou ik echter alleen doen als je met GIF of PNG werkt, anders krijg je dat de clients een x aantal keer een groot plaatje moeten downloaden, en zoals je weet heeft slechts 1/3e van de nederlandse internetters een breedbandverbinding.

[Verwijderd]

een aantal

mm das wel het understatement of het jaar...

het preciese aantal wordt dan aantal kleuren ^ aantal vlakken...

zeg dat het een vrij simpele tekening is, 10 vakken, en ongeveer 16 kleuren...

16^10 (tot de macht) = ± 1099511627776 verschillende plaatjes die hij dan moet maken...

[Not Pingu]

ik quote:

Dit plaatje kun je vergelijken met een hele makkelijke kleurplaat (bestaande uit 18 verschillende kleurgedeeltes)

als ik het goed begrijp maar 18 gedeeltes.

dus 18 plaatjes als onmouseover state, en een origineel = 19 plaatjes.

moet te doen zijn toch?

[Verwijderd]

Gunp01nt schreef op 13 February 2003 @ 18:10:
ik quote:

[...]


als ik het goed begrijp maar 18 gedeeltes.

dus 18 plaatjes als onmouseover state, en een origineel = 19 plaatjes.

moet te doen zijn toch?

Hij heeft 18 verschillende vakjes, die 18 moeten individueel van kleur te veranderen zijn... weet jij veel hoeveel verschillende kleuren combinaties hij wil maken... maar ik had je eerst niet goed begrepen, je moet nu wle 18*aantal kleuren een plaatje maken als ik je goed begrijp...

[Dark Blue]

ehm, behoort DHTML ook tot de vreemde trucjes?
Pelle heeft Pellepaint gemaakt, misschien kun je dat even checken en hem dan vragen hoe hij zoiets maakt, en of het ook met niet-vierkante vormen kan?

[RobIII]

Als je kijkt op mijn site (de openingspagina) dan zie je dat ik iets soortgelijks gebruik. Een achtergrond met daaroverheen area's en precies gepositioneerde gifjes...

Doe er je voordeel mee....

En nee, ik ga het niet verder uitkauwen...De (javascript) source is gewoon te bekijken / downloaden.

Site: http://www.devcorner.nl/new

[ Voor 11% gewijzigd door RobIII op 13-02-2003 19:40 ]

[rockfly]

het staat in me html boek (ffies opzoeken waar dat ding is) maar je kan punten kiezen waar je op moet klikken voor een link, je kan hoekjes doen maar ook punten poly-nog-iets

[Verwijderd]

rockfly schreef op 13 February 2003 @ 20:08:
het staat in me html boek (ffies opzoeken waar dat ding is) maar je kan punten kiezen waar je op moet klikken voor een link, je kan hoekjes doen maar ook punten poly-nog-iets

wat een constructieve bijdrage dat is gewoon een image map en die poly dingesen zijn polygonen...

[xillius]

Ik heb naar aanleiding van bepaalde posts hier zitten denken omdat deze over het transparant maken van een gif hadden.

Waar ik nu aan zit te denken is dat ik het plaatje neem en de delen die ik moet kleuren transparant maak. Hieronder kan ik met een tabel / div of iets wat een vlak een kleur kan geven simuleren dat het segment verkleurt bij een bepaald handeling.

Dus ik heb gekleurde vierkante vakken waarover ik dat plaatje heen zet zodat deze vakken eruit zien met een rare vorm.

k hoop dat het een beetje duidelijk is.

Ik ga idd echt niet 18 tot de heel veelste plaatjes zitten maken.

owja en deze link die hier ergens is geplaatst werkt niet
http://www.devcorner.nl/new

ik zal later vandaag wel ff kijken of ik daar nog iets zie wat ik beter kan doen.
ik heb in ieder geval een oplossing voor mijn probleem (ook al is ie misschien niet zo netjes )

[RobIII]

xillius schreef op:
owja en deze link die hier ergens is geplaatst werkt niet
http://www.devcorner.nl/new

...Vaag is dat... Dat hoor ik vaker... En toch doet 'ie het bij heel veel mensen wél. Is een DNS probleem ofzo.

Probeer http://213.93.164.247/new anders maar eens, dat moet ook werken.

[Verwijderd]

RobIII schreef op 14 februari 2003 @ 13:24:
[...]


...Vaag is dat... Dat hoor ik vaker... En toch doet 'ie het bij heel veel mensen wél. Is een DNS probleem ofzo.

Probeer http://213.93.164.247/new anders maar eens, dat moet ook werken.

Misschien omdat die ook chello hebben?
Zoiets heb ik ook bij mijn webserver op een @home account, sommige @home gebruikers kunnen die ook niet zien...