Problema effetto estensione/riduzione di un elemento in dreamweaver.

**daniar** · 05-04-2014, 18.20.07

Salve!!
ho un problema con questo effetto ,in pratica ho inserito una foto nella pagina e le ho applicato un comportamento da far apparire un div nascosto che contiene stessa foto ma ingrandito,il problema è che provandolo in rete,effetto cioè cliccando sull'immagine piccola viene eseguita solo una volta e se ci provo di nuovo,finche non riavvio la pagina non lo fa più,mi dareste una mano perfavore almeno per capire del perchè questoanomalo comportamento?

**NLSweb** · 02-05-2014, 23.06.06

codice html

Codice HTML:

<div id="icona">
 <div class="nascosto"></div>  
</div>

codice css

Codice:

#icona{
width:100px;height:100px; /* inserisci le dimensioni che vuoi */
background:url('indirizzo immagine piccola');
background-size:100px 100px; /* mantieni le dimensioni di cui sopra */
background-repeat:no-repeat;
}

#icona:hover .nascosto{
width:500px;height:500px; /* inserisci le dimensioni che vuoi */
background:url('indirizzo immagine grande');
background-size:500px 500px; /* mantieni le dimensioni di cui sopra */
background-repeat:no-repeat;
display:visible;
}

in questo esempio quandi passi con il mouse sull'immagine piccola , compare quella grande.
ma ci sono anche molti altri metodi..dipende da come hai sviluppato il codice..

**daniar** · 05-05-2014, 13.27.35

Ti ringrazio molto ma non è comportamento che cerco,più precisamente il famoso effetto dissolvenza di dreamweaver ma ho salvato il codice che mi hai suggerito e mi piace molto visto che non è in java.

**NLSweb** · 08-05-2014, 20.46.58

mi sembra di capire che hai bisogno di un effetto dissolvenza con java , allora puoi provare questo con JQuery
(N.B.: puoi modificare a tuo piacimento dimensioni e posizioni e il background invece di un fondo colorato come in esempio puoi usare l'immagine che vuoi; il numero alla funzione show rappresenta i millisecondi della dissolvenza 1000=1sec)

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script>
$(document).ready(function(){
  $("#foto").hide();
  $("#icona").click(function(){
    $("#foto").show(1000);
  });
});
</script> 
<style>
#icona{background:red;width:100px;height:100px;position:relative;top:0px;left:0px;}
#foto{background:red;width:300px;height:300px;position:relative;top:0px;left:0px;margin:50px;}
</style>
</head>
 
<body>
<div id="icona"></div>
<div id="foto"></div>

</body>
</html>

(p.s. se hai bisogno di far apparire e scomparire la foto basta aggiungere una variabile di controllo nella funzione click)

..anzi per far apparire e scomparire , usa semplicemente toggle invece di show

**daniar** · 10-05-2014, 04.24.57

Originalmente inviato da NLSweb

mi sembra di capire che hai bisogno di un effetto dissolvenza con java , allora puoi provare questo con JQuery
(N.B.: puoi modificare a tuo piacimento dimensioni e posizioni e il background invece di un fondo colorato come in esempio puoi usare l'immagine che vuoi; il numero alla funzione show rappresenta i millisecondi della dissolvenza 1000=1sec)

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script>
$(document).ready(function(){
  $("#foto").hide();
  $("#icona").click(function(){
    $("#foto").show(1000);
  });
});
</script> 
<style>
#icona{background:red;width:100px;height:100px;position:relative;top:0px;left:0px;}
#foto{background:red;width:300px;height:300px;position:relative;top:0px;left:0px;margin:50px;}
</style>
</head>
 
<body>
<div id="icona"></div>
<div id="foto"></div>

</body>
</html>

(p.s. se hai bisogno di far apparire e scomparire la foto basta aggiungere una variabile di controllo nella funzione click)

..anzi per far apparire e scomparire , usa semplicemente toggle invece di show

Ti ringrazio molto,ho provato questo codice ma più che dissolvenza sembra un estensione /riduzione ed è l'unica cosa che dreamweaver lo crea senza problemi,a me serve invece dare un effetto di pura dissolvenza che è posizionata sopra un div,che quando viene richiamata,appaia con un effeto di dissolvenza abbastanza lenta ,ovviamente devo anche poterlo chiudere allo stesso modo.
Ma grazie lo stesso,più che altro volevo capire come mai dreamweaver ha questa funzione ma fa caprici e se c'è era un modo per risolverlo.

10-05-2014, 10.41.07

Prova così:

Codice HTML:

<div id="contenitore">
  <div id="contenuto"></div>

Codice:

#contenitore {
    // ... ... ...
}
#contenuto {
  background-image: url ('bla bla bla');
  background-size: 100% 100%;
  position: absolute; 
  opacity: 0;
  width: 0px;
  height: 0px;
  transition: 1s all ease;
}
#contenitore:hover #contenuto {
  opacity: 1;
  width: 200px;
  height: 200px;
  transition: 1s all ease;
}

Questo dovrebbe fare una dissolvenza in entrata e in uscita dell immagine.
Poi te lo adatti, ad esempio lo vuoi al click cambi "#contenitore:hover" in "#contenitore.cliccato" e con javascript aggiungi e togli quella classe:

Codice:

document.getElementById("contenitore").onclick = function () {
  this.className = (this.className.indexOf("cliccato") == -1 ? this.className + " cliccato" : this.className.replace (" cliccato", "");
};

Ps
Java è DIVERSO da JavaScript
http://java.com/it/download/faq/java_javascript.xml

**daniar** · 10-05-2014, 13.04.37

Originalmente inviato da tampertools

Prova così:

Codice HTML:

<div id="contenitore">
  <div id="contenuto"></div>

Codice:

#contenitore {
    // ... ... ...
}
#contenuto {
  background-image: url ('bla bla bla');
  background-size: 100% 100%;
  position: absolute; 
  opacity: 0;
  width: 0px;
  height: 0px;
  transition: 1s all ease;
}
#contenitore:hover #contenuto {
  opacity: 1;
  width: 200px;
  height: 200px;
  transition: 1s all ease;
}

Questo dovrebbe fare una dissolvenza in entrata e in uscita dell immagine.
Poi te lo adatti, ad esempio lo vuoi al click cambi "#contenitore:hover" in "#contenitore.cliccato" e con javascript aggiungi e togli quella classe:

Codice:

document.getElementById("contenitore").onclick = function () {
  this.className = (this.className.indexOf("cliccato") == -1 ? this.className + " cliccato" : this.className.replace (" cliccato", "");
};

Grazie,a leggere il codice è proprio quello che cercavo ma non sono riuscito ad impostarlo correttamente a parte un tag div con la chiusura mancante non capisco (" cliccato", "") ,per il resto se mi puoi mettere un codice non separato magari risolvo.

10-05-2014, 13.10.50

La chiusura l'avevo dimenticata...
Quella parte che non capisci serve per togliere la classe al div quando ci si clicca sopra.

Ti da errori nella console?

**daniar** · 10-05-2014, 13.45.27

errori no,ma penso,anzi sono sicuro che non ho messo i pezzi di codice nel posto giusto ,i dive con codice html e gli attributi che mi ha dato non si vedono proprio quando lo provo online.

**NLSweb** · 10-05-2014, 15.58.37

Penso di aver capito che effeto vuoi , prova questo codice in JQuery

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#foto").hide();
$("#icona").click(function(){
$("#foto").fadeToggle(3000);
});
});
</script>
<style>
#icona{width:100px;height:100px;background:green;}
#foto{width:300px;height:300px;background:green;}
</style>
</head>
<body>
<div id="icona"></div>
<div id="foto"></div>
</body>
</html>

10-05-2014, 19.30.17

Daniar, posso avere il link della pagina?

**daniar** · 11-05-2014, 10.48.15

Originalmente inviato da NLSweb

Penso di aver capito che effeto vuoi , prova questo codice in JQuery

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#foto").hide();
$("#icona").click(function(){
$("#foto").fadeToggle(3000);
});
});
</script>
<style>
#icona{width:100px;height:100px;background:green;}
#foto{width:300px;height:300px;background:green;}
</style>
</head>
<body>
<div id="icona"></div>
<div id="foto"></div>
</body>
</html>

Grandioso,è proprio quello che cercavo,Grazie mille.

Originalmente inviato da tampertools

Daniar, posso avere il link della pagina?

Certo tampertools ,anche se amico NLSweb mi ha risolto il problema ,mi interessa molto anche la tua soluzione.
http://www.daniar.altervista.org/dissolvenza2.html

Ragazzi siete fantastici,grazie a tutti e due :)

Discussione: Problema effetto estensione/riduzione di un elemento in dreamweaver.

LinkBack

Strumenti discussione

Display

Problema effetto estensione/riduzione di un elemento in dreamweaver.

Regole di scrittura