Effetto javascript hover

[fabio@ba]

Ciao a tutti, per un sito in produzione dovrei realizzare un effetto javascript.
Nella home page ho un video che parte in automatico al caricamento della pagina e sotto ho delle immagini che se cliccate mi aprono il video.
Al passaggio del mouse sopra ognuna di queste immagini ci dovrebbe essere una barra larga come l'immagine al di sotto che scorre.
Esempio:
se io ho 4 immagini,
se passo col mouse sulla prima immagine la barra compare sotto la prima immagine
se passo col mouse sulla seconda immagine la barra compare sotto la seconda immagine
ecc...

Qualche idea??
Grazie

[Virus_101]

Puoi farlo in css con le psudo classi oppure in js mettendo mano a dei div precedentemente caricati con attributo css display:none.

Puoi fare una funzione che si occupa di visualizzare il div corrente e chiuderlo ad uscita del mouse oppure ad entrata su altro collegamento.

Per fare cio' devi porre attenzione che l'utente nn si sia spostato sopa il div con i sottomenu.

[fabio@ba]

Il sito è questo:

http://intertech.it/clienti/BetterChannel.tv/

sotto il video ci sono le immagini di cui parlavo prima, l'effetto sarebbe quella barra rossa che scorre sotto le immagini.
Il mio problema che avrei due effetti nel hover: il primo effetto è quello della barra e il secondo la visualizzazione del nome dello spezzone e della categoria (Si veda la barra gialla).

si può fare tutto con un unico effetto?

[Virus_101]

Ho visto che hai cambiato l'effetto.

Cmq dipende bene dal risultato che vuoi ottenere con js si puo' fare bene o male di tutto.

Puoi attivare disattivare la visualizzazione di piu' di un elmento alla volta etc. senza dover diventare idrofobo con la compatibilita' dei css.

Dipende a cosa miri.

[fabio@ba]

ho cambiato l'effetto perchè non riuscivo a fare quello descritto sopra, cmq è una versione beta quella che hai visto.
Hai percaso qualche idea?

[Virus_101]

Guarda con js puoi fare di tutto,

poi accedendere spegnere div muoverli etc etc etc aggiungere nodi alla pagina ristilizzare css, e molto altro.

DIpende da te che effetto finale vuoi ottenere.

Se vuoi per esempio ottenere che il boxettino rosso segue il mouse basta attivare il tracking del mouse quando sei nelo div e quindi controllando gli spostamenti avviare l'animazione per spostare dinamicamente il rattangolo rosso.

Se no puoi anche farlo fare a click etc dipende da te dome preferisci che si comporti.

Il fatto pero' che tutte queste cose si possono fare si ma costano in terimini di tempo e codice.
Puoi usare delle lib goa' pronte come jquery mootools prototype o scriptaculous. Ma devi cmq scrivere codice e capire come funzionano.

Inoltre solitamente lo svliluppo di parti dinamiche in js e' abb costoso prorpio per la complessita' che chiede e e' anche abb pesante sulla pagina se nn e' fatto bene.