Ciao, sto creando un sito di automobili per esercitarmi sulla programmazione web.
Ho creato una pagina dove vengono elencate le auto disponibili (prese da un web server). In questa pagina vengono mostrate solamente le immagini delle automobili e al click dell'utente avevo intenzione di far vedere le specifiche in dettaglio. Io vorrei che le specifiche siano visualizzate sotto l'immagine, invece, quando clicco non accade. Posto il codice interessato:
Inoltre, il codice JavaScript che ho scritto per nascondere gli elementi esegue le medesime funzioni, solo che getElementById accetta solamente un ID. Avete suggerimenti per scrivere una funzione JavaScript che funzioni per id multipli? Scusate per il codice incasinato
Ho creato una pagina dove vengono elencate le auto disponibili (prese da un web server). In questa pagina vengono mostrate solamente le immagini delle automobili e al click dell'utente avevo intenzione di far vedere le specifiche in dettaglio. Io vorrei che le specifiche siano visualizzate sotto l'immagine, invece, quando clicco non accade. Posto il codice interessato:
PHP:
<!DOCTYPE html>
<html>
<head>
<link href="/mauro/Auto Sportive/luxury_style.css" type="text/css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet'>
<body>
<div id = "intro">
<h3 id="list">Le nostre Automobili</h3>
<p> Clicca sulle immagini per avere informazioni dettagliate</p>
</div><!--intro-->
<div id="main">
<?php include "luxury_auto.php";
echo"<div id ='AudiR8'>";
echo "<img onclick ='ShowAudi()' src = 'https://i.imgur.com/ZEXzBeF.jpg' width='450' height = '310'";
echo"</div>";
echo"<div id='HiddenAudiR8' style='display:none'";
foreach($cars as $modello => $prezzo){
$car_price = current($cars);
$car_model = key($cars);
if($car_model == "Audi R8"){
echo "<br>"."Modello: ".$car_model;
echo "<br>"."Prezzo: ".$car_price."€";
echo "<br>"."Colore: Nero";
echo "<br>". "Anno: 2017";
break;
}
else{
next($cars);
}
}
echo"</div>";//Audi R8
?>
<?php include "luxury_auto.php";
echo"<div id ='Ferrari458'>";
echo "<img onclick ='ShowFerrari()' src = 'http://www.exoticcarhacks.com/wp-content/uploads/2016/10/458italia.jpg' width='450' height = '310'";
echo"</div>";
echo"<div id='HiddenFerrari458' style='display:none'";
foreach($cars as $modello => $prezzo){
$car_price = current($cars);
$car_model = key($cars);
if($car_model == "Ferrari 458"){
echo "<br>"."Modello: ".$car_model;
echo "<br>"."Prezzo: ".$car_price."€";
echo "<br>"."Colore: Rosso";
echo "<br>". "Anno: 2018";
break;
}
else{
next($cars);
}
}
echo"</div>";//HiddenFerrari458
?>
</div> <!--main div-->
<script>
function ShowAudi(){
var tmp = document.getElementById("HiddenAudiR8");
if(tmp.style.display == "none"){
tmp.style.display = "block";
}
else{
tmp.style.display = "none";
}
}
function ShowFerrari(){
var tmp = document.getElementById("HiddenFerrari458");
if(tmp.style.display == "none"){
tmp.style.display = "block";
}
else{
tmp.style.display = "none";
}
}
</script>
</body>
</head>
</html>
CSS:
#AudiR8{
display:inline-block;
}
#Ferrari458{
display:inline-block;
margin:20px;
}