Javacsript attribut src d'une image

Résolu
to-me Messages postés 79 Statut Membre -  
to-me Messages postés 79 Statut Membre -
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 :-)
A voir également:

5 réponses

Réponse 1 / 5
Alain_42 Messages postés 5413 Statut Membre 894
 
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
1
Réponse 2 / 5
to-me Messages postés 79 Statut Membre 8
 
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
0
Alain_42 Messages postés 5413 Statut Membre 894
 
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
0
Réponse 3 / 5
to-me Messages postés 79 Statut Membre 8
 
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');""> :  </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
Alain_42 Messages postés 5413 Statut Membre 894
 
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>
-1
Réponse 4 / 5
to-me Messages postés 79 Statut Membre 8
 
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
Alain_42 Messages postés 5413 Statut Membre 894
 
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')
-1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
to-me Messages postés 79 Statut Membre 8
 
Merci
-1

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse