11548 sujets

JavaScript, DOM et API Web HTML5

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)
Pourquoi tu n'utiliserais pas les propriété background-image sur ton <a> plus un hover avec ton autre image?
zallow a écrit :
Pourquoi tu n'utiliserais pas les propriété background-image sur ton &lt;a&gt; 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.
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.
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.
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>";
?>
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.