Visualizzazione dei risultati da 1 a 9 su 9
  1. #1

    Cambiare stato hover di un link

    Ciao
    ho un sito con due colonne:
    quella a sinistra contiene una lista di link (navigazione testuale).

    Nella colonna centrale, ho una griglia contenente gli stessi link, ma sottoforma di thumbnail (navigazione visuale).

    Ora , i link sulla sinistra sono gli stessi (url e ordine) di quella centrale e VICEVERSA.

    Io vorrei ottenere il seguente effetto:
    Al passaggio del mouse (rollover) sul link nella colonna di sinistra, si dovrebbe attivare lo stato a:hover del relativo elemento nella griglia di thumbnail nella colonna centrale .
    viceversa
    Se con il mouse mi porto su una thumbnail nella colonna centrale, vorrei che il relativo link sulla sinistra passasse allo stato di :hover.

    Non so se mi sono spiegato, ma non ho idea di come si possa chiamare questo effetto .
    In ogni caso, se potete aiutarmi con qualche link o indicazione sul come fare, ve ne sarei grato

    Al momento uso jQuery, quindi eventualmente uno script associato a questo sarebbe comodo, ma non fondamentale.

    Grazie in anticipo
    ?

  2. #2
    Bisognerebbe vedere la struttura della pagina, con jquery riesci tranquillamente.
    Se i link hanno un id, una classe, qualcosa...

  3. #3
    Intanto grazie per la rapida risposta

    ecco il link a cui puoi tranquillamente andare e smontare per avere un'idea di come funziona.
    http://www.barnabybarford.co.uk/image_gallery/galleries

    Se mi puoi indicare qualche tutorial o script che mi aiuti, mi farebbe comodo.
    ?

  4. #4
    Mi sono segnato il post e domani ti do' una risposta.

  5. #5
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,133
    Ho sbagliato
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  6. #6
    Originariamente inviato da Senamion
    Mi sono segnato il post e domani ti do' una risposta.
    Grazie mille per l'aiuto.
    Nel frattempo (visto che sono assolutamente a secco di javascript)
    ho dato un'occhiata alla documentazione di Jquery :
    sono riuscito a far apparire lo stile desiderato usando .hover .

    Il risultato finale pero' dovrebbe essere:
    se vado con il mouse sulla prima thumbnail , il primo link deve cambiare stato ,
    se vado sulla seconda thumbnail, il secondo link deve cambiare stato
    e cosi' via.

    Quindi devo trovare un modo per relazionare la thumbnail al link:
    il valore che accumuna questi due elementi e' l'indice :eq() dell'elemento.
    Ora non so come scrivere il codice per fare in modo che:
    al rollover su una thumbnail, ricevo il suo valore di index , e il link con il medesimo valore di index cambia stato (passa a .hover).

    Ok penso di aver spiegato in maniera talmente incasinata la questione, che neance io ormai non mi ricordo che caspita volevo fare.

    Ad ogni modo la cosa deve funzionare anche VICEVERSA ovvero se vado sul link N , la thumbnail N deve cambiare il proprio stato.

    Grazie, anche a cavicchiandrea
    ?

  7. #7
    Allora, te ne spiego uno così provi a fare l'altro.
    L'idea dell'eq è già una buona base di partenza, il codice finale è:

    codice:
    $().ready(function() {
    	$('.imagecache-thumbnail_linked').each(function(i){
    		$(this).hover(function() {
    			$('.leaf a').eq(i).css({'background-color': 'red'});
    		},
    		function() {
    			$('.leaf a').eq(i).css({'background-color': 'yellow'});
    		});
    	});
    });
    in pratica

    con $('.imagecache-thumbnail_linked'). prendo tutte le immagini, a ciascuna attacco una funzione di hover.
    La funzione di hover prende $('.leaf a').eq(i). ossia tuttei gli a che sono in una lista con classe leaf, di cui (con eq) prendo l'elemento iesimo.

    Spero sia chiaro.

    Io l'ho provato sulla tua pagina con jquery 1.4

  8. #8
    Grazie Senamion

    Stasera provero' a inserire lo script,
    sto usando la versione 1.2.6 di jQuery , ma devo comunque fare un upgrade alla 1.4 anche per altri script che sto testando in locale.
    Nel frattempo ti sono molto grato, e spero che sia un buon modo per capire come iniziare a utilizzare jQuery in maniera creativa.
    ?

  9. #9
    Ok funziona alla perfezione, sono riuscito anche ad avere l'effetto inverso, ovvero andando sul leaf , riesco ad cambiare lo stato alla thumbnail.
    Sto effettuando altri test, ma comunque funziona esattamente cme volevo, ti ringrazio.

    Rimane una domanda:
    dato che non mi sembra molto conveniente avere delle regole css dentro alle funzioni js, e' possibile modificare l'attributo (es a:hover) aniche' il .css?
    Continuero' a guardare sulla documentazione di jquery, ad ogni modo,
    grazie mille per il favore!
    ?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.