Problema in una complicazione dello script per il cambio immagine al clic

**Giampli** · 12-01-2013, 21:17

Allora, sto creando una pagina web, in cui sono presenti 3 bottoni. Una volta cliccato uno, deve cambiare immagine, mentre gli altri devono tornare all'immagine di default. Quindi ho pensato di fare una cosa del genere:

Codice html:

codice:

<div
style="
height:678px;
width:233px;">
	<a href="#1" onclick="function changeimage(var image=bottone1; )">
		
	</a>
	<a href="#2" onclick="function changeimage(var image=bottone1; )">
		
	</a>
	<a href="#3" onclick="function changeimage(var image=bottone1; )">
		
	</a>
</div>

E qua per il javascript, incaricato di cambiare il tutto:

codice:

function changeimage()
{
if (image=="bottone1")
{
document.getElementById('bottone1').setAttribute('src', "/image/bottoneon.png");
document.getElementById('bottone2').setAttribute('src', "/image/bottone.png");
document.getElementById('bottone3').setAttribute('src', "/image/bottone.png");
}
else if (image=="bottone2")
{
document.getElementById('bottone1').setAttribute('src', "/image/bottone.png");
document.getElementById('bottone2').setAttribute('src', "/image/bottoneon.png");
document.getElementById('bottone3').setAttribute('src', "/image/bottone.png");
}
else (image=="bottone3")
{
document.getElementById('bottone1').setAttribute('src', "/image/bottone.png");
document.getElementById('bottone2').setAttribute('src', "/image/bottone.png");
document.getElementById('bottone3').setAttribute('src', "/image/bottoneon.png");
}
}

Peccato che non funzioni alcun metodo. Il mio problema è far tornare il bottone di default quando ne viene premuto un altro, altrimenti con una cosa semplice me la cavavo, ma si accendevano tutti e tre insieme (scusatemi per eventuali errori, conosco abbastanza bene html e css, ma di javascript sono veramente inesperto)

**carlomarx** · 12-01-2013, 22:31

Originariamente inviato da Giampli
conosco abbastanza bene html e css

Allora usa quelli!!!

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">

ul.lista-bottoni li {
	list-style-type: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

ul.lista-bottoni input[type="radio"] {
	display: none;
}

ul.lista-bottoni label {
	display: block;
	width: 300px;
	height: 300px;
	background: #ffffff url("http://www.clker.com/cliparts/3/8/b/a/11971212312045077795webmichl_powerbutton_2_states_%28_on_off_%29.svg.med.png") no-repeat left top;
	cursor: pointer;
}

ul.lista-bottoni input[type="radio"]:checked ~ label {
	background: #ffffff url("http://www.clker.com/cliparts/8/8/c/0/1197121244407718078webmichl_powerbutton_2_states_%28_on_off_%29_1.svg.med.png") no-repeat left top;
}

</style>

</head>
<body>

<form name="tuomodulo" method="get" action="test.php">

<ul class="lista-bottoni">
	[*]<input type="radio" name="bottone" id="btn_1" /><label for="btn_1"></label>
	[*]<input type="radio" name="bottone" id="btn_2" /><label for="btn_2"></label>
	[*]<input type="radio" name="bottone" id="btn_3" /><label for="btn_3"></label>[/list]

</form>

</body>
</html>

Discussione: Problema in una complicazione dello script per il cambio immagine al clic

Strumenti discussione

Ricerca discussione

Visualizza

Problema in una complicazione dello script per il cambio immagine al clic

Permessi di invio