HTML Thumbnail (mouseover) + Popup immagine

[Kina94]

Come da titolo, vorrei unire due codici html, ma purtroppo sono parecchio nabba e non ci riesco.
Su un sito di altervista, esattamente un gdr (che immagino non supporta il css, quindi evitiamo), volevo inserire un'immagine cliccabile che aprirà in pop-up una pagina del mio blog di altervista. Oltre a renderla cliccabile (già fatto), vorrei che al passaggio del mouse la stessa immagine mi faccia comparire una seconda immagine che scompare al levare il mouse. Quindi un doppio effetto, diciamo.

Il codice che ho per il pop-up è questo:
<a onclick=" window.open('URL PAGINA DEL MIO BLOG','',' scrollbars=no,menubar=no,width=XY, height=XY,resizable=yes,toolbar=no,location=no,status=no')"><img src="URL IMMAGINE CLICCABILE" border="0px" solid="" width="XYpx", height="XYpx"></a>

Mentre il codice per il thumbnail è questo qui:
<a class="thumbnail" ="#thumb"=""><img style="width: XYpx; height: XYpx;" src="URL IMMAGINE CLICCABILE (la stessa del pop-up)"><span> <img style="width: XYpx; opacity: 0.7;" src="IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE"> </span></a>

Il problema è: come faccio a unire i due codici senza che le immagini si ripetano? Nel senso: come faccio a rendere l'immagine cliccabile sia un pop-up esterno che un thumbnail mouse-over?

Vi ringrazio <3

[pix]

Devi unire i due tag <a> facendoli diventare uno solo. Poi aggiungi il resto del secondo pezzo di codice.

Così:

 

<a class="thumbnail" ="#thumb"="" onclick=" window.open('URL PAGINA DEL MIO BLOG','',' scrollbars=no,menubar=no,width=XY, height=XY,resizable=yes,toolbar=no,location=no,status=no')">
  <img style="width: XYpx; height: XYpx;" src="URL IMMAGINE CLICCABILE (la stessa del pop-up)">
  <span> <img style="width: XYpx; opacity: 0.7;" src="IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE"> </span>
</a>

 

Mi sembra che ci sia qualche errore vicino a "#thumb", con tutte quelle virgolette e quegli uguale....

[Kina94]

 

10 minuti fa, pix dice:

Devi unire i due tag <a> facendoli diventare uno solo. Poi aggiungi il resto del secondo pezzo di codice.

Così:

 

<a class="thumbnail" ="#thumb"="" onclick=" window.open('URL PAGINA DEL MIO BLOG','',' scrollbars=no,menubar=no,width=XY, height=XY,resizable=yes,toolbar=no,location=no,status=no')">
  <img style="width: XYpx; height: XYpx;" src="URL IMMAGINE CLICCABILE (la stessa del pop-up)">
  <span> <img style="width: XYpx; opacity: 0.7;" src="IMMAGINE CHE COMPARE AL PASSAGGIO DEL MOUSE"> </span>
</a>

 

Mi sembra che ci sia qualche errore vicino a "#thumb", con tutte quelle virgolette e quegli uguale....

 

Waah *___* ti ringrazio tantissimo, Pix. Mi consigli quindi di levare quelle virgolette di mezzo? Ora provo a vedere se con il tuo codice funziona. <3

EDIT: Nope. Niente. La seconda immagine (quella che dovrebbe comparire con il mouse-over) diventa una semplice immagine accanto alla prima immagine, solo che entrambe diventano cliccabili. Se hai tempo, prova a farmi un esempio del genere con due immagini random e un pop-up che indirizzi a un sito random. Perchè quando elimino tutte quelle virgolette di cui mi parlavi, entrambe le immagini smettono di essere cliccabili. (scusa per il disturbo)

[pix]

così a occhio il codice doveva essere questo:

 

<a class="thumbnail" href="#thumb" onclick=.....

ma non ha molto senso.... perché non c'è un elemento con id="thumb".

a meno che non ci sia un javascript che intercetta il click.

Le istruzioni di stile per il rollover sono nella classe "thumbnail", dovresti farci vedere anche quelle.

E se c'è anche il javascript.

Un esempio funzionante magari dopo te lo faccio, ora non riesco (pronta la pappa!)

[Kina94]

38 minuti fa, pix dice:

così a occhio il codice doveva essere questo:

 

<a class="thumbnail" href="#thumb" onclick=.....

ma non ha molto senso.... perché non c'è un elemento con id="thumb".

a meno che non ci sia un javascript che intercetta il click.

Le istruzioni di stile per il rollover sono nella classe "thumbnail", dovresti farci vedere anche quelle.

E se c'è anche il javascript.

Un esempio funzionante magari dopo te lo faccio, ora non riesco (pronta la pappa!)

Eh, magari.. fai pure con calma, basta che mi dai una mano XD è sufficiente un codice che possa poi modificare a mio piacimento, basta che compaia un box di X dimensioni con l'immagine al passare il mouse sopra. E grazie ancora <3

[pix]

Prova così.

Incolla il codice nel punto dove deve comparire l'immagine.

Ho messo larghezza 100px e altezza 200px. Correggi con le dimensioni esatte delle immagini (che devono essere grandi uguali).

Il percorso deve essere qualcosa tipo 'img/tuaimmagine1.jpg' e simile con la seconda.

 

<style type="text/css">
	.immaginelink {
		width: 100px;
		height: 200px;
		display:block;
		background-image: url('PERCORSO-TUA-IMMAGINE-1');
	}
	.immaginelink:hover {
		background-image: url('PERCORSO-TUA-IMMAGINE-2');
	}
</style>

<a href="#" class="immaginelink" onclick="window.open('URL PAGINA DEL MIO BLOG','','scrollbars=no,menubar=no,width=XY, height=XY,resizable=yes,toolbar=no,location=no,status=no')"></a>

 

Il pop-up fatto così probabilmente ti verrà bloccato dalla maggior parte dei browser. Ti conviene far aprire semplicemente il tuo blog in un'altra finestra (basta togliere "onclick" ed il resto, mettendo un target="_blank" e sostituendo # con l'indirizzo completo del blog).

Oppure potresti usare una finestra modale con dentro un iframe, ma si va un po' più sul complicato mi sa....