Aprire e chiudere dinamicamente un pop up al passaggio del mouse su icona - in php
Buon giorno!! Scusate l'ora ma da quando perseguo il progetto del mio sito sono diventato un 'animale' notturno. A parte scherzi. Ho un problema. Utilizzo php per chiamare in causa il database e per mostrare le tabelle relative ai dati che utilizzo. In una di esse, in una cella, volevo far si che al passaggio del mouse su una immagine (una piccola lente) mi si aprisse un pop up e, quando il mouse lasciava e si spostava dall'immagine, mi si chiudesse il pop up stesso (il cui contenuto è dato dai dati relativi all'elemento selezionato).
Avevo già fatto una cosa simile, ma l'utente doveva cliccare sulla lente e poi chiudere il pop up cliccando sulla x in alto a destra. Vorrei agevolarlo mostrandogli il pop up al passaggio del mouse e facendolo chiudere appena il mouse lascia la lente.
Sono riuscito solo a far si che al passaggio sull'immagine si apra il pop up, ma non che si chiuda quando il mouse lascia l'immagine, nonostante abbia cercato online delle soluzioni (ma spesso la cosa consigliata è fare dei div che poi spariscono ma a me non piace molto con riferimento ai miei obiettivi..) e questo a causa del javascript che per me risulta particolarmente ostico...
Ciò che ho fatto è questo...
Codice:
<script>
function apri(url) {
newin = window.open(url,'titolo','scrollbars=no,resizable=no,width=45,height=50,left=450,top=120,status=no,location=no,toolbar=no');
}
</script>
ps le dimensioni sono piccole perchè è una prova
e poi quando con php io richiamo i dati e li dispongo in tabella...
Codice PHP:
echo "...
<td><div class='classe12' ><a onmouseover=\"javascript:apri('dettagliato.php?cod=".$row[id]."')\";"?> <?php echo "><img src='imm/lente.png' title='Maggiori dettagli'>"; ?> <?php echo "</a></div></td>
...";
Per chiudere, la finestra che appare, lasciando l'immagine con il puntatore del mouse, come posso fare?
Grazie mille per eventuali consigli ed aiuti!!
..la storia infinita continua...
Allora ho predisposto la seguente pagina di prova....
Codice PHP:
<?php
session_start(); //la pagina dovrebbe aprirsi successivamente al login quindi se l'utente è già connesso...ecc..ecc..
if(!isset($_SESSION['user_id']))
die('Non sei loggato');
$DB_host = '....';
$DB_user = '.......';
$DB_password = '.......';
$DB_name = '........';
$link = mysql_connect($DB_host, $DB_user, $DB_password);
if (!$link) {
die ('Non riesco a connettermi: ' . mysql_error());
}
$db_selected = mysql_select_db($DB_name, $link);
if (!$db_selected) {
die ("Errore nella selezione del database: " . mysql_error());
}
?>
<?php
$result = mysql_query('SELECT * FROM users WHERE id='.mysql_real_escape_string($_SESSION['user_id']))
or die ("Query non valida");
while(($row = mysql_fetch_assoc($result))) {
$row[team];
$squadrautente = $row[team];
}
?>
<?php
$idutente = mysql_real_escape_string($_SESSION['user_id']);
?>
poi ho inserito quanto ha fatto Miki, provando una tabella semplicissima e inserendovi due variabili php...
Codice:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Custom content</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( document ).tooltip({
items: "img, [data-geo], [title]",
content: function() {
var element = $( this );
if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<table><tr><td class='map'><?php echo $idplayer;?></td><td> <?php echo $skillplayer;?></td></tr><tr><td>testo generico</td></tr></table>";
}
/* if ( element.is( "[data-geo]" ) ) {
var text = element.text();
return "<img class='map' alt='" + text +
"' src='http://maps.google.com/maps/api/staticmap?" +
"zoom=11&size=350x350&maptype=terrain&sensor=false¢er=" +
text + "'>";
}*/
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
if ( element.is( "img" ) ) {
return element.attr( "alt" );
}
}
});
});
</script>
<style>
.photo {
width: 300px;
text-align: center;
}
.photo .ui-widget-header {
margin: 1em 0;
}
.map {
width: 350px;
height: 350px;
}
.ui-tooltip {
max-width: 350px;
}
</style>
</head>
<body>
a questo punto chiamo in causa il database e mi stampo la tabella con i nomi dei giocatori della squadra
Codice PHP:
<?php
$myteam=mysql_query("SELECT * FROM players where squadra = '$squadrautente'");
echo'<table class="righealternate" border="2" id="myTable"><thead>
<tr>
<th title="Numero di maglia del calciatore"></th>
<th title="Nome del calciatore"></th></tr></thead><tbody>';
while( $row=mysql_fetch_array($myteam))
{
$number= $row['number'];
$name= $row['name'];
$idplayer= $row['idplayer'];
$skillplayer= $row['skillplayer'];
echo"<tr>
<td>$number</td>
<td><a href='' data-geo=''>$name</a></td>
</tr></tbody></table>";
?>
Codice HTML:
</body>
</html>
A questo punto passando il mouse sul nome del giocatore vedo la scritta 'testo generico' ma non gli altri suoi dati (nome e id) che ho chiesto di vedere. Immagino che io debba usare altro...potreste dirmi che cosa? Jquery?
