Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1483 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mettre une image à la place du texte

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mettre une image à la place du texte

n°1985244
davidchouk
Posté le 18-04-2010 à 16:47:25  profilanswer
 

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.

mood
Publicité
Posté le 18-04-2010 à 16:47:25  profilanswer
 

n°1985394
olivthill
Posté le 19-04-2010 à 10:23:28  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mettre une image à la place du texte

 

Sujets relatifs
[BATCH] creation de repertoires par parcours de fichier textejavascript desactiver clic droit sur une image
Texte plus 'gras' sur firefox que sur IE/chromeMettre à jour une URL en temps réel selon ce qui est écrit ds 1 input
Traitement d'imageMacro pour formater un fichier texte ou excel [Résolu]
Extraire une ligne d'une page web vers un fichier texteRégler la taille de la longueur du texte
Editer automatiquement les valeurs d'un fichier texteDreamweaver : mettre une image de fond derriere un titre
Plus de sujets relatifs à : Mettre une image à la place du texte


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR