• K
    Super User •

    Rollover delle nostre immagini

    Buongiorno a tutti. 🙂
    Volevo mettere in tavola un metodo di rollover delle immagini e dei link non molto usato, che probabilmente qualcuno conoscerà, ma a mio parere molto utile e che ho iniziato anche io ad usare da poco tempo.

    Prologo
    Spesso usando un rollover sulle immagini (con evento del mouseover) si incappa in problematiche variegate che possono essere ad esempio quelle dell'uso di javascript per avere un** pre-download** degli stessi componenti in modo da evitare effetti ritardanti al passaggio del mouse (almeno fintanto la nostra cache non ha salvato il tutto).

    Altro problema parla di accessibilità e di indicizzazione dei nostri menù:
    molte volte per abbellire le voci dei nostri menù ci viene in mente di usare e creare delle immagini jpg/png con del testo che però non può essere indicizzato per ovvie ragioni se non per via del tag "ALT" sulle stesse.
    Aggiungendo il fatto che per mettere del testo vero e proprio "nascosto" per permettere alle nostre immagini di sostituirlo al meglio, dobbiamo aggirare i problemi sfruttando tecniche spesso troppo incanalate (div dentro div con spam ecc , uso di attributi display, z-index e via scorrendo).

    Il nostro esempio sarà esente da javascript , non ci sarà effetto ritardante dell'evento hover del mouse e soprattutto disabilitando i CSS vedremo il nostri sito come dovrebbe essere per una buona indicizzazione.
    **

    INIZIAMO
    **
    *Creiamo le nostre immagini
    *
    Ciò che dovete fare è realizzare un'immagine duplice come vi illustro in questo esempio:

    image

    Questa è una sola immagine che illustra i due effetti:

    • bianco quando non sono sopra con il mouse
    • giallo al mio mouseover e cioè al passaggio del mouse.

    Ho creato personalmente le due immagini in due oggetti diversi e poi le ho affiancate perfettamente senza sbavature ne sovrapposizioni in modo verticale.

    *HTML

    *L'html è estremamente esiguo, non richiede div incanalati dentro altri div.
    Semplicemente questo all'interno del nostro tag "body":

    [html] <a id="linkprova" href="#" title="Vai a questo link">Questo è un link</a>[/html]come potete vedere ho scritto un link in tutta la sua semplicità.
    Non uso niente di estremo , solo e obbligatoriamente do un ID al mio link chiamato "linkprova".

    *CSS
    *
    Qui sta il fulcro del nostro lavoro.
    [html]
    #linkprova{
    display:block;
    height:22px;
    width:178px;
    text-indent:-10000px;
    overflow:hidden;
    background:url(provalink.jpg) no-repeat top left;
    }
    :hover{
    background:url(provalink.jpg) no-repeat bottom left;
    }[/html]Tutto qui
    Tramite l'id che gli abbiamo assegnato:

    • Diamo al nostro link una proprietà "display:block" in modo da poter gestire la sua dimensione come vogliamo.
    • Stablisco una dimensione pari alla larghezza della nostra immagine e alta quanto la prima sezione della nostra immagine (quella mostrata sopra)
    • Per evitare che si mostri il testo del link sopra il nostro sfondo, sposto l'intero testo dalla visuale del browser tramite un aggiramento dato da "text-indent:-10000px;" il quale mi sposta a sinistra il testo mandandolo fuori schermo.La parte fondamentale di tutto questo sta nella proprietà "Background".
      Nel css al punto "#linkprova" inserisco il path della mia immagine che fungerà da sfondo e aggiungo l'attributo** top left **mentre, per l'attributo "#linkprova" e quindi sull'effetto del mouse, inserisco la stessa dicitura del background ma con **bottom left.

    **Ecco fatto :yuppi:

    Adesso questo voleva avere, come detto sopra, la funzione di aiutare e di proporre una tecnica di sviluppo ma anche sapere come la pensate.

    PRO:

    • Quantità ridotta di immagini da utilizzare e inserire nel nostro spazio web per permettere un rollover, essa si dimezza.
    • Nessun javascript per evitare il dalay sul rollover.
    • Nessun problema di accessibilità, disabilitando i css si vedrà il suo contenuto.

    CONTRO:

    • C'è da scrivere nel css la dimensione e larghezza precisa per ogni oggetto realizzato in questo modo. Oppure compattare il tutto con delle dimensioni fisse stabilendo delle classi (io ad esempio ho realizzato un css unicamente per elencare i path e gli effetti).

    Principalmente è proprio la discussione che a me interessa in modo da trovare , se esiste, una falla in questo metodo o avere magari avere degli **ottimi riscontri odelle critiche. **Ciao!

    0
  • M
    User Attivo •

    io uso lo span...nascondo quello e con i css gioco con l'altezza del mio elemento...

    
ul#menu1 li#azienda a {display:block; background:url(../img/li_azienda.gif) 0 0 no-repeat; width:130px; height:26px; margin:0 0 0 0px; padding:0;}
ul#menu1 li#azienda a:hover {display:block; background:url(../img/li_azienda.gif) 0 -26px no-repeat; width:130px; height:26px; margin:0; padding:0}

    :ciauz:

    0
  • K
    Super User •

    C'è però un errore nello span 🙂
    Se provi a ridimensionare il carattere tramite la funzoine CTRL + rotellina del mouse riscontrerai un errore diciamo grafico.
    La scritta ingradendosi compare sotto l'immagine finendo per sbordare risultando non molto bello da vedere.

    0
  • K
    Super User •

    Lo usavo pure io.
    Però nel momento in cui ingrandisci il carattere della tua pagina tramite la funzione "CTRL + rotella del mouse" riscontrerai un effetto non molto gradevole da vedere.
    L'immagine rimane della solita dimensione mentre la scritta inserita nello spam andrà a sbordare sotto la prima ritrovandoti contro spiacevoli effetti grafici.

    0
  • M
    User Attivo •

    grazie del consiglio...inizierò allora con il text-indent...
    buona settimana 🙂

    0
  • T
    User Attivo •

    Molto interessante, avevo già provato ad utilizzare questo sistema, ma non sapevo come realizzare l'immagine.
    Io cercavo di farne direttamente una speculare, che era un casino.
    Cercherò adesso di fare come hai fatto tu, appena ho un pò di tempo provo.

    0
  • O
    Super User •

    Stesso procedimento piu o meno, solo che nel stato hover, ci metto solo il background-position senza riscrivere l'url.:bho:

    0
  • K
    Super User •

    Esatto vi risparmiate di riscrivere due volte il path del background che gia viene mantenuto senza doverlo ripetere.
    Come dice Onsitus basta anche scrivere background-position nel ridefinire la posizione sull'hover. 🙂

    0
  • O
    Super User •

    Comunque stesso procedimento può essere usato per lo sfondo d'un link text senza il text-indent e l'immagine potrebbe pure essere triplicata usando il background-position: center; al stato hover e background-position: bottom; per il stato selezionato (poi dipende in quale ordine create l'immagine con i 3 stati :D)

    Basta per oggi, ritorno in flash.:fumato:

    0
Effettua l'accesso per rispondere