image différent selon action souris

Bonjour à tous!

J'ai besoin d'aide svp.
Est-il possible de sélectionner une image pour remplir tant qu'on veut des div vides avec.
Voici un exemple où je souhaite remplir un arbre a différents endroits avec un fruit que j'ai sélectionné.

Partie javascript
 //Fonction qui ouvre l'image du fruit dans les div vides sur l'arbre
                                                                                                                            
                        function div_image(arbre,fruit)
                                {
                                document.getElementById(arbre).innerHTML='<img style="width:93px; height:69px;" src="'+fruit+'" />';
                                document.getElementById(arbre).style.border="1px solid red";
                                }

Partie HTML

<div id="branche1" style="position:absolute;top:100px;left:500px;width:93px; height:69px;border:1px solid black;" onclick="div_image('branche1',fruit);" ></div>
<div id="branche2" style="position:absolute;top:500px;left:500px;width:93px; height:69px;border:1px solid black;" onclick="div_image('branche2',fruit);"></div>

Voilà mon problème ja n'arrive pas a faire que fruit soit en faite l'image que j'ai sélectionné soit pomme.png ou poire.png

Merci pour votre aide

Salut,

Sur le onClick de ton image (le fruit) il faut que tu affecte le nom de ton image à une variable globale ou à un champ caché pour sauvegarder le nom de l'image cliquée. Tu pourras donc récupérer le nom de la dernière image cliquée par la suite.

bonjour
tu a oublie de mettre l'extention du fichier

document.getElementById(arbre).innerHTML='<img style="width:93px; height:69px;" src="'+fruit+'.png" />';

Merci pour vos réponses je me met au travail

Salut,
pourriez vous m'aider svp

Ma fonction a évolué.En effet, je veux changer la bordure de l'image du
fruit selon l'action de la souris. Pour j'uitlise une variable selection
qui 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"">


En faite,je souhaite avoir une bordure noire (image survolée),rouge ( image activée via click) ou sans bordure (par défaut et onmouseout)


Merci encore

rajoute un onmouseout et gere le probleme en restaurant la couleur tu peut aussi le faire en css