far apparire un'immagine passando su un link

**nourdine** · 08-06-2006, 15:50

allora io ho il seguente css

#padre{bla bla bla}

#padre a img{display: none;}

e il seguente html

<div id="padre">

passa qui è apparirà un'immagine[img]xxx.jpg[/img]

passa qui è apparirà un'immagine[img]yyy.jpg[/img]

</div>

Ora voglio che quando si va sopra un certo link testuale appaia l'immagine contenuta in quel link.

perche il segunte snippet non funziona?

passa qui è apparirà un'immagine[img]xxx.jpg[/img]

**Mich_** · 08-06-2006, 16:34

Il CSS fa sparire l'immagine contenuta nel link: infatti display:none; fa in modo che l'oggetto non venga visualizzato.

Comunque quello che chiedi si realizza anche senza JS, con solo CSS (e le pseudoclassi)
Esempio:

codice:

 #padre{bla bla bla}
#padre a:link img { display: none; }
#padre a:hover img { display: inline; }

**nourdine** · 08-06-2006, 16:46

MA SAI CHE HAI RAGIONE?

e pensare che sono un re dei css! il fatto è che per queste cose uno di solito pensa a javascript e mai ai css. Di qui il frasone in rosso sotto i miei messaggi a favore di un uso massivo css. Sono caduto nella trappola anch'io. Che mona.

**nourdine** · 08-06-2006, 16:57

e ti pareva che quel cesso di IE non permette tale finezza css. Niente da fare: firefox si, opera si, IE NO (come sempre)

**Mich_** · 08-06-2006, 17:15

Dipende da come vengono usati i CSS.
Le pseudoclassi in IE funzionano solo sui link (tag <a> e <area>).

Se e` un problema di pseudoclassi, si puo` ovviare con il JS (da collegare con commento condizionale - andava di moda un libreria chiamata IE7), oppure con un uso opportuno del tag <a>.
Se invece e` un problema di box-model a volte basta passare a XHTML Strict, e anche IE fa il bravo.

PS: visto che JS non c'entra piu`, sposto in CSS.

**nourdine** · 08-06-2006, 19:04

no il problema è solo che non mostra l'immagine (in realtà è un div con testo) quando passo sopra il link. che faccio?

**Mich_** · 09-06-2006, 08:39

Posta il codice (HTML + CSS + DTD). Oppure un link alla pagina.

**nourdine** · 09-06-2006, 08:53

ecco il link man.

http://nourdine.altervista.org/tooltip.html

vedi se si può modificare il codice in modo che anche IE sia ingrado di fare il suo lavoro

**Mich_** · 09-06-2006, 09:36

Io non vedo errori, ma sistemerei in maniera diversa.
HTML

codice:

<body>
<div class="container">
  <a class="prod" href="http://www.biovita.com/product_item.asp?id=85" target="_blank">
    [img]cla.gif[/img]
    <p class="pop">ecco la descrizione tipo tooltip per questo prodotto.
       Ti piace? Peccato che IE non la visualizza quando vai sopra l'immagine col mouse</p>
  </a>
</div>
</body>

CSS

codice:

html, body {
  font-family: georgia;
  font-size: 100%;
  line-height: 2em;
}
.container { 
  ...
} 
.prod {   
  display: block;
  margin: 0;
  float: left;
  border: 4px solid blue; 
  height: 150px;
  width: 105px;  
} 
.prod .pop, .prod:link .pop  {   
  border: 1px solid #97C104;
  text-align: left;
  padding: 5px;
  background: #F4FECF;   
  width: 90px;
  position: absolute;
  top: 130px;
  left: 60px;
  display: none;
  font-family: arial;
  color: green;
  font-size: smaller;
  line-height: 1.2em;
} 
.prod:hover .pop  {   
  display: block;
}

Rimane il problema del position: absolute del .pop, che potrebbe venir messo in un punto non voluto (in qualche browser il position:absolute e` piu` forte del fatto di inserire un blocco dentro un altro).
Prova anceh con un position: relative; e z-index alto

**nourdine** · 09-06-2006, 09:40

ma vuoi dirmi che con IE riesci a vedere il tooltip?

Discussione: far apparire un'immagine passando su un link

Strumenti discussione

Ricerca discussione

Visualizza

far apparire un'immagine passando su un link

Permessi di invio