Lezione 10

Sintesi della lezione

Le slide descrivono come abbiamo sviluppato l'esercizio che utilizza la struttura if...else in Javascript.

Ecco HTML che abbiamo prodotto lavorando insieme:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bottone personalizzato</title>
<link href="../css/Stili.css" rel="stylesheet" type="text/css">
<style>
	/* Contenitore di immagine e bottoni*/
	.contenitore {
	  width: 60%;
	  margin: 15px auto;
	  text-align: center;
	}
	/* stilizzazione dell'immagine */
	.contenitore img{
	  /* massima larghezza quella del contenitore*/
	  max-width: 100%; 
	  height: auto;
	  /* Stato iniziale completamente trasparente*/
	  opacity: 0;
	  /* Se l'immagine è più stretta del contenitore viene collocata al centro*/
	  margin: 0 auto 15px;
	  display: block;
	  /* Il cambio di proprietà genera una transizione di un secondo */
	  transition: all 1s;
	}

	.contenitore button {
	  /* Il bottone non ha nè bordo nè colore di sfondo e definisco un margine */
	  border: 0;
	  background-color: transparent;
	  margin: 15px 10px 0 0;
	  /* bordo circolare */
	  border-radius: 50%;
	  /* immagine di sfondo */
	  background-image: url(http://didattica.brunomigliaretti.com/userfiles/image/on-off.png);
	  /* posizione iniziale dell'immagine di sfondo */
	  background-position = "top left";
	  /* dimensioni del bottone*/
	  width: 80px;
	  height: 80px;
	  /* Ombreggiatura */
	  box-shadow: black 0 0 20px;
	  /* Puntatore del mouse (manina) */
	  cursor: pointer;
	}

	.contenitore button:focus {
	  /* Elimina l'outline quando il pulsante ha il focus*/
	  outline: none;
	}
</style>
</head>

<body>

<div class="contenitore"> <img id="foto" src="http://lorempixel.com/1024/640" alt="Immagine casuale">
    <button onclick="accendiSpegni(this)" ></button>
</div>

<script>
	// Spegne/accende l'immagine
	function accendiSpegni (pippo) {
	  // Se il background del bottone è allineato a destra 
	  // (pulsante acceso) 
	  if (pippo.style.backgroundPosition == "right top") {
		// lo allineato a sinistra (spento)
		pippo.style.backgroundPosition = "left top";
		// e rendo l'immagine completamente trasparente
		document.getElementById('myImage').style.opacity = 0;
		// altrimenti ...
	  } else {
		// lo allineo a destra (acceso)
		pippo.style.backgroundPosition = "right top";
		// e rendo l'immagine completamente opaca
		document.getElementById('myImage').style.opacity = 1;
	  }
	}	
	/* Esercizio completato autonomamente in classe: Aggiungere un bottone che cambi 
	l'immagine utilizzando questa funzione */
	function cambiaImmagine() {				
		document.getElementById("foto").src="http://lorempixel.com/1024/640";
	}
</script>
</body>
</html>

In classe ho poi chiesto di provare ad aggiungere un bottone identico a quello già inserito che cambi l'immagine utilizzando la funzione cambiaImmagine() già predisposta.

Infine ecco l'esercizio su Code Pen. È la versione completa a due bottoni che utilizza , in più, gli eventi onmousedown e onmouseup per modificare lo stato del secondo bottone con questi due eventi anzichè con onclick.

Torna all'inizio