Vai al contenuto

Benvenuto nella community di Italiamac Forum

Guest Image

Benvenuto su Italiamac, la più grande comunità AMUG italiana riconosciuta da Apple. La consultazione è libera. Se vuoi anche partecipare attivamente alle discussioni pubblicando post e messaggi puoi iscriverti gratuitamente, avrai molti vantaggi:

  • Pubblicare post, messaggi e richieste di aiuto
  • Fare amicizia e usare i messaggi privati fra utenti
  • Pubblicare annunci di vendita di usato
  • Usare tutte le funzioni della community

ISCRIVITI GRATIS


Change Mode






HTML Thumbnail (mouseover) + Popup immagine


Recommended Posts

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

Link di questo messaggio
Condividi su altri siti

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....

An  a tuesday keeps the doctor away.

proud member of < noi finti professionisti > club - tessera 044

Link di questo messaggio
Condividi su altri siti

 

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)

Modificato da Kina94
EDIT
Link di questo messaggio
Condividi su altri siti

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!)

An  a tuesday keeps the doctor away.

proud member of < noi finti professionisti > club - tessera 044

Link di questo messaggio
Condividi su altri siti
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

Link di questo messaggio
Condividi su altri siti

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....

 

 

An  a tuesday keeps the doctor away.

proud member of < noi finti professionisti > club - tessera 044

Link di questo messaggio
Condividi su altri siti

Rispondi e partecipa alla discusione

Puoi rispondere subito e iscriverti successivamente. If you have an account, sign in now to post with your account.

Ospite
Rispondi a questa discussione...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Contenuti simili

    • Da federasta
      Ciao ragazzi,
       
      ultimamente mi compare un pop-up come in figura, in alcune pagine: siccome non mi sembra proprio affidabile come messaggio, mi sapreste chiarire la cosa ed eventualmente come risolverla?

      Grazie 😊

    • Da PacMac68
      Salve a tutti.
      Per cominciare vi riporto la versione del mio iMac, che è uno Snow Leopard 10.6.8.
       
      Di recente, in vista dell'inizio della stagione 2014 di F1, mi sono iscritto al sito ufficiale Formula 1 per potere seguire in diretta i tempi delle prove grazie al "Live Timing", il quale viene eseguito in una finestra sandbox, ma quando provo ad utilizzarlo mi da l'errore.
      Vi propongo qui di seguito lo script dell'errore:
       
      Java Plug-in 1.6.0_65
       
      Uso della versione JRE 1.6.0_65-b14-462-10M4609 Java HotSpot 64-Bit Server VM
       
      ...
       
      eccezione: JAR manifest requested to run in sandbox only: http:// live-timing.formula1.com/java70/f1app.jar.
      java.lang.SecurityException: JAR manifest requested to run in sandbox only: http:// live-timing.formula1.com/java70/f1app.jar
      at com.sun.deploy.security.DeployManifestChecker.verify(DeployManifestChecker.java:106)
      at com.sun.deploy.security.DeployManifestChecker.verify(DeployManifestChecker.java:84)
      at com.sun.deploy.security.TrustDecider.isAllPermissionGranted(TrustDecider.java:319)
      at com.sun.deploy.security.TrustDecider.isAllPermissionGranted(TrustDecider.java:280)
      at com.sun.deploy.security.TrustDecider.isAllPermissionGranted(TrustDecider.java:270)
      at sun.plugin2.applet.Plugin2Manager.isAppletSigned(Plugin2Manager.java:3289)
      at sun.plugin2.applet.Plugin2Manager.createApplet(Plugin2Manager.java:3207)
      at sun.plugin2.applet.Plugin2Manager$AppletExecutionRunnable.run(Plugin2Manager.java:1536)
      at java.lang.Thread.run(Thread.java:695)
       
      Eccezione: java.lang.SecurityException: JAR manifest requested to run in sandbox only: http:// live-timing.formula1.com/java70/f1app.jar
       
      Sapete dirmi per favore quale è il problema e come posso risolverlo?
      Grazie,
      PacMac68.
       
    • Da fede4everry
      Buongiorno a tutti come alcuni sapete sto facendo un sito web cercando di riprodurre quello di Apple.com.
      Il sito l'ho incominciato a fare. Sfondo bianco Scritte con stessa misura e tipologia, ma ho dei problemi per fare la barra grigia in alto!
      Sto usando iWeb 08 sul mio iMac.
      Dopo 20 minuti di ricerca su google ho trovato una stringa CSS e una HTML che ricreano senza immagini la toolbar, il mio problema è questo:
      Come insreisco la stringa CSS e quella HTML in uno HTML Snippet?
      Aiutatemi vi prego sono disperato!
       
       
       
      P.S. Se avete bisogno di vedere la stringa ve la posto.
      Grazie a tutti quelli che risponderanno!
       
    • Da fede4everry
      Buongiorno a tutti,
      è da qualche giorno che cerco un tema uguale a quello di www.apple.com.
      Vi spiego meglio vorrei fare un sito web da condividere in rete locale con Apache. Fino ad ora mi sono arrangiato con iWeb e XAMPP, ora però vorrei rinnovare il sito e mi piacerebbe che il sito fosse come quello di Apple:
      1.tasti grigi in alto
      2.Slide foto con sotto i pallini per scegliere la figura
      Ed altri particolari così...
      Mi chiedo come posso farlo? Visto che non mi voglio mettere troppo su una cosa così vorrei o un tema iWeb pre costruito, o un file che apro e modifico con  qualche programma. Grazie per il supporto.
       
      Fede
      (per sbaglio ho creato una doppia discussione)
  • Annunci casuali

×
×
  • Crea Nuovo...

Info

Questo sito utilizza cookies, anche di terze parti e profilazione. Utilizzando il sito acconsenti al loro impiego e dichiari di aver letto e di accettare: Privacy Policy Termini di utilizzo