Animatie plaatje

[samdeman]

Hé allemaal,

Ik heb een website over zeilen en ik heb een tekst geschreven over de onderdelen.
Deze lijst wil ik vervangen door een plaatje van een valk (boot) waarvan verschillende objecten oplichten (of iets anders) als je er overheen gaat met je muis en als je er dan op klikt moet er onder het plaatje (of ergens anders) de beschrijving van het onderdeel komen te staan.
Ik heb geen ervaring met dit soort dingen, maar heb wel verstand van computers, hoe simpeler hoe fijner, is hier misschien een progje voor.
Mocht deze vraag verkeerd staan, verplaats hem dan alstublieft, want ik weet niet waaronder deze vraag valt.
Alvast bedankt.

Sam

 

[csshunter]

Mouse-over, hotspot, image-map en css-hovers, javascript rollovers

Hoi Sam,
Over dit onderwerp wordt op dit forum al regelmatig van gedachten gewisseld.
Ik heb de volgende topics voor je:

• http://www.helpmij.nl/forum/showthread.php/554654-mouseover
• http://www.helpmij.nl/forum/showthread.php/545257-rollover-compilatie
• http://www.helpmij.nl/forum/showthread.php/553000-Plaatjes-overelkaar-heen-leggen-zetten
• http://www.helpmij.nl/forum/showthread.php/555814-Photoshop-effect
• http://www.helpmij.nl/forum/showthread.php/459937-Hotspot-met-mouse-rolover

Vooral ook de vele links met voorbeelden aanklikken (en de broncodes daarvan bekijken), dan krijg je een idee van hoe het in de praktijk kan werken.
Je moet maar eens kijken wat je het beste kunt gebruiken.

Het hangt er vooral van af hoeveel speling je hebt tussen de verschillende onderdelen die je wilt laten oplichten.

• Zitten ze op een prettige afstand van elkaar, dan kan je klikbare rechthoekjes maken: een link die van kleur verschiet met css. Dan is er geen javascript nodig.
• Zitten ze stuik tegen elkaar aan, of hebben ze in elkaar passende puzzelvormen, dan ben je aangewezen op een "image-map" om die onregelmatige vormen klikbaar te maken. Maar dan moet er javascript aan te pas komen om het veranderen van kleur (of iets dergelijks) vorm te geven.

is hier misschien een progje voor?

Ja en nee...

• Ja, als je Photoshop/Dreamweaver o.i.d. hebt en die opdracht geeft om images te "slicen" (plakjes van te maken). Daar zit dan een automatisch javascript aan vast voor het kunnen laten wisselen van een bepaald partje. Maar ... daarvoor wordt een ontzaglijke tabel aangemaakt met veel stukjes mini-afbeelding, die allemaal nodig zijn om de gaten in de tabel op te vullen. Het geeft ook een onoverzichtelijke bende in de html. En vanwege de vele plaatjes duurt het downloaden van zo'n pagina ook veel langer dan nodig is. Ook wordt op deze manier veel overbodig javascript aangemaakt. Plus: tabellen zijn erg stijf in hun opmaak, en misschien moet je wel om iets te bereiken tabellen in tabellen gaan maken...
  En zo wordt het van kwaad tot erger.
  
  
• En nee, dat denk ik niet, omdat het heel erg afhangt van hoe je figuur er precies uitziet, en als je het mooi wilt maken dan zal de positionering van de aanwijsbare delen met de hand gemaakt moeten worden: via de onvolprezen CSS (wel flexibel). *) Vaak zal je met één of twee plaatjes kunnen volstaan. Door die als achtergrondfiguren te gebruiken, kan je ze steeds recyclen als je een ander stukje afbeelding (of hover-afbeelding) nodig hebt. De pagina wordt er erg snel door, en je hoeft ook geen hele rits met images te preloaden. Als de 1 of 2 plaatjes binnen zijn, heb je meteen alles. Daarom heeft ook een hover geen enkele bedenktijd nodig: die staat er voordat je het weet. De uiteindelijke html bestaat dan alleen uit een "kale" lijst met links. Soms wat simpel javascript erbij nodig voor een plaatjes-wissel.
  En alle opmaak wordt met css geregeld (zoals het hoort).

Samengevat:
Ik denk dat je je wel een beetje in het schijven van eigen code moet verdiepen, want er is geen pasklaar antwoord; en met de ontwerp-weergave in een html-editor zal je het niet redden.
Die kan het lang zo goed niet als jijzelf!

Met vriendelijke groet,
CSShunter
___________
*) Behalve voor een image-map met hotspots, die gedeeltelijk aangemaakt kan worden in de ontwerp-weergave van de meeste html-editors. Dan klik je een lijntje bij elkaar dat de omtrek vormt van wat je wilt kunnen aanklikken.