11/04/2021, 10:22
(Questo messaggio è stato modificato l'ultima volta il: 11/04/2021, 10:40 da rage75.)
Ciao a tutti, scrivo qui perché sono nuovo al forum e non ho capito come creare una nuova discussione.
Ciao a tutti. Ho questo problema. Devo creare una pagina Web in cui sono elencati i quadri (con immagine o solo descrizione) di
un famoso pittore. Quando l'utente si muove con il mouse sopra un quadro ,vengono visualizzati in un tooltip i dettagli sulle dimensioni e sull'anno di realizzazione. Utilizzare AJAX per mostrare i dettagli nel tooltip, prelevando le informazioni da un
database ed AJAX deve essere implementato con Java Script. Qualcuno mi può fare una bozza di come fare? Non so proprio dove mettere le mani. Grazie mille in anticipo. Questo di seguito è cosa sono riuscito a fare:
Ciao a tutti. Ho questo problema. Devo creare una pagina Web in cui sono elencati i quadri (con immagine o solo descrizione) di
un famoso pittore. Quando l'utente si muove con il mouse sopra un quadro ,vengono visualizzati in un tooltip i dettagli sulle dimensioni e sull'anno di realizzazione. Utilizzare AJAX per mostrare i dettagli nel tooltip, prelevando le informazioni da un
database ed AJAX deve essere implementato con Java Script. Qualcuno mi può fare una bozza di come fare? Non so proprio dove mettere le mani. Grazie mille in anticipo. Questo di seguito è cosa sono riuscito a fare:
Codice:
<!DOCTYPE html>
<html long="it">
<head>
<meta charset="UTF-8">
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name="viewport" content="width=device-width">
<title> TOOLTIP E QUADRI </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 style="margin-top 20px;"> TOOLTIP E QUADRI</h1>
<h2 style="margin-top 5px;"> Made by ALESSANDRO PIGNOTTI</h4>
<h3 style="margin-top 20px;"> Galleria artistica Vincent Van Gogh</h3>
<ul>
<li><a href="theQuadris"><img src="images/icons/autoritratto.jpg"/></a></li>
<li><a href="theQuadris"><img src="images/icons/nottestellata.jpg"/></a></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js></script>integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
<script src="backend.js"></script>
</body>
</html>
BACKEND
const req=new XMLHttpRequest();
function theQuadris(item) {
nomeQuadro=item.innerHTML;
req.open("GET",http://localhost:8888/js/ajax/api.php?quadri"+ nomeQuadro);
req.send();
req.onreadystatechange=0 if
req.readyState=4 && req status=200)
$(item).attr('title', req.responseText);
$(item).tooltip;
$('ul-tooltip').hide();
}
}