Javacsript attribut src d'une image

Résolu
Bonjour à tous,

Je souhaite changer ma variable fruit qui est une image

Partie javascript


Var fruit="pomme.png"

function change_fruit(fruit)
{
//ici l'utilisation via un click va changer le fruit par défaut en sélectionnant un autre
fruit=document.images[autrefruit].src;
}

Partie html

<div style="width:100px; height:72px;" ><img id="fruit1" src="orange.png"style="width:93px; height:69px;" onclick="change_fruit('fruit1');" ></div>   

Mon code ne fonctionne car je ne sais pas comment changer le chemin de l'image pour fruit

Merci bcp

to-me :-)
Configuration: Linux
Firefox 2.0.0.16

5 réponses

  1. Oups erreur de frappe. dsl j'ai bien mis pomme mais cela ne fonctionne pas. Ma fonction a évolué mais sans réussite. En effet selection correspond au name du fruit sélectionné. Ainsi quand je sélectionne pomme sa bordure est rouge, quand je passe ensuite à orange, sa bordure devient rouge mais celle de pomme reste pareil. de plus la bordure noire persiste.

    Partie javascript

    function red_border(selection)
    {
    document.images[selection].style.border="2px solid red";
    }

    //Fonction qui met une bordure noire a une div survolee par la souris

    function black_border(survole)
    {
    document.images[survole].style.border="2px solid black";
    }

    //Fonction qui enleve la bordure a une div

    function border_none(fruit,selection)
    {
    if(selection !== "")
    {
    document.images[fruit].style.border="none";
    }
    }

    Partie html

    <img id="fruit1" name="pomme" src="pomme.png" style="width:93px; height:69px;border:none;" onmouseover="survole="pomme";black_border(survole);" onclick="selection="pomme";red_border(selection);fruit="pomme.png"" onmouseout="selection="pomme";border_none('pomme');" >

    <img id="fruit2" name="orange" src="orange.png" border="0"style="width:93px; height:69px;" onmouseover="survole="orange";black_border(survole);" onmouseout="selection="orange";border_none('orange');" onclick="selection="orange";red_border(selection);fruit="orange.png"">

    Résumé: je souhaite avoir une bordure:
    noire : image survolée
    rouge : image activée via click
    sans bordure : par défaut et onmouseout

    C'est ysmpa de t'intéresser à l'affaire

    To-me
    1. J'ai regardé ça d'un peu plus près:

      dans une chaine qui comence et finit par des " il ne faut pas mettre des " sinon javascript croit que c'est une fin de chaine

      dans ce cas au milieu il faut mettre des '
      par ex: onmouseout="selection="pomme";border_none('pomme');" >

      il faut:
      onmouseout="selection='pomme';border_none('pomme');" > 


      essayes comme ça, je t'ai simplifié ton code et complété par une fonction manquante.

      <html>
      <script language="javascript" type="text/javascript">
      function red_border(selection)
      {
      document.images[selection].style.border="2px solid red";
      }
      
      //Fonction qui met une bordure noire a une div survolee par la souris
      
      function black_border(survole)
      {
      document.images[survole].style.border="2px solid black";
      }
      
      //Fonction qui enleve la bordure a une div
      
      function border_none(fruit)
      {
      //if(selection !== "")
      //{
      document.images[fruit].style.border="none";
      //}
      }
      function red_border(fruit){
      
      document.images[fruit].style.border="4px solid red";
      }
      
      
      </script>
      <img id="fruit1" name="pomme" src="pomme.png" style="width:93px; height:69px;border:none;" onmouseover="black_border('pomme');" onclick="red_border('pomme');" onmouseout="border_none('pomme');" >
      
      <img id="fruit2" name="orange" src="orange.png" border="0"style="width:93px; height:69px;" onmouseover="black_border('orange');" onmouseout="border_none('orange');" onclick="red_border('orange');">
      
      
      Résumé: 
      noire : image survolée
      rouge : image activée via click (4px pour l'essai)
      sans bordure : par défaut et onmouseout
      
      </html>


      chez moi ça marche

      @lain
  2. Re Alain_42,

    C'est super ça fonctionne, mais à la place de l'id j'utilise le name. il me reste un dernier point:
    pour que l'image garde une bordure rouge tant qu'elle est sélectionnée, j'ai crée une fonction avec une variable selection qui passe à 1 quand l'image est sélectionnée mais le onmouseover ne fonctionne plus.

    Partie javascript

    function red_border(temps)
    {
    document.images[temps].style.border="2px solid red";
    }

    //Fonction qui enleve la bordure a une div

    function border_none(temps)
    {
    if (selection==0)
    {
    document.images[temps].style.border="none";
    }
    }

    partie html

    <img id="fruit1" name="pomme" src="pomme.png" style="width:93px; height:69px;" onmouseover="black_border('nuage');" onmouseout="border_none('nuage');" onclick="red_border('nuage');selection=1" onfocus="selection=1" >

    Le problème c'est que quand une autre image est sélectionnée(orange à la place de pomme par exemple), la bordure reste rouge jusqu'a ce que la souris survole l'image.

    J'espère avoir été claire.

    Merci

    to-me
    1. Salut,

      tu veux que ces évènements modifient l'image:
      <img id="fruit1" name="pomme"

      hors lors de l'appel de la fonction tu passes un autre nom en argument nuage

      9px;" onmouseover="black_border('nuage');"

      qui est utilisé pour atteindre cette image qui elle a un autre name (pomme)

      essayes :

      onmouseover="black_border('pomme')
  3. Merci énormément ça fonctionne.

    Serait-il possible que tu m'aides pour un autre soucis.
    Je cherche a avoir 3 états différents pour la bordure de l'image fruit.

    Partie javascript

    //Fonction qui met une bordure rouge a la div (nuage, soleil, etc) qui est selectionnee

    function red_border(temps)
    {
    document.getElementById(temps).style.border="1px solid red";
    }

    //Fonction qui met une bordure noire a une div survolee par la souris

    function black_border(temps)
    {
    document.getElementById(temps).style.border="2x solid black";
    }

    //Fonction qui enleve la bordure a une div
    function border_none(temps)
    {

    document.getElementById(temps).style.border="none";
    }

    Partie html

    <div style="width:100px; height:72px;" ><img id="fruit2" name="orange"src="orange.png" style="width:93px; height:69px;" onmouseover="black_border('temps2');" onmouseout="border_none('temps2')" onclick="red_border('temps2');change_fruit('fruit1','pomme.png');"">&nbsp:  </div>

    mais rien ne fonctionne.Comment dois je m'y prendre stp, rien ne fonctionne et je ne sais pas utiliser les frameworks

    Merci d'avance

    To-me
    1. si tu atteint un element par son id document.getElementById(temps), il serait qd même bien de passer cet id en argument, que vient faire "temp2' dans l'appel de la fonction ? il faut lui passer l'id que tu veux modifier

      <div style="width:100px; height:72px;" ><img id="fruit2" name="orange" src="orange.png" style="width:93px; height:69px;" onmouseover="black_border('temps2');" onmouseout="border_none('temps2')" onclick="red_border('temps2');change_fruit('fruit1','pomme.png');""> : </div>

      fais:

      <div style="width:100px; height:72px;" ><img id="fruit2" name="orange" src="orange.png" style="width:93px; height:69px;" onmouseover="black_border('fruit2');" onmouseout="border_none('fruit2')" onclick="red_border('fruit2');change_fruit('fruit2','pomme.png');""> :  </div> 
  4. Salut,

    fruit=document.images[autrefruit].src;

    cette methode atteint l'objet image par le nom, hors tu n'as pas mis de name dans ton <img

    mets :
    <img name="fruit1" id="fruit1" src="orange.png"style="width:93px; height:69px;" onclick="change_fruit('fruit1');" >


    et pour changer le src:

    Partie javascript
    
    
    // Var fruit="pomme.png" //pas besoin puisque tu passes la valeur en argument à la fonction
    
    function change_fruit(fruit,image)
    {
    //ici l'utilisation via un click va changer le fruit par défaut en sélectionnant un autre 
    document.images[autrefruit].src=image;
    } 


    partie html:

    <img id="fruit1" src="orange.png"style="width:93px; height:69px;" onclick="change_fruit('fruit1','ta_nouvelle_image.png');" >


    @lain