18041 sujets

Questions générales et questions de débutants

Style Tags et Script Tags c'est quoi?

Salut à tous,

j'ai crée une mis en page pour une annonce sur un site de vente au enchère au format html pour lequel le rendu présentait des problèmes. Après avoir contacter le service client, ces derniers mon répondu ceux-ci:

Nous avons trouvé des STYLE Tags et des SCRIPT Tags, qui ne sont pas acceptés par notre système.
Vous pouvez utiliser le CSS Style mais ce dernier ne peut qu'être utiliser sur le tag ( dans la ligne du texte) concerné.

Pourriez-vous me dire me dire de quoi il s'agit?

Merci
Modérateur
Bonjour,

Dans le code HTML que tu leur as fourni, il devait y avoir du code non-autorisé comme celui-ci :


<script type="text/javascript">
...
</script>

ou encore
<style type="text/css">
...
</style>


Le premier bloc est pour du Javascript et le second pour styler les éléments de la page.

Ce qu'ils semblent vouloir dire, c'est que tu peux seulement appliquer des styles aux éléments via l'attribut style, comme ceci :


<p style="color:red">Mon paragraphe en rouge</p>
Ok merci pour tes info

Mais serait-il possible de faire en sorte qu'en modifient le code, je puisse obtenir un rendu identique et susceptible d'être autorisé par ces derniers.

Sinon actuellement j'ai ce rendu dans mon annonce: http://data.imagup.com/2/1105435367.jpg


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#CP {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	line-height: 13px;
}
#C1 {
	width: 780px;
	text-align: center;
}
#C1 img {
	cursor:pointer;
}	
#E1 {
	height: 30px;
	width: 780px;
	clear: both;
}
#C3 {
	text-align: center;
	width: 780px;
	font-family: "Lucida Grande";
	line-height: 16px;
}
#E2 {
	height: 40px;
	width: 780px;
}
#C4 {
	width: 780px;
}
#E3 {
	height: 40px;
	width: 780px;
	clear: both;
}
#C5 {
	text-align: justify;
	width: 780px;
	overflow: auto;
	font-family: "Century Gothic";
	font-size: 11px;
	border: 1px solid #CCC;
}
#E4 {
	height: 30px;
	width: 780px;
}
#C6 {
	text-align: center;
	width: 700px;
	float: left;
	font-family: "Century Gothic";
	font-size: 11px;
	text-decoration: none;
}
#C7 {
	width: 80px;
	float: left;
}
#C8 {
	height: 400px;
	width: 700px;
	float: left;
	background-image: url(http://data.imagup.com/2/1105402426.jpg);
}
#C9 {
	float: left;
	width: 80px;
	text-align: right;
}
#C9 img {
	cursor:pointer;
}
#E5 {
	height: 30px;
	width: 780px;
	clear: both;
}
#C10 {
	text-align: center;
	width: 780px;
	font-family: "Lucida Grande";
	line-height: 16px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>
<script language="javascript">
function remplace(image) {
document.getElementById("C8").innerHTML="<img src='"+image+"'>";
}
</script>
<script language="javascript">  
function affiche_text(id) {   
 
    if (id == "C1"){  
        var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><font color='#9900cc'><strong><span style='font-size: 12px;'>XXX</span></strong></font>";  
        var text2 = "<span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> CXXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> Autre:</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span>";
		var text3 = "<strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br /><br /><br /><strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span>";
		var text4 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 10px;'>XXX</span></strong>";  
    }  
 
    else{  
        var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><font color='#9900cc'><strong><span style='font-size: 12px;'>XXX</span></strong></font>";  
        var text2 = "<span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> CXXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> Autre:</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span>";
		var text3 = "<strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br /><br /><br /><strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span>";
		var text4 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 10px;'>XXX</span></strong>";  
    }  
    document.getElementById("C3").innerHTML = text1;
	document.getElementById("TC2").innerHTML = text2;
	document.getElementById("C5").innerHTML = text3;
	document.getElementById("C10").innerHTML = text4;  
}  
</script>
</head>

<body>
<div id="CP">
  <div id="C1">
  <img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('C1');" width="41" height="12" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('C3');" width="42" height="12" /></div>
  <div id="E1"></div>
  <div id="C3"><strong style="color: rgb(68, 68, 68);"><span
  style="font-size: 14px;">XXX</span></strong><br />
  <strong style="color: rgb(68, 68, 68);"><span style="font-size: 14px;">XXX</span></strong><br />
  <br />
  <font color="#9900cc"><strong><span style="font-size: 12px;">XXX</span></strong></font></div>
  <div id="E2"></div>
  <div id="C4"><table width="780" border="0" cellspacing="0" cellpadding="0">
  <tr>
<td width="100">&nbsp;</td>
<td id="TC2" style="font-family: Century Gothic; font-size: 11px;"
width="290"><span
style="font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);">XXX</span><br />
<span
style="font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);">
XXX</span><br />
<br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);"> XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);"> XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">
XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);"> XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">
XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);"> XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span> </td>
<td width="0">&nbsp;</td>
<td style="text-align: center;" width="380"><br />
</td>
</tr>
</table>
</div>
  <div id="E3"></div>
  <div id="C5"><strong style="color: rgb(68, 68, 68);">XXX</strong><br />
  <br />
    <span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
    <br style="color: rgb(102, 102, 102);" />
    <span style="color: rgb(102, 102, 102);"> XXX</span><br
    style="color: rgb(102, 102, 102);" />
    <br style="color: rgb(102, 102, 102);" />
    <span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
    <br style="color: rgb(102, 102, 102);" />
    <span style="color: rgb(102, 102, 102);"> XXX</span><br />
  <br />
  <br />
    <strong style="color: rgb(68, 68, 68);">XXX</strong><br />
  <br />
    <span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
  <br style="color: rgb(102, 102, 102);" />
    <span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
  <br style="color: rgb(102, 102, 102);" />
    <span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
  <br style="color: rgb(102, 102, 102);" />
    <span style="color: rgb(102, 102, 102);"> XXX</span></div>
  <div id="E4"></div>
  <div id="C6">
    <p><a href="http://www.lacotedesmontres.com/Ebel-1215891-PdN.html" target="_blank">XXX</a><br />
  </div>
  <div id="C7"></div>
  <div id="C8"></div>
  <div id="C9"><img
src="http://data.imagup.com/2/1105402426.jpg"
onclick="remplace('http://data.imagup.com/1/1289760482.png');"
height="40" width="70"><br>
<br>
<img src="http://data.imagup.com/2/1105402426.jpg"
onclick="remplace('http://data.imagup.com/1/1289479756.png');"
height="40" width="70"><br>
<br>
<img src="http://data.imagup.com/2/1105402426.jpg"
onclick="remplace('http://data.imagup.com/1/1289479789.png');"
height="40" width="70"><br>
<br>
<img src="http://data.imagup.com/2/1105402426.jpg"
onclick="remplace('http://data.imagup.com/1/1289479720.png');"
height="40" width="70"></div>
  <div id="E5"></div>
  <div id="C10"><strong style="color: rgb(68, 68, 68);"><span
  style="font-size: 10px;">XXX</span></strong></div>
</div>
</body>
</html>

Modifié par qwertz1 (26 Nov 2010 - 10:26)
Modérateur
Bonjour,

S'ils autorisent l'utilisation de l'attribut style pour les éléments, comme l'exemple donné ci-haut avec le paragraphe, tu peux en théorie obtenir le rendu de ton choix. C'est juste beaucoup plus de travail, car tu ne peux pas utiliser une feuille de style externe. Pour chaque élément, tu dois écrire les styles.

Le code que tu viens de montrer, est-ce que c'est le code que tu leur a soumis? Si c'est le cas, par exemple, au lieu de déclarer ceci :
#CP {
width: 780px;
margin-right: auto;
margin-left: auto;
line-height: 13px;
}


Il va falloir que tu le fasse directement dans le code HTML, comme ceci :
<div id="CP" style="width:780px;margin-right:auto;margin-left:auto,etc...">...</div>


Tu vas aussi devoir virer le code Javascript de ta page.

Pour une annonce à mettre sur un autre site, il vaut mieux faire simple pour éviter les problèmes de ce type.
Modifié par Tony Monast (26 Nov 2010 - 13:12)
Ok merci.

Je sais pas si je suis sur la bonne voix pour la modification, j'ai fais un essai avec le code modifié ci-dessous et il y a un peux de mieux.

Serait-il possible d'avoir un coup de main pour le reste du code à modifier car là je suis perdu.

Sinon pour le javascript, y a pas moyen de le déplacer dans le code ou d'utiliser un codage autres qui pourrait remplacer ces fonctions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
}
#C1 img {
cursor:pointer;
}
#C9 img {
cursor:pointer;
} 
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<script language="javascript">
function remplace(image) {
document.getElementById("C8").innerHTML="<img src='"+image+"'>";
}
</script>
<script language="javascript"> 
function affiche_text(id) { 

if (id == "C1"){ 
var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><font color='#9900cc'><strong><span style='font-size: 12px;'>XXX</span></strong></font>"; 
var text2 = "<span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> CXXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> Autre:</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span>";
var text3 = "<strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br /><br /><br /><strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span>";
var text4 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 10px;'>XXX</span></strong>"; 
} 

else{ 
var text1 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><strong style='color: rgb(68, 68, 68);'><span style='font-size: 14px;'>XXX</span></strong><br /><br /><strong style='color: rgb(68, 68, 68);'><font color='#9900cc'><strong><span style='font-size: 12px;'>XXX</span></strong></font>"; 
var text2 = "<span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><span style='font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);'>XXX</span><br /><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> CXXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'>XXX</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span><br /><br /><span style='line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);'> Autre:</span><br /><span style='line-height: 13px; color: rgb(102, 102, 102);'>XXX</span>";
var text3 = "<strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br /><br /><br /><strong style='color: rgb(68, 68, 68);'>XXX</strong><br /><br /><span style='color: rgb(102, 102, 102);'>XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span><br style='color: rgb(102, 102, 102);' /><br style='color: rgb(102, 102, 102);' /><span style='color: rgb(102, 102, 102);'> XXX</span>";
var text4 = "<strong style='color: rgb(68, 68, 68);'><span style='font-size: 10px;'>XXX</span></strong>"; 
} 
document.getElementById("C3").innerHTML = text1;
document.getElementById("TC2").innerHTML = text2;
document.getElementById("C5").innerHTML = text3;
document.getElementById("C10").innerHTML = text4; 
} 
</script>
</head><body>
<div style="width: 780px; margin-right: auto; margin-left: auto; line-height: 13px;" id="CP">
<div style="width: 780px; text-align: center;" id="C1"> <img src="http://data.imagup.com/2/1105182592.png" onclick="affiche_text('C1');" height="12" width="41" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="http://data.imagup.com/3/1105182610.png" onclick="affiche_text('C3');" height="12" width="42" /></div>
<div style="height: 30px; width: 780px; clear: both;" id="E1">
<div style="text-align: center; width: 780px;" lucida="" grande="" ;="" line-height:="" 16px;="" id="C3"><strong style="color: rgb(68, 68, 68);"><span style="font-size: 14px;">XXX</span></strong><br />
<strong style="color: rgb(68, 68, 68);"><span style="font-size: 14px;">XXX</span></strong><br />
<br />
<font color="#9900cc"><strong><span style="font-size: 12px;">XXX</span></strong></font></div>
<div style="height: 40px; width: 780px;" id="E2">
<div style="width: 780px;" id="C4">
<table border="0" cellpadding="0" cellspacing="0" width="780">
<tbody>
<tr>
<td width="100">&nbsp;</td>
<td id="TC2" style="font-family: Century Gothic; font-size: 11px;" width="290"><span style="font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);">XXX</span><br />
<span style="font-weight: bold; font-size: 14px; line-height: 16px; color: rgb(68, 68, 68);">XXX</span><br />
<br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span><br />
<br />
<span style="line-height: 13px; font-weight: bold; color: rgb(68, 68, 68);">XXX</span><br />
<span style="line-height: 13px; color: rgb(102, 102, 102);">XXX</span>
</td>
<td width="0">&nbsp;</td>
<td style="text-align: center;" width="380"><br />
</td>
</tr>
</tbody>
</table>
</div>
<div style="height: 40px; width: 780px; clear: both;" id="E3">
<div style="overflow: auto; text-align: justify; width: 780px;" century="" gothic="" ;="" font-size:="" 11px;="" border:="" 1px="" solid="" #ccc;="" id="C5"><strong style="color: rgb(68, 68, 68);">XXX</strong><br />
<br />
<span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
<br style="color: rgb(102, 102, 102);" />
<span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
<br style="color: rgb(102, 102, 102);" />
<span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
<br style="color: rgb(102, 102, 102);" />
<span style="color: rgb(102, 102, 102);"> XXX</span><br />
<br />
<br />
<strong style="color: rgb(68, 68, 68);">XXX</strong><br />
<br />
<span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
<br style="color: rgb(102, 102, 102);" />
<span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
<br style="color: rgb(102, 102, 102);" />
<span style="color: rgb(102, 102, 102);"> XXX</span><br style="color: rgb(102, 102, 102);" />
<br style="color: rgb(102, 102, 102);" />
<span style="color: rgb(102, 102, 102);"> XXX</span></div>
<div style="height: 30px; width: 780px;" id="E4">
<div style="text-align: center; width: 700px; float: left;" century="" gothic="" ;="" font-size:="" 11px;="" text-decoration:="" none;="" id="C6">
<p><a href="http://www.lacotedesmontres.com/Ebel-1215891-PdN.html" target="_blank">XXX</a><br />
</p>
</div>
<div style="width: 80px; float: left;" id="C7">
<div style="height: 400px; width: 700px; float: left; background-image: url(http://data.imagup.com/2/1105402426.jpg);" id="C8">
<div style="float: left; width: 80px; text-align: right;" id="C9"><img src="http://data.imagup.com/2/1105402426.jpg" onclick="remplace('http://data.imagup.com/1/1289760482.png');" height="40" width="70" /><br />
<br />
<img src="http://data.imagup.com/2/1105402426.jpg" onclick="remplace('http://data.imagup.com/1/1289479756.png');" height="40" width="70" /><br />
<br />
<img src="http://data.imagup.com/2/1105402426.jpg" onclick="remplace('http://data.imagup.com/1/1289479789.png');" height="40" width="70" /><br />
<br />
<img src="http://data.imagup.com/2/1105402426.jpg" onclick="remplace('http://data.imagup.com/1/1289479720.png');" height="40" width="70" /></div>
<div style="height: 30px; width: 780px; clear: both;" id="E5">
<div style="text-align: center; width: 780px;" lucida="" grande="" ;="" line-height:="" 16px;="" id="C10"><strong style="color: rgb(68, 68, 68);"><span style="font-size: 10px;">XXX</span></strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Modifié par qwertz1 (26 Nov 2010 - 17:09)
Modérateur
Bonjour,

Déjà, débarrasses-toi du Javascript. Il est question ici de réaliser une simple annonce au format HTML, et non une page web interactive. Vise la simplicité. Retire les interactivités comme le remplacement du contenu au clic.

Ensuite, pour épurer ton code, tu peux définir la couleur du texte dans un conteneur, et ses enfants vont prendre cette couleur. Par exemple :


<div style="color:red">
<p>Mon paragraphe en rouge</p>
<span>Mon span en rouge</span>
etc...
</div>


Il reste encore des CSS dans la partie <style type="text/css">. Comme tu as été capable de transférer le reste dans le code HTML, tu peux en faire autant avec ce code restant.

Si tu as un hébergeur, tu peux aussi mettre ta page HTML en ligne. Ce sera plus facile de vérifier ce qui ne va pas avec ton code.
Ok merci pour ton aide.

J'ai réécris tout le code (sans le javascript) et le rendu dans l'annonce et parfait.

Cependant je veux absolument introduire le javascript car d'après eu ce dernier est accepté.

Dans un premier temps, je voudrais lorsque je clique sur une des image du div "C9" quel celle-ci apparaise dans le div "C8", mais je ne sais pas comment reintroduire cette action dans mon code.

<script language="javascript">
function remplace(image) {
document.getElementById("C8").innerHTML="<img src='"+image+"'>";
}
</script>

<img src="http://data.imagup.com/2/1105402426.jpg"
onclick="remplace('http://data.imagup.com/2/1105402426.jpg');"


<div
style="height: 400px; width: 700px; float: left; background-image: url(http://data.imagup.com/2/1105402426.jpg);"
id="C8">
</div>
<div style="text-align: right; width: 80px; float: left;" id="C9"><img
style="width: 70px; height: 40px;" alt=""
src="http://data.imagup.com/2/1105402426.jpg"><br>
<br>
<img style="width: 70px; height: 40px;" alt=""
src="http://data.imagup.com/2/1105402426.jpg"><br>
<br>
<img style="width: 70px; height: 40px;" alt=""
src="http://data.imagup.com/2/1105402426.jpg"><br>
<br>
<img style="width: 70px; height: 40px;" alt=""
src="http://data.imagup.com/2/1105402426.jpg"><br>
</div>
Modérateur
Es-tu certain que tu peux utiliser le Javascript dans ton annonce? Et si oui, doit-il être directement sur les éléments comme :

<img onclick="..." />


ou si tu peux utiliser des fonctions comme ceci :


<script type="text/javascript">
<!--
function maFonction() {
alert('Hello world');
}
-->
</script>


Je serais très étonné que le Javascript soit autorisé pour l'annonce, et ce peu importe la façon de l'intégrer. Après tout, leur message semblait très clair là-dessus.
Modifié par Tony Monast (29 Nov 2010 - 18:03)
Sujet clos
Aller à