[Image Maps & Mouseover] Iemand een idee hoe je swapt?

[bbr]

Voorbeeldje 1:
http://www.andrea.net/uo/bmn/top/

Voorbeeldje 2:
http://webmonkey.wired.co.../98/23/stuff3a/demo3.html

Doeltarget:
http://blackrune.atspace.com/html/fullshot.htm


Ik wilde dus kijken of ik met behulp van een imagemap.

Zoiets:
<MAP NAME="LibTest">
<AREA SHAPE="RECT" COORDS="70,329,85,276" HREF="" TITLE="111">
<AREA SHAPE="RECT" COORDS="85,308,103,255" HREF="" TITLE="222">
</MAP>
[img]"pics\fullshot2.jpg"[/img]

Nu was het plan om voor het doel, dus kleine plaatjes te maken, en die dan te inserten bij een highlight. / Mouseover, zodat je het idee krijgt waar je je muis over heb hangen.
de text kan ik dan aan de zijkant in een table gooien, maar dat is makkelijk
ik kan nergens vinden hoe of waar ik een klein plaatje op de imagemap coordinaten insert.

enige hulp is welkom

[André]

Zo kun je een stukje JS aanroepen:

code:

<area shape="rect" coords="70,329,85,276" href="" title="111" onmouseover="alert(this.coords);">

Daar kun je ook een functie neer zetten die de coordinaten van de area uitleest en op die plek een image neerzet.

Een simpelere oplossing is een gewone image te gebruiken met kleine absoluut gepositioneerde images daarop. En op de kleine images zet je een onmouseover die de src er van veranderd. Dan ben je van je imagemap af.

[ Voor 13% gewijzigd door André op 28-02-2005 22:35 ]

[bbr]

Als je de image map heb, zou je in pincipe toch in the area van de image map een image kunnen inserten / weer weghalen.

ik zou <div> kunnen gebruike. maar dan zou die relatief aan de table moeten kunnen werken,
de <divs> die ik tot dusver heb gevonden werken alleen relatief aan de volledige pagina, en zijn niet 100% platform en browser onafhankelijk.

zou je een message kunnen sturen als je een rect binnen een imagemap inkomt, en weer uitgaat, om zo zo'n stukje JS aan te roepen, en een image tijdelijk te inserten en verwijderen.. ?
de imagemap is niet zo'n probleem, het zijn alleen aso veel rectangles die ik op de main image moet plakken
lijkt me niet zo fijn als je net de pagina binne komt, en hij gaat ff snel 100 images staan laden,, voordat je uberhaubt nog ergens je muis over hebt gehangen.

[André]

BBR schreef op dinsdag 01 maart 2005 @ 08:49:
Als je de image map heb, zou je in pincipe toch in the area van de image map een image kunnen inserten / weer weghalen.

Nee, een area is alleen maar een hotspot en kan volgens mij geen plaatjes bevatten.

ik zou <div> kunnen gebruike. maar dan zou die relatief aan de table moeten kunnen werken,
de <divs> die ik tot dusver heb gevonden werken alleen relatief aan de volledige pagina, en zijn niet 100% platform en browser onafhankelijk.

Als de de parent div een position:relative geeft dan zouden de child divs vanuit daar moeten positioneren. En die zijn 100% platform en browser onafhankelijk.

zou je een message kunnen sturen als je een rect binnen een imagemap inkomt, en weer uitgaat, om zo zo'n stukje JS aan te roepen, en een image tijdelijk te inserten en verwijderen.. ?

Je kunt na de onload alle area's bijlangs lopen en ze een onmousover en onmouseout geven.

de imagemap is niet zo'n probleem, het zijn alleen aso veel rectangles die ik op de main image moet plakken
lijkt me niet zo fijn als je net de pagina binne komt, en hij gaat ff snel 100 images staan laden,, voordat je uberhaubt nog ergens je muis over hebt gehangen.

Wat wil je dan? Dat het plaatje pas geladen wordt als je met de muis er overgeen gaat? Je zult toch echt moeten preloaden.

[bbr]

1 keertje beter uirgelegd dan.. omdat de thread dus gelocked of verloren was voor ik normaal kon antwoordne.: [rml][ Javascript][ map][/rml]

100 images splitte, divs, etc gaat niet werken. is te langzaam.

ik zoek dus een javascript wat een mouseover deel van de image map kan highlighten.
flash heb ik geen ervaring mee... dus tenzij iemand tijd teveel heeft zoek ik dus een javascript oplossing.

[ Voor 49% gewijzigd door bbr op 16-03-2005 14:43 ]

[Verwijderd]

Wat is de highlight? Als het allemaal rectangles zijn kun je met JavaScript bijvoorbeeld een DIV eroverheen zetten met een border en een (half) transparant gifje of png om een highlight kleur te forceren.

[bbr]

highlight, gewoon een lichter kleurtje zou al voldoende zijn, of een witte rand.
de area is niet rectangular, maar zou wel kunnen.

sommige areas verschillen in size, zou 1 gifje afdoende zijn. ?

[johanmulder]

hmm ik heb iets dergelijks in een ver grijs verleden gemaakt voor
www.woonruimte-aanbod.nl. Hier zal je misschien kunnen kijken hoe het werkt met de achterliggende css en javascript. Het is wel gebaseerd op een imagemap, maar de afbeelding ervan wordt gewoon vervangen met een andere plaatje als men over een shape heengaat. Ranzig, maar het werkt met kleine gif-afbeeldingen. (voor de zekerheid een image preloader erin gemaakt).

Succes, Johan

[ Voor 21% gewijzigd door johanmulder op 16-03-2005 22:33 ]

[bbr]

hmmm. dat is idd misschien wel iets in de goede richting.

'k zou 1 main background image kunnen maken, en dan een relatieve, or transparant image kunnen tonen in de voorgrond, op het moment dat je muis zich binnen de imagemap bevind.
zou toch weer met <div> aan de gang moeten dan, en dat dan 100x herhalen... da's nou precies wat ik wil voorkomen.

[ Voor 22% gewijzigd door bbr op 17-03-2005 11:29 ]

[johanmulder]

misschien ook een idee : je kan ook dynamisch de innerHTML code wijzigen van zo'n div overlay. Dus een onMouseOver bij een shape kan je dan de ID doorgeven aan een functie die dan overeenkomt met een afbeelding met dezelfde ID (image_002.gif bijv.). Dan kan je veel code besparen. Het JS komt er dan ongeveer zo uit te zien :

code:

function toonVervanger(ID)
{
    document.getElementById('divlaagje').style.innerHTML = "[img]'images/image_"+ID+".gif'[/img]";
}

Al iets minder ranzig dan die van mij Succes!