Problème position image avec un while()

Résolu/Fermé
damigr - 7 avril 2008 à 01:19
 damigr - 7 avril 2008 à 15:11
Bonjour,
J'ai actuellement un problème avec un script que j'ai créé.
Celui-ci est censé afficher tous les résultats à partir d'une base de données avec les images des contacts (dans ce cas).
Sur chaque image, lorsqu'on passe son curseur dessu il est censé afficher une petite popup avec l'image agrandie, le seul hic c'est qu'il faut que cette popup soit alignée à côté de chaque image correspondante.
Alors j'ai tenté de faire mon script comme ceci mais lorsqu'on pointe son curseur sur les images suivantes, l'image agrandie reste sur le premier contact du haut..

Comment faire ?

Voici mon script:

<?php

include'functions.php';

$db = mysql_connect("$db_host", "$db_user", "$db_pass") or die("<br><br><br><br><br><br><font color='red'><b>Une erreur est survenue sur le site, veuillez réessayer plus tard.<br>Le service informatique.</b></font> <font color='#FFFFFF'>Erreur: ".mysql_error()."</font>");
mysql_select_db("$db_name",$db) or die("<br><br><br><br><br><br><font color='red'><b>Une erreur est survenue sur le site, veuillez réessayer plus tard.<br>Le service informatique.</b></font> <font color='#FFFFFF'>Erreur: ".mysql_error()."</font>");
$sql = "SELECT * FROM contacts WHERE company_id='".$_GET['id']."' AND status='true' ORDER BY name";
$req = mysql_query($sql) or die("<br><br><br><br><br><br><font color='red'><b>Une erreur est survenue sur le site, veuillez réessayer plus tard.<br>Le service informatique.</b></font> <font color='#FFFFFF'>Erreur: ".$sql."</font>");
?>

<br />
<br />
<br />
<br />
<br />
<br />

<?php

$nb = mysql_num_rows($req);
if($nb<1) {
echo'<script language="JavaScript">';
echo'alert(\'Aucun contact disponible pour cette société\');';
echo'document.location.href="index.php";';
echo'</script>';
} else {

$a=0;
$b=0;
$i=1;

echo'<table border="0" cellspacing="0" cellpadding="0" width="100%">';
echo'<tr>';
echo'<td>';
echo'<img src="'.$image_path.'/blank.gif" class="space_result_contacts">';
echo'</td>';
echo'<td>';
echo'<div class="result_contacts">';
echo'<img src="'.$image_path.'/blank.gif" class="top_bottom_result_contacts">';
echo'<table border="0" cellspacing="0" cellpadding="0" width="100%">';
echo'<tr>';

while($var=mysql_fetch_array($req)){
echo'<td>';
if(isset($hr_display)&&$hr_display=='true') echo'<hr id="hr_result_contacts">';
echo'<div class="contacts">';
echo'<table border="0" cellspacing="5" cellpadding="5" width="100%" onmouseover="this.className=\'contacts_onmouseover\'" onmouseout="this.className=\'companies\'">';
echo'<tr>';
echo'<td width="10%" valign="top">';
if(isset($var['picture'])&&!empty($var['picture']))
{
echo'<div onmouseover="document.getElementById(\'picture_popup\').className=\'picture_contacts_full\'" onmouseout="document.getElementById(\'picture_popup\').className=\'picture_contacts_full_hover\'">';
echo'<img src="'.$image_path.'/contacts/'.$var['picture'].'" class="picture_contacts">';
echo'</div>';
if(isset($top_add)&&!empty($top_add))
{
$top_view=300+$top_add;
} else {
$top_view='300';
}
echo'<div class="picture_contacts_full_hover" id="picture_popup" style="top: '.$top_view.';">';
echo'<img src="'.$image_path.'/contacts/'.$var['picture'].'">';
echo'</div>';
} else {
echo'<img src="'.$image_path.'/contacts/contact_blank.jpg" class="picture_contacts">';
}
echo'</td>';
echo'<td width="90%" align="left" valign="top">';
echo'<table border="0" cellspacing="0" cellpadding="0" width="100%">';
echo'<tr>';
echo'<td align="left" width="10%">';
echo'<img src="'.$image_path.'/blank.gif" class="result_contacts">';
echo'<br>';
if(isset($var['country'])&&!empty($var['country']))
{
country($var['country'],$image_path);
}
echo' ';
if(isset($var['surname'])&&!empty($var['surname']))
{
echo'<b>';
echo $var['surname'];
echo'</b>';
}
echo' ';
if(isset($var['name'])&&!empty($var['name']))
{
echo'<b>';
echo $var['name'];
echo'</b>';
}
echo'</td>';
$sql_services = "SELECT * FROM services WHERE company_id='".$var['company_id']."' AND id='".$var['service_id']."' AND status='true'";
$req_services = mysql_query($sql_services) or die("<br><br><br><br><br><br><font color='red'><b>Une erreur est survenue sur le site, veuillez réessayer plus tard.<br>Le service informatique.</b></font> <font color='#FFFFFF'>Erreur: ".$sql_services."</font>");
$var_services=mysql_fetch_array($req_services);
echo'<td align="left" width="90%">';
echo'<div class="space_icon">';
echo'<img src="'.$image_path.'/icon_services.gif" border="0" title="Département dans la société"> ';
if(isset($var_services['id'])&&!empty($var_services['id'])&&$var['service_id']>0)
{
echo $var_services['name'];
} else {
echo'Service inconnu';
}
echo'</div>';
echo'</td>';
echo'</tr>';
echo'<tr>';
echo'<td>';
echo'<div class="space_icon">';
echo'<img src="'.$image_path.'/icon_mail.gif" border="0" title="Adresse mail"> ';
if(isset($var['mail'])&&!empty($var['mail']))
{
echo'<a href="mailto:'.$var['mail'].'">'.$var['mail'].'</a>';
} else {
echo'Aucune adresse email';
}
echo'</div';
echo'</td>';
echo'<td>';
echo'<div class="space_icon">';
echo'<img src="'.$image_path.'/icon_function.gif" border="0" title="Fonction dans la société"> ';
if(isset($var['function'])&&!empty($var['function']))
{
echo $var['function'];
} else {
echo'Fonction inconnue';
}
echo'</div>';
echo'</td>';
echo'</tr>';
echo'<tr>';
echo'<td>';
echo'<div class="space_icon">';
echo'<img src="'.$image_path.'/icon_gsm.gif" border="0" title="Numéro de gsm"> ';
if(isset($var['gsm'])&&!empty($var['gsm']))
{
echo $var['gsm'];
} else {
echo'Aucun numéro de gsm';
}
echo'</div>';
echo'</td>';
echo'<td>';
if(isset($var['others'])&&!empty($var['others']))
{
echo'<b>Autres informations:</b>';
}
echo'</td>';
echo'</tr>';
echo'<tr>';
echo'<td valign="top">';
echo'<div class="space_icon">';
echo'<img src="'.$image_path.'/icon_phone.gif" border="0" title="Numéro de téléphone (+ tel interne)"> ';
if(isset($var['phone_ext'])&&!empty($var['phone_ext']))
{
echo $var['phone_ext'];
if(isset($var['phone_int'])&&!empty($var['phone_int']))
{
echo' ';
echo'(';
echo $var['phone_int'];
echo')';
}
} else {
if(isset($var['phone_int'])&&!empty($var['phone_int']))
{
echo $var['phone_int'];
} else {
echo'Aucun numéro de téléphone';
}
}
echo'</div>';
echo'<div class="space_icon">';
echo'<img src="'.$image_path.'/icon_fax.gif" border="0" title="Numéro de fax"> ';
if(isset($var['fax'])&&!empty($var['fax']))
{
echo $var['fax'];
} else {
echo'Aucun numéro de fax';
}
echo'</div>';
echo'</td>';
echo'<td valign="top">';
if(isset($var['others'])&&!empty($var['others']))
{
echo $var['others'];
}
echo'</td>';
echo'</tr>';
echo'</table>';
echo'</td>';
echo'</tr>';
echo'</table>';
echo'</div>';
echo'</td>';
$a++;
if($a==$contacts_columns){
$a=0;
$b++;
echo '</tr>';;
if($b<$contacts_columns) echo '<tr>';
$hr_display='true';
$top_add='50';
}
}

echo'</table>';
echo'<img src="'.$image_path.'/blank.gif" class="top_bottom_result_contacts">';
echo'</div>';
echo'</td>';
echo'</tr>';
echo'</table>';
echo'<br>';

echo'<table border="0" cellspacing="0" cellpadding="0" width="100%">';
echo'<tr>';
echo'<td>';
echo'<img src="'.$image_path.'/blank.gif" class="space_result_contacts">';
echo'</td>';
echo'<td>';
echo'<div class="result_contacts" align="center">';
echo'Toute demande d\'ajout ou de modification de contact doit se faire par mail à: <a href="mailto:"></a>';
echo'</div>';
echo'</td>';
echo'</tr>';
echo'</table>';
}

mysql_close();
?>

Et voici mon css:

/* Contacts */
img.picture_contacts {
width: 133;
height: 100;
border: 0;
}
.picture_contacts_full {
position:absolute;
visibility: visible;
left: 300;
width: 400;
height: 300;
border: 1px solid black;
z-index: 0;
}
.picture_contacts_full_hover {
visibility: hidden;
width: 0;
height: 0;
}
img.top_bottom_result_contacts {
border: 0;
width: 1;
height: 5;
}
img.space_result_contacts {
border: 0;
width: 20;
height: 1;
}
img.result_contacts {
border: 0;
width: 250;
height: 1;
}
#hr_result_contacts {
color: #cecece;
background-color: #cecece;
height: 1px;
border: 0;
}
.result_contacts {
border-style: solid;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width:1px;
border-color: #cecece;
width: 600;
}
.contacts {
background-color: #FFFFFF;
width: 600;
}
.contacts_onmouseover {
background-color: #e0ecf4;
width: 600;
}
/**/
.space_icon {
padding-top: 1;
}


Je vous remercie d'avance.
A voir également:

2 réponses

ludozero Messages postés 158 Date d'inscription samedi 5 avril 2008 Statut Membre Dernière intervention 18 septembre 2011 31
7 avril 2008 à 06:12
Ok peut etre dans la balise <IMG SRC="" style="position: absolute; top: 82px; left: 40px;>

tu peux placer les image prisisementdu haut vers la gauche partout sur la page

Amuse toi bien!
0
C'est réglé, ta solution ne fonctionnait pas, désolé.

Il fallait utiliser un nom aléatoire avec rand() pour le <div id et utiliser l'incrémentation pour l'espace entre les photos...

Bien à vous et merci encore.
0