Ingewikkeld Menu

Beste One2xsers,
Ik heb een probleem met mijn site. Ik wil nogal een ingewikkeld menu hebben en het zou fantastisch zijn als iemand me even een zetje in de goede richting geeft.
Ik wil een menu dat er uit ziets zoals onder:
Het moet een mouse-over zijn zodat de link en de ster waar jij over heen gaan vergroten.
Ze mogen niet in een rij staan, ze moeten zoals op de afbeelding in een slinger staan.

Ik heb er al over na gedacht hoe ik het ga maken. Ik weet dat het met flash kan, maar daar heb ik 0 verstand van. Hoe het anders op een mooie manier kan?
Ik heb geen idee, heeft iemand een goede tip, hoe ik dit kan maken?

Gewoon in css elk plaatje op een andere hoogte plaatsen m.b.v margin-top: xx px; o.i.d. Dit voor elk plaatje apart doen, dan kan je ook elk plaatje een mooie hover meegeven!
Zo zou ik dit aanpakken, met flash is het veel te moeilijkt...

PS: Zorg wel dat als je de teksten in je header uitknipt dat de achtergrond dan leeg moet zijn, dan zijn die plaatjes transparant.

bedankt voor de tip, dit plan had ik ook bedacht. Maar dat gaat niet omdat hij dan in een keer op groot springt. Ik wil dat hij opzwelt/ groter wordt. Toen bedacht ik nog twee opties:
- Met behulp van een javascript ze laten opzwellen. Alleen duwt de afbeelding de andere dan aan de kant, dus dat gaat ook niet. Of moet heel ingewikkelde javascript worden.
- Met behulp van animated gif. Dat je het plaatje vervangt door een bewegend plaatje, echter gaat hij dan telkens opzwellen, springt hij terug en gaat hij weer opnieuw opzwellen omdat het plaatje zich herhaalt.

Bovendien wil ik dat als je er met de muis weer af gaat dat hij weer krimpt en daar kan ik niks op bedenken.

Oftewel bedankt voor de tip, maar het is helaas niet goed genoeg. Ik wil het perfect hebben.

Heeft iemand nog een tip of oplossing? Zou geweldig zijn

Wat ik bedoel werkt gewoon hoor...

Gewoon zo:

#plaatje1
{
background-image: (url/path);
width: xx px;
height: xxpx;
margin-left: xx px;
margin-right: xx px;
margin-top: xx px;
}

#plaatje1 a:hover (in html moet het plaatje dus linken)
{
background-image: (url/path);
width: xx px;
height: xxpx;
margin-left: xx px;
margin-right: xx px;
margin-top: xx px;
}

Ja maar wat gebeurt er? Hij flitst om in een ander plaatje. Dat wil ik juist niet, het moet net zijn alsof die letters langzaam naar voren komen en iets groter worden. Als je er met je muis van af gaat moet hij ook weer langzaam iets kleiner worden.

Toch bedankt voor je hulp.

Dan doe je dat gif plaatje met javascript met onMousOver...

Bij plaatje hover kan je dan toch BOLd bij zetten?

Josnl schreef:

Dan doe je dat gif plaatje met javascript met onMousOver...

Ik kan idd een animimated gif zoals het plaatje hieronder erin zetten, maar wat er dan gebeurt. Hij herhaalt zich constant, dat is juist het probleem. Hij moet groot worden en groot blijven tot dat je je muis er vanaf haalt. En als ik een animated gif erin zet wordt hij groot en flitst hij weer naar klein net zoals mijn plaatje hieronder.

Alemaalte schreef:

Bij plaatje hover kan je dan toch BOLd bij zetten?

Hoe moet dat precies alemaalte? Volgens mij is dat wat ik nodig heb.

Alvast bedankt

H hoeft geen gif plaatje te maken dat steeds groter en kleiner word. Je kan instellen dat het maar 1x gebeurd..

Josnl schreef:

Wat ik bedoel werkt gewoon hoor...

Gewoon zo:

#plaatje1
{
background-image: (url/path);
width: xx px;
height: xxpx;
margin-left: xx px;
margin-right: xx px;
margin-top: xx px;
}

Je kan ze toch beter een class me geven in plaats van div? Afbeelding niet beschikbaarDe oorspronkelijke afbeelding of link ontbreekt.
.plaatje1
{
background-image: (url/path);
width: xx px;
height: xxpx;
margin-left: xx px;
margin-right: xx px;
margin-top: xx px;
}

Een class voor verschillende plaatjes?????? Weet niet hoe je dat wilt doen hoor

De plaatjes een class mee geven met margin top gewoon het zelfde maar dan class="" in je img en niet

ik gebruikte div. omdat je als je dan width=100% doet. Hij dan 100% van het scherm pakt, bij welke resolutie dan ook. Als je dat bij img doet valt hij op 100% van de breedte van de afbeelding en dat kan binnen of buiten het scherm vallen. Als ik zeg standaard 1024 pix. dan heb je bij een groter scherm en een kleiner scherm een probleem.
Hoe moet ik dat dan oplossen?