Login

AlessandwoP · Messaggi: 1 Discussioni: 1 Registrato: 11 Apr 2021

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();

}

}

***rage75*** · Messaggi: 1.735 Discussioni: 15 Registrato: 18 Oct 2019

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

***Blackstar*** · 11/04/2021, 14:40

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

Login
Nome utente:
Password:	Password dimenticata?
	Ricordami