Javacsript attribut src d'une image

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

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

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

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

Merci