Valutazione discussione:
  • 0 voto(i) - 0 media
  • 1
  • 2
  • 3
  • 4
  • 5
  Condividi: Facebook Twitter
[Disc. divisa] Creazione pagina Web
#1
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:


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();
}
}
Cita messaggio
#2
Ti ho diviso la discussione, quando vuoi crearne una Nuova usa l'apposito tasto in  alto a DX in ogni sezione:  

[Immagine: uUe5lSR.png]


per i Listati e Script usa il tasto Code <> che trovi a Dx tra le varie opzioni(in questo caso l'ho sistemato io):
[Immagine: Vw7UWDq.png]

Arriverà qualcuno a risponderti.  000019
I am a patient boy
I wait, I wait, I wait, I wait
My time's like water down a drain....

Comprendi?
Cita messaggio
#3
Ciao AlessandwoP,
il codice che hai postato, almeno per le mie amatoriali competenze, non ha molto senso. Mi sembra ridondante e richiama molte librerie esterne che sembrano estranee al problema. Non ha molto senso neppure la frase "AJAX deve essere implementato con Java Script" dal momento che Ajax è un tecnica di programmazione basata su Javascript ed XML e non su altro. In base a ciò ti chiedo:

A) Di commentare il codice che hai postato in modo che sia chiaro il perché di certe istruzioni
B) Di chiarire da che tipo di database dovranno essere estratte le informazioni, come vi si deve accedere, e come è strutturato

Dopodiché ti suggerirei di dividere il problema in blocchi più piccoli:
1) Scrivere una funzione Javascript per prelevare le informazioni dal database
2) Scrivere il codice HTML di base che richiama la funzione del punto 1) al verificarsi di un onmouseover
3) Scrivere infine il codice HTML/CSS generale della pagina per ottenere una presentazione grafica adatta
Bene per male è carità, male per bene è crudeltà
Cita messaggio


Vai al forum:


Utenti che stanno guardando questa discussione: 1 Ospite(i)