Mettre une image à la place du texte

Mettre une image à la place du texte - HTML/CSS - Programmation

Marsh Posté le 18-04-2010 à 16:47:25    

Bonjour,
 
Après beaucoup de je recherche de reste perplexe...
 
J'ai fait faire mon site internet par un professionel mais je n'ai plus de contact avec celui-ci donc j'ai appris à actualiser mon site tout seul. Mon souci est que je souhaite désormais mettre une image à la place du texte de description de l'article et je ne trouve pas la solution.
 
Je voudrais mettre une image à la place de:"caseText="    Jean Nouveau coupe Carotte. ";"
 
Vous trouverez ci-dessous le script intégral:
 
<html>
<head>
<link rel=stylesheet type="text/css" href="textcat.css" title="textcat">
<script language="JavaScript1.1">
 
var Path="articles/basic core_guys/"; //A modifier
var Type_Article=0; //0:Jeans, 1:Blousons, 2:Tops
var Collection_ImgList=new Array("00501","50166","00503","00504","00506","00511","00511.","00512","00533","00307","00401","00752","00752.","00910","00971","01934","04503","04506","04935","04935","04970","04973","05939","24503","24504","24504.","25503","25504","26506","26511","26512","27506","27511","27533","32005","32006","32007",
    "42201","42202","42203","42206","42207","42208","42209","42209.","42210","42211","42212","42216","42220","42221","42223","42225","42227","42228","42312","42313","42314","42315","42316","42317","42320","42322","42324",
                                "42325","42326","42327","42331","42333","42334","42335","42725","42913","42930","42931","42932","42936","42971","42973","42973.","42974","42974.","42999",
                                "60151","60151.","60491","62111","62112","62112.","62112..","62114","62140","62140.","62141","62141.","62141..","62144","62155","62156","62158","62159","62165","62307","72115","72115.","72116","72117","72118","72120","72121","72122","72510","72530","72530.","72532","82110","82111","82113","82114","82116","92481","92483","92484","92485","92486","92487","92496","92497" );
var Collection_Index=0;
var Collection_HImgArray=new Array();
var Collection_LImgArray=new Array();
 
for (var i=0;i<Collection_ImgList.length;i++) {
 Collection_HImgArray[i]=new Image(239,267);
 Collection_HImgArray[i].src=Path+Collection_ImgList[i]+".jpg";
 Collection_LImgArray[i]=new Image(100,100);
 Collection_LImgArray[i].src=Path+Collection_ImgList[i]+".jpg";
}
 
function updateType(type) {
Type_Article=type;
 
if (Type_Article==0) {
 document.images[5].src='img/jeanson.gif';
 document.images[6].src='img/blousonoff.gif';
 document.images[7].src='img/topsoff.gif';
}
else {
 if (Type_Article==1) {
  document.images[5].src='img/jeansoff.gif';
  document.images[6].src='img/blousonon.gif';
  document.images[7].src='img/topsoff.gif';
 }
 else {
  document.images[5].src='img/jeansoff.gif';
  document.images[6].src='img/blousonoff.gif';
  document.images[7].src='img/topson.gif';
 }
}
return true;
}
 
function updateText(form) {
var caseText="";
 
switch (Collection_ImgList[Collection_Index]) {
case "00501":
caseText="    Jean Coupe standard, straight leg. ";
updateType(0);
break;
case "00503":
caseText="    Jean coupe trés tendance confort et originalité. ";
updateType(0);
break;
case "00504":
caseText="    Jean Nouveau coupe Carotte. ";
updateType(0);
break;
case "00505":
caseText="    . ";
updateType(0);
break;
case "00506":
caseText="    Jean taille basse coupe droite. ";
updateType(0);
break;
case "00511":
caseText="    Jean coupe slim fit bas étroit trés tendance. ";
updateType(0);
break;
case "00511.":
caseText="    Jean coupe slim fit bas étroit trés tendance. ";
updateType(0);
break;
case "00512":
caseText="    Jean coupe taille basse bas évasé. ";
updateType(0);
break;
case "00513":
caseText="    Jean coupe trés étroite le plus 'Skimy'. ";
updateType(0);
break;
case "00533":
caseText="    . ";
updateType(0);
break;
...
}
 
if (document.all) {
 document.all.article.innerText= caseText ? Collection_ImgList[Collection_Index].replace("b","" ) : 'En cours de redaction';
 document.all.descriptif.innerText= caseText ? caseText : 'En cours de redaction';
}
else {
 document.readerform.article.value= caseText ? Collection_ImgList[Collection_Index].replace("b","" ) : 'En cours de redaction';
 document.readerform.descriptif.value= caseText ? caseText : 'En cours de redaction';
}
}
 
function PrevImg() {
for (var i=0;i<3;i++) {
 if (i==0) {
  if (Collection_Index-1==0) {
   document.images[i+1].src=Collection_LImgArray[Collection_ImgList.length-1].src;
  }
  else {
   if (Collection_Index-1==-1) {
    document.images[i+1].src=Collection_LImgArray[Collection_ImgList.length-2].src;
   }
   else {
    document.images[i+1].src=Collection_LImgArray[Collection_Index-2].src;
   }
  }
 }
 else {
  if (i==1) {
   Collection_Index--;
   if (Collection_Index==-1) Collection_Index=Collection_ImgList.length-1;
   document.images[i+1].src=Collection_LImgArray[Collection_Index].src;
   document.images[i+7].src=Collection_HImgArray[Collection_Index].src;
   updateText(form);
   }
  else {
   if (Collection_Index+1==Collection_ImgList.length) {
    document.images[i+1].src=Collection_LImgArray[0].src;
   }
   else {
    document.images[i+1].src=Collection_LImgArray[Collection_Index+1].src;
   }
  }
 }
}
}
 
function NextImg() {
for (var i=0;i<3;i++) {
 if (i==0) {
  if (Collection_Index-1==-1) {
   document.images[i+1].src=Collection_LImgArray[0].src;
  }
  else {
   document.images[i+1].src=Collection_LImgArray[Collection_Index].src;
  }
 }
 else {
  if (i==1) {
   Collection_Index++;
   if (Collection_Index==Collection_ImgList.length) Collection_Index=0;
   document.images[i+1].src=Collection_LImgArray[Collection_Index].src;
   document.images[i+7].src=Collection_HImgArray[Collection_Index].src;
   updateText(form);
   }
  else {
   if (Collection_Index+1==Collection_ImgList.length) {
    document.images[i+1].src=Collection_LImgArray[0].src;
   }
   else {
    document.images[i+1].src=Collection_LImgArray[Collection_Index+1].src;
   }
  }
 }
}
}
 
function updateIndex(newIndexvalue) {
for (var i=0;i<Collection_ImgList.length;i++) {
 if (Collection_ImgList[i]==newIndexvalue) {
  Collection_Index=i;
  break;
 }
}
for (var i=0;i<3;i++) {
 if (i==0) {
  if (Collection_Index-1==-1) {
   document.images[i+1].src=Collection_LImgArray[Collection_ImgList.length-1].src;
  }
  else {
   document.images[i+1].src=Collection_LImgArray[Collection_Index-1].src;
  }
 }
 else {
  if (i==1) {
   document.images[i+1].src=Collection_LImgArray[Collection_Index].src;
   document.images[i+7].src=Collection_HImgArray[Collection_Index].src;
   updateText(form);
   }
  else {
   if (Collection_Index+1==Collection_ImgList.length) {
    document.images[i+1].src=Collection_LImgArray[0].src;
   }
   else {
    document.images[i+1].src=Collection_LImgArray[Collection_Index+1].src;
   }
  }
 }
}
}
 
function updateForm(article,type) {
updateIndex(article);
updateType(type);
}
 
</script>
</head>
<body onLoad="updateText(form);updateType(0)">
<font size=+4 color="#977000"><center>Levi's<font size=4 face="verdana, arial"><sup>&reg;</sup></font> Red<font size=4 face="times, arial"><sup>TM</sup></font> Tab<font size=4 face="verdana, arial"><sup>&reg;</sup></font> Jeans<font size=4 face="times, arial"><sup>TM</sup></font>, Classics</center></font>
<center>
<table width=100%>
<tr><td align=center><font size=+3 color="#977000">Guys</font></td>
<td width=80 align=right><a href="javascript:PrevImg()" onMouseOver="document.images[0].src='img/precedenton.gif'; return true" onMouseOut="document.images[0].src='img/precedent.gif'; return true"><img src="img/precedent.gif" border=0 alt="Précédent"></a></td>
<td width=160 align=center><script language=javascript>document.write("<img src='"+Collection_LImgArray[Collection_ImgList.length-1].src+"' height=120 width=120>" )</script></td>
<td width=160 align=center><script language=javascript>document.write("<img src='"+Collection_LImgArray[0].src+"' height=120 width=120 border=2>" )</script></td>
<td width=160 align=center><script language=javascript>document.write("<img src='"+Collection_LImgArray[1].src+"' height=120 width=120>" )</script></td>
<td width=80><a href="javascript:NextImg()" onMouseOver="document.images[4].src='img/suivanton.gif'; return true" onmouseOut="document.images[4].src='img/suivant.gif'; return true"><img src="img/suivant.gif" border=0 alt="Suivant"></a></td></tr>
<tr><td colspan=2></td>
<td align=center><a href="javascript:updateForm('00501',0)" onMouseOver="document.images[5].src='img/jeanson.gif'; return true" onmouseOut="if(Type_Article!=0){document.images[5].src='img/jeansoff.gif'; return true}"><img src="img/jeansoff.gif" border=0 alt="Jeans"></a></td>
<td align=center><a href="javascript:updateForm('72115',1)" onMouseOver="document.images[6].src='img/blousonon.gif'; return true" onmouseOut="if(Type_Article!=1){document.images[6].src='img/blousonoff.gif'; return true}"><img src="img/blousonoff.gif" border=0 alt="Blousons"></a></td>
<td align=center><a href="javascript:updateForm('42201',2)" onMouseOver="document.images[7].src='img/topson.gif'; return true" onmouseOut="if(Type_Article!=2){document.images[7].src='img/topsoff.gif'; return true}"><img src="img/topsoff.gif" border=0 alt="Tops"></a></td>
<td></td></tr>
</table>
</center>
<hr size=1 width=100% color=cccccc>
<form name="form">
<table>
<tr><td><script language=javascript>document.write("<img src='"+Collection_HImgArray[0].src+"'>" )</script></td>
<td valign=top>
<SCRIPT LANGUAGE="JavaScript">
<!--
// IE 4 only
 
if (document.all) document.write('<table><tr><td><IMG border=0 SRC="img/flg.gif">&nbsp;</td><td><b><font color=purple size=+2><DIV ID="article">&nbsp;</DIV></font></b></td></tr></table>');
 
// all others
else document.write('<table><tr><td><IMG border=0 SRC="img/flg.gif">&nbsp;</td><td><font color=purple><h2><INPUT NAME="article" TYPE="text" VALUE="" SIZE=9></h2></font></td></tr></table>');
 
// -->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
// IE 4 only
 
if (document.all) document.write('<font size=+2><DIV ID="descriptif">&nbsp;</DIV></font>');
 
// all others
else document.write('<font size=+2><INPUT NAME="descriptif" TYPE="text" VALUE="" SIZE=9></font>');
 
// -->
</SCRIPT>
</td></tr>
</table>
</form>
<!-- phpmyvisites -->
<script type="text/javascript">
<!--
var a_vars = Array();
var pagename='';
 
var phpmyvisitesSite = 1;
var phpmyvisitesURL = "http://www.levistore.fr/phpmyvisites/phpmyvisites.php";
//-->
</script>
<script language=javascript src="http://www.levistore.fr/phpmyvisites/phpmyvisites.js" type="text/javascript"></script>
<!-- /phpmyvisites -->  
</body>
</html>
 
 
 
Merci beaucoup d'abord à ceux qui on eu la patience de lire le script et merci par avance à ceux me trouveront la solution.

Reply

Marsh Posté le 18-04-2010 à 16:47:25   

Reply

Marsh Posté le 19-04-2010 à 10:23:28    

Citation :

Je voudrais mettre une image à la place de:"caseText="    Jean Nouveau coupe Carotte. ";"


caseText n'est qu'une variable temporaire que l'utilisateur ne voit pas. Je crois que la demande est plutôt de mettre une image dans l'un des éléments de la page.  
caseText est utilisé dans les lignes suivante.

if (document.all) {  
 document.all.article.innerText= caseText ? Collection_ImgList[Collection_Index].replace("b","" ) : 'En cours de redaction';  
 document.all.descriptif.innerText= caseText ? caseText : 'En cours de redaction';  
}  
else {  
 document.readerform.article.value= caseText ? Collection_ImgList[Collection_Index].replace("b","" ) : 'En cours de redaction';  
 document.readerform.descriptif.value= caseText ? caseText : 'En cours de redaction';  
}  

On voit que caseText va servir a remplir, soit, l'élément article, soit l'élément descriptif. Dans lequel de ces deux éléments voulez vous avoir une image ?
 
Est-ce que c'est un remplacement dans tous les cas, ou bien est-ce que vous voudrez avoir de temps en temps du texte, et de temps en temps une image ? Dans ce dernier cas, il vaudrait mieux avoir deux zones, une pour un texte, et une pour une image, et au besoin cacher la zone qui n'est pas utilisée.
 
Faut-il faire ce remplacement en Javascript ?
Actuellement, cela se fait en Javascript. Je conseillèrais plutôt de le faire en PHP ou Java, pour que la page soit créée dès le début avec les bons éléments, au lieu de les bidouiller par après.


Message édité par olivthill le 19-04-2010 à 10:25:19
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed