Visualizzazione di Immagini con Link di Testo Passa con Solo CSS

Ho un link di testo. Quando l’utente passa sopra il link di testo, vorrei un immagine da visualizzare qualsiasi altro punto della pagina. Io voglio fare questo utilizzando i css. Ho pensato che poteva essere fatto semplicemente con una sola riga di codice nel link come un onmouseover ma sembra che richieda un codice qualsiasi altro punto della pagina.

Ho provato con la a:hover con l’immagine che voglio mostrare come un immagine di sfondo, ma non penso che può essere manipolata per la visualizzazione in full invece di essere tagliati fino a raggiungere le dimensioni del testo del link.

Vedo centinaia di risultati quando provo a cercare per questo, ma nessuno di loro è quello che voglio. La cosa più vicina che ho trovato è stato questo.

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

Ma che lavoro con il puntatore del mouse sulle icone. Voglio solo che l’utente posiziona il mouse sopra un testo unico link di una immagine che mostra la pagina da qualche altra parte. Ho scoperto che la galleria di questo thread: Pop-up immagine css link al passaggio del mouse

Non voglio affrontare qualunque che jquery è o troppo script perché io sono più familiarità con i css. Qualcuno sa di un modo semplice per fare questo o c’è ancora nessun modo, nemmeno con tutte le modifiche apportate per css3?

Grazie!

InformationsquelleAutor user1418023 | 2012-05-26

 

Tags: , , , ,

5 Replies
  1. 19

    CSS non sta per essere in grado di chiamare altri elementi come questo, avrete bisogno di usare JavaScript per raggiungere al di là di un figlio o un fratello di selezione.

    Si può provare qualcosa di simile a questo:

    <a>Some Link
<div><img src="/you/image" /></div>
</a>

    poi…

    a>div { display: none; }
a:hover>div { display: block; }
    • Ah ok io di capire cosa intendi. Che sarebbe nascosta, ma poi viene visualizzato quando si posiziona il mouse sopra il link perché sono collegati con la “>”. Proverò a vedere cosa succede, grazie!
    • Impressionante, ho preso a lavorare! Unica modifica che ho fatto è stata l’impostazione di hover div inline dal blocco di fatto di spostare il link prossimo dopo che ti sono stati fatti in bilico e quindi nella parte html ho dato il div con una classe che ho impostato una posizione assoluta per l’immagine nel div show’, dove ho voluto che sulla pagina. Funziona esattamente come volevo, grazie mille!!!
    • Oh, ho anche scambiato a>div per un<img stesso con il passaggio del mouse in modo che io possa utilizzare solo l’immagine senza il tag di ancoraggio, invece di avere un div in là. Ha funzionato bene in altro modo nel browser, ma i collegamenti sono stati allineati strano sul mio dispositivo mobile. Ora che tutti i match up. Grazie ancora!
    • Ho cercato di applicare questa soluzione l’attributo style di <ul> come questo: style=”a>div { display: none; }; a:hover>div { display: block; }” e non funziona.
    • Funziona alla grande! Grazie mille!
    InformationsquelleAutor Fluidbyte
  2. 24

    Può essere fatto utilizzando CSS da solo. Funziona perfettamente sul mio computer, in Firefox, Chrome e Opera browser sotto Ubuntu 12.04.

    CSS : 

    .hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

    HTML :

    <div class="hover_img">
     <a href="#">Show Image<span><img src="images/01.png" alt="image" height="100" /></span></a>
</div>
    • Questo impressionante, e fa ESATTAMENTE quello che voglio, grazie! Ma, io sono in esecuzione in un problema quando è all’interno di una tabella, non mostra la grandezza dell’immagine, perché la dimensione del <td> che non è definito, ma sto assumendo è più piccolo, a causa del collegamento che corrisponde all’immagine. Avete qualche modo per aggirare questo? C’è un modo per l’immagine di “galleggiare” in sostanza, al di sopra del tavolo, e non necessariamente all’interno della tabella?
    • aggiungere queste righe .hover_img a:hover span css… height: 200px; width: 200px; overflow: visible; e mostra cosa @Spartacus38 voluto
    InformationsquelleAutor Naveen Web Solutions
  3. 1

    aggiungere

    .hover_img a:hover span {
    display: block;
    width: 350px;
}

    per mostrare passaggio del mouse l’immagine full size nella tabella cambiare 350 per la tua taglia.

    InformationsquelleAutor gta6cheats.club
  4. 1

    Da w3 schools:

    <style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <img src="/pathtoimage" class="tooltiptext">
</div>

    Suona come su ciò che si desidera

    InformationsquelleAutor Ian Gardner
  5. -6

    Non è possibile fare questo con solo CSS da solo, sarà necessario utilizzare Javascript. 

    <img src="default_image.jpg" id="image" width="100" height="100" alt="" />


<a href="page.html" onmouseover="document.images['image'].src='mouseover.jpg';" onmouseout="document.images['image'].src='default_image.jpg';"/>Text</a>
    InformationsquelleAutor Storm3y

Lascia un commento