Immagine che cambia al passaggio del mouse

Cambia al passaggio del mouse sulla miniatura

« Older   Newer »
 
  Share  
.
  1. <?F
     
    .

    User deleted


    Espongo rapidamente il funzionamento di un codice simile a CSS popup image viewer, con la differenza che al posto del "popup", l'immagine nelle sue dimensioni reali viene sostituita a un'altra, scelta di default e inserita dove vogliamo all'interno della pagina in questo modo:
    HTML
    <img src="DEFAULT" name="jsimgrepl">

    dove DEFAULT andrà sostituito con l'URL dell'immagine.

    Le miniature andranno invece inserite così:
    HTML
    <img src="MINIATURA" onmouseover="document.jsimgrepl.src='IMMAGINE'" onmouseout="document.jsimgrepl.src='DEFAULT'">

    MINIATURA è il collegamento all'immagine piccola.
    IMMAGINE è l'immagine normale, che verrà sostituita a DEFAULT al passaggio del mouse.

    Nota: si può decidere di fare a meno di questa parte:
    HTML
    onmouseout="document.jsimgrepl.src='DEFAULT'"

    in questo modo, quando il cursore non si trova più sulla preview, non verrà ri-settata l'immagine di default.

    A scanso di equivoci, questi codici vanno inseriti in: Amministrazione > Grafica > Codice HTML
     
    .
  2.  
    .
    Avatar

    Advanced Member

    Group
    Member
    Posts
    2,206

    Status
    Anonymous
    Scusami, se voglio che l'immagine cambi al passaggio del mouse mantenendo le stesse misure devo usare questo codice
    CODICE
    <img src="DEFAULT" name="jsimgrepl">

    giusto?

    Se è cosi, al posto di default metto il link della prima immagine, ma quella che dovrà comparire dove la metto?
     
    .
  3. <?F
     
    .

    User deleted


    Facciamo un po' di chiarezza. Il breve tutorial spiega come far sì che passando sopra a un'icona, un'altra immagine cambi.
    Se vuoi sostituire l'icona stessa al passaggio del mouse, la situazione diventa questa:
    HTML
    <img src="IMMAGINE" onmouseover="this.src='ALTRA'" onmouseout="this.src='IMMAGINE'">
     
    .
  4. ¬Shirakomµ†™
     
    .

    User deleted


    chiedo troppo se vorrei vedere un'anteprima??:/
     
    .
  5. <?F
     
    .

    User deleted


    Accontentato: http://fastskin.forumfree.it/?f=10842469
     
    .
  6. ¬Shirakomµ†™
     
    .

    User deleted


    Grazie!:D
     
    .
  7. ZioNtò
     
    .

    User deleted


    1 domanda sola vorrei fare le immagini eh le possiamo fare anche noi o le dobbiamo prendere quelle solo del forum ..sscusate e 1 domanda banale per voi ma mi servirebbe 1 risposta chiara e precisa .. le posso prendere anche io qualche foto dal pc e poi metterci il link o devo usare tniyPic ?
     
    .
  8. <?F
     
    .

    User deleted


    CITAZIONE (ZioNtò @ 30/10/2012, 16:30) 
    le posso prendere anche io qualche foto dal pc e poi metterci il link o devo usare tniyPic ?

    Le immagini che utilizzi in generale su internet devono essere caricate su un web server in modo che possano essere condivise con tutti gli utenti della rete (se si trovassero solo sul tuo pc solo tu le vedresti :P).
    Per farlo puoi avvalerti di un qualsiasi servizio free di hosting, ad esempio: https://dumpshare.net/

    Se hai altre domande come questa che non hanno nulla a che vedere con l'argomento di questo topic ti prego di porle nel forum di supporto: http://supporto.forumfree.it/
    o se riguardano la grafica nella sezione problemi di questo forum: http://skinlab.forumfree.it/?f=1102038
     
    .
  9. •Styll«
     
    .

    User deleted


    Grazie mille, è uno script meraviglioso, lo cercavo da un sacco di tempo! :D
     
    .
  10. Drift78Remix
     
    .

    User deleted


    :) :)
    Good Jobs
     
    .
  11. °GuGi°
     
    .

    User deleted


    E se la miniatura la volessi linkare ad una pagina precisa? (:
     
    .
  12. <?F
     
    .

    User deleted


    CITAZIONE (°GuGi° @ 13/4/2013, 21:20) 
    E se la miniatura la volessi linkare ad una pagina precisa? (:

    In questo caso devi inserirla tra
    HTML
    <a href="LINKPAGINA">
    e
    HTML
    </a>
     
    .
  13.  
    .
    Avatar

    Senior Member

    Group
    Fan
    Posts
    54,711
    Location
    Lolland

    Status
    Anonymous
    ma se io volessi che più di un'immagine cambi al passaggio del mouse come dovrei fare? provo a spiegarmi meglio:
    c'è l'immagine grande in una parte della tabella e tre immagini piccole in un'altra:se passo il mouse sopra la prima si vede una certa immagine dove c'è l'immagine grande,se passo l'immagine sopra la seconda ce n'è un'altra e così sopra alla terza! non so se ho reso l'idea :/ per intenderci ancora meglio vorrei mettere l'effetto che molti forum hanno per le immagini dello staff in cui ognuno ha la sua immagine che appare al posto di quella più grande in tabella!
     
    .
  14. <?F
     
    .

    User deleted


    è esattamente questo che fa il codice spiegato in questa guida.
     
    .
  15. °GuGi°
     
    .

    User deleted


    Basta mettere più miniature! L'immy di default rimane la stessa, cambi solo quella che la sostituisce!^^
     
    .
40 replies since 25/6/2011, 17:58   10659 views
  Share  
.