Visualizzazione risultati 1 fino 6 di 6

Discussione: Codice per mettere delle immagini come a:link, a:hover,...

  1. #1
    Guest

    Predefinito Codice per mettere delle immagini come a:link, a:hover,...

    Ciao a tutti, è da un paio d'ore che sto impazzendo per far funzionare questa cosa non avendola mai fatta prima ma non ci riesco... ho anche cercato in giro ma senza successo =(

    Allora: sto costruendo un nuovo sito e voglio fare un menu con delle immagini, in modo che al passaggio e al click del mouse queste cambino (es. tipo il menû du questo sito: www.gpxplus.net) Per ora sto solo cercando di capire come funziona quindi le immagini non sono definitive, solo esempi, ma rendono l'idea

    La pagina su cui sto lavorando è www.originalconcorso.altervista.org/home.htm


    Sono quasi sicura che il codice css è giusto, infatti se nell'html metto solo una scritta qualsiasi fra i tag del link (es. <a href.....>MENU</a>) come sfondo effettivamente mi fa vedere le due immagini che ho messo in a:link e a:hover che cambiano al passaggio del mouse. Non riesco invece a capire cosa devo mettere nel codice html.


    Attualmente questo è quanto ho scritto nella pagina del css:

    Codice:
    #img2 {
    position: absolute; 
    top: 119px; 
    left: 20px;
    }
    
    a:link {
    background-image: url(http://originalconcorso.altervista.org/menubianco.png); 
    }
    
    a:visited {
    background-image: url(http://originalconcorso.altervista.org/menubianco.png); 
    }
    
    a:hover {
    background-image: url(http://originalconcorso.altervista.org/menuhome.png); 
    }
    
    a:active { 
    background-image: url(http://originalconcorso.altervista.org/menuhome.png); 
    }


    Questo invece è la parte che lo riguarda nell'html, so che fra i tag del link devo mettere qualcos'altro (al posto dell'immagine), ma... cosa? Ho provato a mettere un div vuoto a cui poi con i css davo le misure giuste, ma così facendo scompare tutto...


    Codice:
    <a href="http://originalconcorso.altervista.org/home.htm"><img id="img2" src="http://originalconcorso.altervista.org/menubianco.png" border="0"></a>


    Qualcuno che ha voglia potrebbe gentilmente scrivermi il codice esatto? Grazie!

    P.S. In seguito darò un id anche ai link

  2. #2
    Guest

    Predefinito

    nel sito che dici tu l'effetto é stato usando delle liste (ul, li) il css é più o meno così:
    Codice:
    ul#ulid{
           list-style: none;
             }
    ul#ulid li{display: inline;margin: 0 2px}
    ul#ulid a{background-image: http://indirizzoimmagine;}
    ul#ulid a:hover{background-image: http://indirizzoimmagine;}

    nel codice html devi mettere
    Codice HTML:
    <ul id="ulid">
    <li><a href="LINK"></a></li>
    <li><a href="LINK"></a></li>
    <li><a href="LINK"></a></li>
    </ul>

  3. #3
    Guest

    Predefinito

    Ci sono riuscita! Non con le liste, ma il suggerimento mi è comunque servito a capire che nei tag del link (fra <a href...> e </a>) posso anche non mettere niente... poi nei css ho dato una dimensione e una posizione al link e ora funziona =) Grazie mille!

  4. #4
    L'avatar di dementialsite
    dementialsite non è connesso Super Moderatore
    Data registrazione
    19-10-2004
    Residenza
    fuori Padova
    Messaggi
    5,046

    Predefinito

    Citazione Originalmente inviato da originalconcorso Visualizza messaggio
    Ci sono riuscita! Non con le liste, ma il suggerimento mi è comunque servito a capire che nei tag del link (fra <a href...> e </a>) posso anche non mettere niente... poi nei css ho dato una dimensione e una posizione al link e ora funziona =) Grazie mille!
    Diciamo che il tuo problema era proprio quello: con l'immagine dentro il link stavi "oscurando" lo sfondo, che di conseguenza a te sembrava che non venisse cambiato.

    Stammi bene...
    Le questioni tecniche hanno risposte migliori nel forum pubblico, non trovi?

    When you don't know your next step... improvise

    ALTERVISTA WANTS YOU!
    Vuoi diventare moderatore su AlterVista? Scopri come...

  5. #5
    Guest

    Predefinito

    Ho capito... grazie per l'aiuto!

  6. #6
    L'avatar di dreadnaut
    dreadnaut non è connesso Super Moderatore
    Data registrazione
    22-02-2004
    Messaggi
    6,253

    Predefinito

    Citazione Originalmente inviato da originalconcorso Visualizza messaggio
    Ci sono riuscita! Non con le liste, ma il suggerimento mi è comunque servito a capire che nei tag del link (fra <a href...> e </a>) posso anche non mettere niente... poi nei css ho dato una dimensione e una posizione al link e ora funziona =) Grazie mille!
    Lasciare dei tag <a> senza niente dentro è la seconda peggior abitudine di sempre:
    • i link non si vedono finchè le immagini non sono state caricate
    • se le immagini non caricano, non ci sono link
    • se l'utente non può vedere le immagini (screen reader, telefonino, poca banda?) non ha idea che i link esistano
    • i motori di ricerca vedono dei link vuoti, ridono alle tue spalle e li considerano come i meno interessanti dell'intero web


    Usa come minimo almeno un testo nascosto via css.

    edit: bonus, un award per il tuo sito.

    edit: bonus 2x

    Siamo nel 2010, e si possono usare font sul web, e fare a meno di disegnare tre immagini per bottone. Prova a cercare "web fonts" su google, o più semplicemente usa il font Tangerine come gentilmente servito da Google.
    Ultima modifica di dreadnaut : 29-06-2010 alle ore 11.16.38

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •