[Résolu] L'image survolée ne change pas !!!

Question

jytest

25 Nov 2011 à 12:01

Bonjour à tous !

Pour mon apprentissage, je suis en train de créer une boutique non sans peine !

Me voici avec un problème qui commence à me prendre le chou !!!

Malgré un remplissage de "tr10" dans "ajaxcategorie04.php",
mon bouton "ajouter" ne fonctionne pas. L'image de survol n'est pas prise en compte !
Les 2 images ajouterOFF.gif" et "ajouterON.gif" sont pourtant bien à la racine sur le domaine dans le dossier "images/boutique/"
Pourquoi ?
Avez-vous une idée pour me "dépatouiller" ?

Merci d'avance pour votre aide !

Voici la balise body :


<body onLoad="MM_preloadImages('images/boutique/ajouterON.gif'">

Voici le code du html où tout se passe :


  <div id="contenu">
  	<div id="bloc00"><img src="images/boutique/avancement01.gif" width="676" height="55" alt="avancement"></div>
	<div id="choixoptions">
    <table border="0" align="left" cellspacing="0" id="tableoptions" style="vertical-align:middle;">
    	<tr>
        <td width="150"></td>
        <td width="280"></td>
        <td width="20"></td>
        <td width="0"></td>
        </tr>
        
        <tr>
        <td colspan="4" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Prix en ligne instantané</td>
        </tr>
        
        <tr>
        <td colspan="4" style="padding:7px;">
        Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
        </tr>
        
        <tr id="tr00">
        <td width="136" style="padding:7px;">Document</td>
        <td width="280" id="td00">
        	<select name="categorie00" id="categorie00" style="width:280px;" onChange="gocategorie00();" >
            <option value="none">-- Choisissez, svp ! --</option>
            <?php
				require_once("php/connexionMysql.inc.php");
				$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY id");
				while ($back = mysql_fetch_assoc($query)) {
					echo "<option value='".$back['id']."' ><span style='width: 280px;' >".$back['libelle']."</span></option>";	
				}
			?>
            </select>
        </td>
        <td width="20">
            <span id="loader00" class="hidden" style="width:20px;"><img src="images/boutique/loader16.gif" alt="loading" width="16" height="16" border="0" align="absmiddle" /></span>
        </td>
        <td width="0">&nbsp;</td>
        </tr>
        
        <tr id="tr01" style="display:none;">
        <td width="136" style="padding:7px;">Descriptif</td>
        <td width="280" id="td01">
<!--    <select name="categorie01" id="categorie01" style="width:280px;"></select>  -->     
		</td>
        <td width="20">
            <span id="loader01" class="hidden" style="width:20px;"><img src="images/boutique/loader16.gif" alt="loading" width="16" height="16" border="0" align="absmiddle" /></span>
        </td>
        <td width="0">&nbsp;</td>
        </tr>
        
        <tr id="tr02" style="display:none;">
        <td width="136" style="padding:7px;">Format</td>
        <td width="280" id="td02">
<!--    <select name="categorie02" id="categorie02" style="width:280px;"></select>  -->     
        </td>
        <td width="20">
            <span id="loader02" class="hidden" style="width:20px;"><img src="images/boutique/loader16.gif" alt="loading" width="16" height="16" border="0" align="absmiddle" /></span>
        </td>
        <td width="0">&nbsp;</td>
        </tr>
        
        <tr id="tr03" style="display:none;">
        <td width="136" style="padding:7px;">Papier</td>
        <td width="280" id="td03">
<!--    <select name="categorie03" id="categorie03" style="width:280px;"></select>  -->  
        </td>
        <td width="20">
            <span id="loader03" class="hidden" style="width:20px;"><img src="images/boutique/loader16.gif" alt="loading" width="16" height="16" border="0" align="absmiddle" /></span>
        </td>
        <td width="0">&nbsp;</td>
        </tr>
    </table>
    
[#red]    <div id="detail" class="c12">
        <table>
        </table>
    </div>[/#]
    
    </div>
	<div id="voirpanier">
    	<a href="panier.php">Voir le panier</a><br>
    	<a href="commande.php">Commander le panier</a>
    </div>
  </div>

Voici "ajaxcategorie04.php" :


<?php
	require_once("connexionMysql.inc.php");
	echo "<table name='table' id='table' border='0' align='left' cellspacing='0' style='vertical-align:middle;'>";
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_articles".
			" WHERE id=".$_REQUEST['ix']);
		while ($back = mysql_fetch_assoc($query)) {
			$remisehtva = $back['prix_ht'] * $back['remise_pourcentage'] / 100 + $back['remise_valeur'] ;
			$pvhtva = $back['prix_ht'] - $remisehtva ;
			$pvtvac = $pvhtva * (100 + $back['taux_tva']) / 100 ;
			echo "<tr id='tr04'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td04'><div class='commentaire'>".$back['commentaire'].$back['commentaire'].$back['commentaire']."</div></td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr05'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td05' class='delai' align='right'>Délai : ".$back['delai']."</td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr06'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td06'>&nbsp;</td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr07'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td07' class='c20 bold' align='right'>Prix HTVA : <span class='bleu'>".number_format($pvhtva,2,',',' ')." € </span></td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr08'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td08' class='c15' align='right'>".number_format($pvtvac,2,',',' ')." € TVAC</td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr09'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td09' class='c16' align='right'>&nbsp;</td>
				<td width='20'></td><td width='0'></td></tr>";
			$onmouseover = "MM_swapImage('ajouter','','images/boutique/ajouterON.gif',1)";
			echo "<tr id='tr10'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
        		<td width='280' id='td10' align='right'><a href='ajouter.php' onMouseOut='MM_swapImgRestore()' onMouseOver='".$onmouseover."'><img src='images/boutique/ajouterOFF.gif' alt='ajouter' name='ajouter' width='122' height='36' border='0'></a></td>
				<td width='20'></td><td width='0'></td></tr>";
		}
	}
	echo "</table>";
	
	
?>

Modifié par jytest (07 Jul 2012 - 10:32)

zallow

25 Nov 2011 à 12:21

Pourquoi tu n'utiliserais pas les propriété background-image sur ton <a> plus un hover avec ton autre image?

Laurie-Anne

25 Nov 2011 à 12:25

zallow a écrit :
Pourquoi tu n'utiliserais pas les propriété background-image sur ton <a> plus un hover avec ton autre image?

Parce que c'est une image porteuse de contenu ET support d'un lien. Si l'image venait à ne pas se charger (erreur serveur assez courante), le contenu et le lien disparaitraient.

zallow

25 Nov 2011 à 12:30

Rien n’empêche de placé le texte contenu dans l'image dans son lien et de le re-centrer avec du css, un simple padding suffit. Si son image ne charge pas il lui reste le texte et pas un carré image brisé, ce qui convient mieux en terme de dégradation.

Laurie-Anne a écrit :
Parce que c'est une image porteuse de contenu ET support d'un lien. Si l'image venait à ne pas se charger (erreur serveur assez courante), le contenu et le lien disparaitraient.

jytest

25 Nov 2011 à 12:33

Merci à vous 2.
Je vais opter pour la solution du texte (uniquement dans la balise <a>)

Laurie-Anne

25 Nov 2011 à 12:47

zallow a écrit :
Rien n’empêche de placé le texte contenu dans l'image dans son lien et de le re-centrer avec du css, un simple padding suffit. Si son image ne charge pas il lui reste le texte et pas un carré image brisé, ce qui convient mieux en terme de dégradation.

ça dépends. Si le texte est toujours affiché, ok.

Si le texte est masque pour que seule l'image soit vue (ce qui se fait beaucoup), alors le problème persiste.

jytest

25 Nov 2011 à 13:31

Et alors, que me conseilles-tu ?

Laurie-Anne

25 Nov 2011 à 13:38

Tout dépends de tes images.

jytest

25 Nov 2011 à 13:43

Cela ne va pas non plus avec le background !
Avez-vous une autre idée ?

Pour les images, elles seront toutes avec le même fond.
Seul le texte"ajouter" risque de changer !!!

Dans "boutique.css", j'ai rajouté :


.bouton_ajouter {
	background-image: url(../images/boutique/ajouterOFF.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;	
}

J'ai modifié "ajaxcategorie04.php", et il est maintenant comme ceci :


<?php
	require_once("connexionMysql.inc.php");
	echo "<table name='table' id='table' border='0' align='left' cellspacing='0' style='vertical-align:middle;'>";
	if (isset($_REQUEST['ix'])) {
		$query = mysql_query("SELECT * FROM shop_articles".
			" WHERE id=".$_REQUEST['ix']);
		while ($back = mysql_fetch_assoc($query)) {
			$remisehtva = $back['prix_ht'] * $back['remise_pourcentage'] / 100 + $back['remise_valeur'] ;
			$pvhtva = $back['prix_ht'] - $remisehtva ;
			$pvtvac = $pvhtva * (100 + $back['taux_tva']) / 100 ;
			echo "<tr id='tr04'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td04'><div class='commentaire'>".$back['commentaire'].$back['commentaire'].$back['commentaire']."</div></td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr05'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td05' class='delai' align='right'>Délai : ".$back['delai']."</td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr06'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td06'>&nbsp;</td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr07'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td07' class='c20 bold' align='right'>Prix HTVA : <span class='bleu'>".number_format($pvhtva,2,',',' ')." € </span></td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr08'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td08' class='c15' align='right'>".number_format($pvtvac,2,',',' ')." € TVAC</td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr09'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
				<td width='280' id='td09' class='c16' align='right'>&nbsp;</td>
				<td width='20'></td><td width='0'></td></tr>";
			echo "<tr id='tr10'><td width='136' style='padding-left:7px; padding-right:7px;'></td>
        		<td width='280' id='td10' align='right'><a href='ajouter.php' class='bouton_ajouter'>ajouter</a></td>
				<td width='20'></td><td width='0'></td></tr>";
		}
	}
	echo "</table>";
?>

jytest

25 Nov 2011 à 14:00

J'ai trouvé !
Le background ne doit pas être fait dans la balise <a>,
mais plutôt dans la balise <td> où le <a> est géré !
Merci à tous 2 !
Bon weekend.

Sujet clos