Image mappée

Nouveau WRInaute
Bonjour à tous,

Je viens vers vous car je n'arrive pas à trouver seul d'où vient mon soucis et je n'ai rien trouvé qui puisse m'aider en cherchant sur google...

J'ai réalisé une image mappée avec un logiciel de retouche photo et j'aimerais la mettre en ligne sur mon site qui tourne avec prestashop.

Je suis certain que le code html est ok, que toutes les images sont ok également mais lorsque je mets le tout en ligne, il y a des décalages partout et je ne trouve pas de quoi ça vient.

Voici le lien:
(Apparemment je ne peux pas mettre de lien avec les BBcodes)
http://www.be-vapers.be/content/24-ecab-v2-de-kamry-equipe-d-un-clearomiseur-mini-protank-2-de-kangertech

D'avance merci à ceux qui prendront le temps de jeter un oeil :)

Voilà le code html:
Code:
<table id="Tableau_01" width="601" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="12">
			<img id="eCab_v2_mini_protank_2_01" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_01.jpg" width="600" height="42" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="42" alt="" /></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="11">
			<img id="eCab_v2_mini_protank_2_02" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_02.jpg" width="260" height="330" alt="" /></td>
		<td colspan="3" rowspan="5">
			<img id="eCab_v2_mini_protank_2_03" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_03.jpg" width="68" height="79" alt="" /></td>
		<td colspan="5">
			<img id="eCab_v2_mini_protank_2_04" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_04.jpg" width="272" height="10" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="10" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="14">
			<img id="eCab_v2_mini_protank_2_05" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_05.jpg" width="20" height="598" alt="" /></td>
		<td colspan="3">
			<img id="eCab_v2_mini_protank_2_06" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_06.jpg" width="241" height="29" alt="" /></td>
		<td rowspan="14">
			<img id="eCab_v2_mini_protank_2_07" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_07.jpg" width="11" height="598" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="29" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img id="eCab_v2_mini_protank_2_08" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_08.jpg" width="241" height="5" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="5" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="12">
			<img id="eCab_v2_mini_protank_2_09" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_09.jpg" width="138" height="564" alt="" /></td>
		<td>
			<img id="eCab_v2_mini_protank_2_10" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_10.jpg" width="100" height="23" alt="" /></td>
		<td rowspan="12">
			<img id="eCab_v2_mini_protank_2_11" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_11.jpg" width="3" height="564" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="23" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="11">
			<img id="eCab_v2_mini_protank_2_12" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_12.jpg" width="100" height="541" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="12" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img id="eCab_v2_mini_protank_2_13" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_13.jpg" width="68" height="38" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="38" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img id="eCab_v2_mini_protank_2_14" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_14.jpg" width="68" height="92" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="92" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img id="eCab_v2_mini_protank_2_15" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_15.jpg" width="68" height="31" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="31" alt="" /></td>
	</tr>
	<tr>
		<td colspan="3">
			<img id="eCab_v2_mini_protank_2_16" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_16.jpg" width="68" height="52" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="52" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img id="eCab_v2_mini_protank_2_17" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_17.jpg" width="41" height="27" alt="" /></td>
		<td colspan="2">
			<img id="eCab_v2_mini_protank_2_18" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_18.jpg" width="27" height="27" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="27" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="4">
			<img id="eCab_v2_mini_protank_2_19" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_19.jpg" width="57" height="260" alt="" /></td>
		<td rowspan="5">
			<img id="eCab_v2_mini_protank_2_20" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_20.jpg" width="11" height="289" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="11" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img id="eCab_v2_mini_protank_2_21" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_21.jpg" width="12" height="278" alt="" /></td>
		<td colspan="2">
			<img id="eCab_v2_mini_protank_2_22" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_22.jpg" width="193" height="41" alt="" /></td>
		<td rowspan="4">
			<img id="eCab_v2_mini_protank_2_23" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_23.jpg" width="55" height="278" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="41" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img id="eCab_v2_mini_protank_2_24" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_24.jpg" width="113" height="237" alt="" /></td>
		<td>
			<img id="eCab_v2_mini_protank_2_25" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_25.jpg" width="80" height="33" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="33" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img id="eCab_v2_mini_protank_2_26" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_26.jpg" width="80" height="204" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="175" alt="" /></td>
	</tr>
	<tr>
		<td colspan="2">
			<img id="eCab_v2_mini_protank_2_27" src="http://www.be-vapers.be/images/eCab_v2_mini_protank_2_27.jpg" width="57" height="29" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="1" height="29" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="12" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="113" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="80" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="55" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="41" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="16" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="11" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="20" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="138" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="100" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="3" height="1" alt="" /></td>
		<td>
			<img src="http://www.be-vapers.be/images/spacer.gif" width="11" height="1" alt="" /></td>
		<td></td>
	</tr>
</table>
 
WRInaute impliqué
le css qui doit mettre le bazar.
mais le mieux, c'est de faire une vraie image mappée, pas ce découpage dans un tableau html.
 
Nouveau WRInaute
C'est ce que je pense aussi pour le css, mais j'ai beau chercher, je ne trouve pas d'où vient le soucis, j'avais pensé à un padding ou margin mais rien trouvé :(

Si vous avez un lien avec une explication pour de vraies images mappées je suis preneur, je pensais que c'était ça la vrai manière, apparemment non :oops:
 
Nouveau WRInaute
Merci d'avoir éclairé ma lanterne baud74, après avoir cherché un peut j'ai trouvé comment faire de vraies images mappées, c'est vrai que le résultat est plus propre :)

Pour info j'ai téléchargé ce petit programme gratuit qui est pas trop mal : http://www.4dots-software.com/imagemapper2/

Encore merci!
 
Nouveau WRInaute
Bonjour,

Je reviens vers vous pour la même histoire...

Je me rends compte maintenant que faire de "vrais" images mappées c'est bien, mais avec un thème responsive ça devient le bordel total, plus rien ne correspond quand l'image change de taille :?

Je me dis qu'au final ma première méthode (découpage de l'image dans un tableau) serait responsive, mais j'en reviens au point de départ, toute les images se décalent à cause du css.

Est ce qu'il n'existe pas un moyen (avec une propriété css?) pour qu'aucune propriété css ne s'applique à une classe? (je sais pas si je m'exprime très bien là :? )

En gros je voudrais donner une classe à mes tableaux d'images mappées et que le css ne s'applique pas sur ces tableaux...

Merci d'avance
 
WRInaute impliqué
ton tableau à taille fixe ne sera jamais responsive.
ton tableau a un ID donc il est très facile de ne changer que les propriétés des images du tableau pour mettre autre chose que la valeur définie ailleurs pour les images.
 
WRInaute accro
Tu peux, via des id, "supprimer" toutes les propriétés qui s'appliquent, en les définissant à "none" ou "inherit", tout dépend de la propriété, du code, etc.
 
Discussions similaires
Haut