Come faccio a realizzare questa operazione con Adobe Dreamweaver?

**QuartuRegna92** · 17-08-2014, 18:55

Buongiorno a tutti gli utenti. Vorrei realizzare un collegamento ipertestuale di questo tipo: dopo aver inserito un'immagine, che è per esempio una scatola o un televisore, e passo il mouse sopra questa diventi meno opaca e appaia il nome "scatola" o "televisore" a seconda dell'oggetto. In altre parole, avete presente quando in Dreamweaver il mouse passa (senza cliccarci sopra) sul collegamento ipertestuale e il colore cambia? Ecco, io vorrei cambiare il colore con una scritta che descriva l'oggetto inserito diminuendo l'opacità. Spero di aver reso l'idea. Questo è l'esempio: http://it.tinypic.com/view.php?pic=2...8#.U_DfJdJdUl8
Grazie.

**cavicchiandrea** · 17-08-2014, 23:12

questo è un esempio veloce usando l'evento hover e spostando l'immagine di sfondo

**QuartuRegna92** · 20-08-2014, 12:44

Originariamente inviata da cavicchiandrea

questo è un esempio veloce usando l'evento hover e spostando l'immagine di sfondo

Si, proprio il primo esempio mi interessa. Come lo realizzo con Adobe Dreamweaver?

**carlomarangoni** · 20-08-2014, 14:54

Originariamente inviata da QuartuRegna92

Si, proprio il primo esempio mi interessa. Come lo realizzo con Adobe Dreamweaver?

Copia il codice della parte che ti interessa e inseriscilo nel codice della tua pagina adatttandolo alle tue esigenze

**QuartuRegna92** · 20-08-2014, 17:43

Ho provato a copiarlo e modificarlo in base alle mie esigenze ma non funge. Potresti dirmi come realizzarlo con Dreamweaver?

**QuartuRegna92** · 21-08-2014, 16:03

Originariamente inviata da cavicchiandrea

questo è un esempio veloce usando l'evento hover e spostando l'immagine di sfondo

In parte ci sono riuscito. Per la comparsa del testo sull'immagine quando passa il mouse? Come hai fatto a metterci il testo a comparsa?

**Prill** · 21-08-2014, 22:15

nell'esempio il testo è inserito all'interno dell'immagine, con lo stato hover viene visualizzata una porzione dell'immagine di sfondo diversa (vai col mouse sull'immagine, premi il tasto destro e scegli visualizza immagine di sfondo).

Un esempio con immagine e testo inseriti direttamente nell'html:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
a.cangiante {
    display:block;
    position:relative;
    width:100px; /* larghezza e altezza saranno quelle dell'immagine */
    height:100px;
}
a.cangiante img {
    opacity:1;
    display:block;
    border:0;
}
a.cangiante span {
    display:block;
    width:100%;
    position:absolute;
    line-height:100px; /* il line-height corrisponderà all'altezza dell'immagine e serve per centrare il testo verticalmente */
    text-align:center;
    top:0;
    left:0;
    z-index:1;
    opacity:0;
}
a.cangiante:hover img {
    opacity:0.5;
}
a.cangiante:hover span {
    opacity:1;
}
-->
</style>
</head>

<body>
<a class="cangiante" href="#"><span>scatola</span><img src="miaimmagine.jpg" width="100" height="100" alt="" /></a>
</body>
</html>

**QuartuRegna92** · 22-08-2014, 16:20

Scusami ancora ma non riesco ancora a cavarne piede. Sono alle prime fasi con il linguaggio html. Dove lo inserisco? Ti posto il codice html su cui sto lavorando:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mezzi di Soccorso</title>
<style type="text/css">
body {
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(sfondomezzi7.jpg);
background-repeat: no-repeat;
}
#contenitore{
width: 300px;
height: 200px;
margin-left: 60px;
margin-top: 300px;
background-image:url(ambulanza.jpg);
background-repeat: no-repeat;
background-position: left;
}
#contenitore span{
/*ambulanza*/
display:block;
width:300px;
height:200px;
position:absolute;
line-height: 200px;
text-align:center;
top:0;
left:0;
z-index:1;
opacity:0;
}
#contenitore:hover{
opacity: 0.5;
}
#contenitore1{
width: 300px;
height: 200px;
background-image:url(internoambulanza.jpg);
background-repeat: no-repeat;
background-position: center;
margin-top: -200px;
margin-left: 430px;
}
#contenitore1:hover{
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
background-position: center;
opacity: 0.5;
}
#contenitore2{
width: 300px;
height: 200px;
background-image:url(prociv.jpg);
background-repeat: no-repeat;
background-position: right;
margin-top: -200px;
margin-left: 800px;
}
#contenitore2:hover{
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
background-position: right;
opacity: 0.5;
}
</style>
</head>

<body>
<div id="contenitore"></div>
<div id="contenitore1"></div>
<div id="contenitore2"></div>
</div>
</body>
</html>

**Prill** · 23-08-2014, 11:35

stai mescolando i due esempi.

Negli esempi di cavicchiandrea hai un'immagine di sfondo che rappresenta un cubo a sinistra e nella parte destra lo stesso cubo semitrasparente e l'aggiunta della scritta. Allo stato normale del div viene visualizzata la parte sinistra dell'immagine, allo stato hover invece quella destra. Se guardi il codice vedrai infatti che le coordinate dello sfondo cambiano.

Nel mio esempio invece l'immagine e il testo, inserito come testo e non graficamente, sono nell'html. Allo stato normale del link l'immagine è opaca e il testo del tutto trasparente. Allo stato hover il testo diventa visibile (mutando la proprietà opacity) e l'immagine diventa semitrasparente (variando sempre l'opacity).

La scelta di un procedimento e dell'altro dipende dalle tue esigenze.

In generale, se l'immagine e il testo rappresentano dei contenuti, e non sono solo elementi decorativi, dovranno stare nell'html (e non nel css).

Puoi anche avere l'immagine come sfondo e il testo nell'html, ma non va comunque bene quanto hai fatto tu perché se vari l'opacity del contenitore quest'ultima avrà effetto su tutto ciò che è al suo interno. In questo caso occorrerà procedere in maniera diversa. Ma per il momento mi sembra inutile spiegarti come fare perché mi pare ci sia già abbastanza confusione senza aggiungere altri codici.

Ti allego una pagina di esempio che riprende il mio esempio precedente con l'aggiunta dell'animazione per la dissolvenza. Ho usato un link come contenitore, ma potrei avere anche un div. L'importante è che tu capisca il criterio

**QuartuRegna92** · 24-08-2014, 12:09

Originariamente inviata da Prill

stai mescolando i due esempi.

Negli esempi di cavicchiandrea hai un'immagine di sfondo che rappresenta un cubo a sinistra e nella parte destra lo stesso cubo semitrasparente e l'aggiunta della scritta. Allo stato normale del div viene visualizzata la parte sinistra dell'immagine, allo stato hover invece quella destra. Se guardi il codice vedrai infatti che le coordinate dello sfondo cambiano.

Nel mio esempio invece l'immagine e il testo, inserito come testo e non graficamente, sono nell'html. Allo stato normale del link l'immagine è opaca e il testo del tutto trasparente. Allo stato hover il testo diventa visibile (mutando la proprietà opacity) e l'immagine diventa semitrasparente (variando sempre l'opacity).

La scelta di un procedimento e dell'altro dipende dalle tue esigenze.

In generale, se l'immagine e il testo rappresentano dei contenuti, e non sono solo elementi decorativi, dovranno stare nell'html (e non nel css).

Puoi anche avere l'immagine come sfondo e il testo nell'html, ma non va comunque bene quanto hai fatto tu perché se vari l'opacity del contenitore quest'ultima avrà effetto su tutto ciò che è al suo interno. In questo caso occorrerà procedere in maniera diversa. Ma per il momento mi sembra inutile spiegarti come fare perché mi pare ci sia già abbastanza confusione senza aggiungere altri codici.

Ti allego una pagina di esempio che riprende il mio esempio precedente con l'aggiunta dell'animazione per la dissolvenza. Ho usato un link come contenitore, ma potrei avere anche un div. L'importante è che tu capisca il criterio

Non so come ringraziarti Prill! Ci sono finalmente riuscito grazie anche e sopratutto a te!

Come lo hai imparato il linguaggio html? Sapresti consigliarmi qualche guida o manuale (possibilmente online e gratuita) per impararlo? Grazie ancora!

Discussione: Come faccio a realizzare questa operazione con Adobe Dreamweaver?

Strumenti discussione

Ricerca discussione

Visualizza

Come faccio a realizzare questa operazione con Adobe Dreamweaver?

Permessi di invio