Banner espandibili

[Many17]

Nel link http://www.constile.org/tips/banner_...ili_con_i_css/ spiega come espandere un banner al passaggio del mouse.
Fin qui ci siamo, però vi scrivo ciò che dovrei fare io.

Ad es. ho due foto, "fotopippo.jpg" e "fotopippogrande.jpg".
"fotopippo.jpg" è la piccola immagine che mi serve da anteprima, mentre "fotopippogrande.jpg" è l'immagine ingrandita.
Vorrei che passando con il mouse sopra "fotopippo.jpg" venga visualizzata in una posizione che decido io, l'immagine "fotopippogrande.jpg".

Ho provato in alcuni modi ma non sono troppo affidabili.
Potete aiutarmi?

Dimenticavo che il doctype è strict!

[Mutato]

Crea un div display:none; posizionato dove vorresti far comparire l'img grande, poi con JS onMouseOver (credo) cambi la proprieta style di quel div in display:block; ed ecco che si vedra'!!

Forum di scripting.

[Many17]

Grazie Mutato per la risposta, comunque ho provato a farlo senza JS, guarda nel sito di prova che sto facendo: www.movingart.it
Con Explorer funziona bene, infatti se passi con il mouse sopra la piccola foto vedrai comparire sulla destra la foto grande.
Il problema è con Netscape (la v 7.02) e se passi con il mouse sopra l'immagine non vedrai comparire nulla.
Non capisco perchè.
Intanto se puoi darci un'occhiata (ti confesso che con JS non so come si fa) posto qui IL CODICE CSS e XHTML in questione:

XHTML
<div id="foto1">[img]immagini/1.jpg[/img]</div>

CSS
#foto1 { height:25px; width:25px; position: absolute; right: 50px; top: 50px;cursor: pointer; cursor: hand; }
#foto1 img { border:none;cursor: pointer; cursor: hand; }
#foto1 a {
position: relative; right: 590px; top: 345px;
display:block;
cursor: pointer;
cursor: hand;
}
#foto1 a:hover img , #foto1 a:active img { display:none;cursor: pointer;
cursor: hand; }
#foto1 a:hover , #foto1 a:active {
display: block;
height:142px; width:430px;
background:url(immagini/foto1g.jpg);
position: absolute;
left: -395px;
top: 324px;
cursor: pointer;
cursor: hand;
}

Grazie!
Many

[pacovox]

Prova a guardare questo, funziona con IE 6.0 e Mozilla 1.4, quindi credo anche con Netscape.
Ciao
http://www.pacovox.it/test/test.html

[Many17]

Ciao Pacovox, anch'io sono riuscita a farlo funzionare!
Sinceramente dopo ore che provavo, ho avuto un'illuminazione... forse tu hai fatto prima di me comunque voglio mostrarti come ci sono riuscita.
Intanto mi faresti un gran favore se provi a guardare sul solito sito di prova www.movingart.it e a dirmi se finalmente anche da te funziona l'odiato banner. Mi puoi indicare con che browser li visualizzi? (così me ne rendo conto).

Ed ecco il codice xhtml:
<div id="foto1">[img]immagini/foto1g.jpg[/img]</div>

css:
#foto1 {
position: absolute; top: 280px; left: 160px; height:25px; width:25px; cursor: pointer; cursor: hand;
}
#foto1 a {
background-image: url(immagini/1.jpg); height:25px; width:25px; display: block; position: absolute; top: 280px; left: 160px;cursor: pointer; cursor: hand;
}
#foto1 a:hover {
background-image: url(immagini/1.jpg); display: block; position: absolute; top: 280px; left: 160px; border: none;cursor: pointer; cursor: hand;
}
#foto1 a img{
height:0px; width:0px;border-width:0px;cursor: pointer; cursor: hand;
}
#foto1 a:hover img, #foto1 a:active img{
position: absolute; top: -18px; left: 193px; width:430px; height:142px;cursor: pointer; cursor: hand;
}

Così sembra funzionare.

Domanda, se clikko sulla piccola immagine rimane visualizzata la grande immagine sulla destra grazie a "#foto1 a:active img" però questo accade solo su Explorer, su Netscape no come mai?

Anche il tuo codice funziona ma come hai sistemato il css visto che non posso vederlo dal link di prova che mi hai dato?

Attendo notizie!

[Mutato]

Sia con Opera7 che IE6 vedo l'immagine grande fuori dal bordo del sito... per parte sullo sfondo grigio. Ad una risoluzione di 1024x768 px se ho il browser aperto a tutta finestra e' ok... ma ad esempio io navigo con una finestra piu' piccola, intorno a 800x600 e vedo quindi l'immagine fuori dallo schermo.

Riduci un po' la tua finestra e ti accorgi di cio' che sto dicendo...

[Many17]

Grazie Mutato, ora sono proprio ko
Hai ragione infatti a risoluzioni inferiori funziona tutto a parte quello schifo di immaginetta
Non so il perchè, come posso fare?
Credevo di avere quasi risolto e invece addio illusioni!
Illuminami
Many

[pacovox]

Questo è il ccs che ho usato io:

#box {
position: absolute;
top: 20px;
left: 30px;
height: 142px;
width: 500px;
background-color: #000000;
}

.miniatura {
margin: 58px 0 0 20px;
}

a:hover {
background-image: url(foto1g.jpg);
display: block;
height: 142px;
width: 500px;
}

xHtml:

<div id="box">
[img]1.jpg[/img]
</div>

La posizione dell'immagine grande l'ho regolata graficamente e non con i css. Io ho messo uno sfondo nero, ma puoi mettere lo sfondo che vuoi.
Ciao