image générée devant changer au survol de la souris [Résolu]

Darkyl · 12/04/2011, 00h32

Bonjour,

Je cherche à faire qu'une image change de source quand la souris passe dessus. Mais comme elle est générée en temps réel par php, le code

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
echo("<SPAN style=\"position: absolute; top: ".$y." px; left: ".$a2." px;width: 80px; height: 80px\">
<A HREF=\"#\" onMouseOver=\"i219741.src='ressources graphiques\\case\\casesurvolee.png'\"  onMouseOut=\"i219741.src='ressources graphiques\\case\\casevide.png'\"><IMG SRC=\"ressources graphiques\\case\\casevide.png\" BORDER=0 NAME=\"i219741\" ALT=\"\" HSPACE=0 VSPACE=0></A>
</SPAN>");

ne marche pas...

même

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
echo("<SPAN style=\"position: absolute; top: ".$y." px; left: ".$a2." px;width: 80px; height: 80px\">
<A HREF=\"#\" onMouseOver='ressources graphiques\\case\\casesurvolee.png'  onMouseOut='ressources graphiques\\case\\casevide.png'>
<IMG SRC=\"ressources graphiques\\case\\casevide.png\" BORDER=0 NAME=\"case'.$nbre.'\" ALT=\"\" HSPACE=0 VSPACE=0></A>
</SPAN>");

ne marche pas.

Comment faire autrement ?

ABCIWEB · 12/04/2011, 01h29

Faut faire cela en javascript. onmouseover, onmouseout sont des évènements javascript.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function Chang_img(id,source)
{
var id_img;

	if (id_img = document.getElementById(id))
	{
		id_img.src = source; 
	}
}
</script>
 
</head>
<body>
<a href=""  onmouseover = "Chang_img('id1','repertoire/image_b.jpg')" onmouseout = "Chang_img('id1','repertoire/image_a.jpg')" ><img id = "id1" src = "repertoire/image_a.jpg"></a>

</body>

Shikiryu · 12/04/2011, 09h48

Moi je ferai comme ça (à peu près la même chose que le précédent

mais en light)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script>
function Chang_img(id,source){
    id.src = source;
}
</script>
<img id="id1" src="http://www.configmac.com/images/logiciel/image.jpg" onmouseover="Chang_img(this, 'http://www.fondationcultureetdiversite.org/items/medias/s/832fb2f600b8117d05a3dbdbda830597_picto-image.gif')" onmouseout="Chang_img(this, 'http://www.configmac.com/images/logiciel/image.jpg')">

http://jsfiddle.net/2S36p/1/

Darkyl · 12/04/2011, 11h16

bonjour et merci de vos réponses.

Alors, j'ai essayer le dernier code, a priori, il marche mais il ne trouve pas l'image...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
echo("<SPAN style=\"position: absolute; top: ".$y." px; left: ".$a2." px;width: 80px; height: 80px\">
<img id=\"case'.$nbre.'\" BORDER=0 src=\"ressources graphiques\\case\\casevide.png\" 
onmouseover=\"Chang_img(this, 'ressources graphiques\\case\\casesurvolee.png')\" 
onmouseout=\"Chang_img(this, 'ressources graphiques\\case\\casevide.png')\">
</SPAN>");

IMG affiche bien la casevide au démarrage mais des que je survol ou que je ne survol plus, il affiche la carré avec une croix rouge...
D’où cela peut-il bien venir? Il n'y a pourtant pas d'erreur sur les chemins...

Shikiryu · 12/04/2011, 11h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
echo '<span style="position: absolute; top: '.$y.' px; left: '.$a2.' px;width: 80px; height: 80px">
<img id="case'.$nbre.'" BORDER=0 src="ressources%20graphiques/case/casevide.png"
onmouseover="Chang_img(this, \'ressources%20graphiques/case/casesurvolee.png\')"
onmouseout="Chang_img(this, \'ressources%20graphiques/case/casevide.png\')">
</span>';

serait pas mieux ?

Remarques :

Il faut éviter les espaces dans les urls
Pourquoi s'embeter avec des backslashs?
Tu avais des problèmes de ' et " quand arrivaient les variables PHP
N'hésite pas à utiliser la console de ton navigateur afin de vérifier les éventuelles erreurs javascript ou les appels manqués (à des images par exemples). Tous les navigateurs récents en ont une.

Darkyl · 12/04/2011, 11h42

merci ca marche nikel. Par contre comme ma casevide est rempli de transparence (hormis les bordure) et que ma casesurvolee est rempli d'une couleur, quand la souris sort de la case, il affiche bien la casevide mais on ne le remarque pas car la casesurvolee est visible en dessous. Comment faire pour qu'il efface l'image précédemment affichée et la remplace par la nouvelle au lieu de l'afficher par dessus?

Sinon, je te remercie, cela marche niquel (j'ai remplacé ma casevide par une case rempli d'une couleur et là, on fois bien le changement d'image...).

Concernant tes remarques,
je ne savais pas pour les backslasch, sinon tu as raison pourquoi s'embéter...
J'ai remis les espaces dans mes URL et non le %20 et cela marche bien. Pourquoi il faut éviter? Dois-je les remettre?...

Pour les ' et les ", j'avoue qu'éditer du html avec php, c'est déjà dur, mais du javascript dans du html généré par php, je ne m'y retrouvais plus.

En tout cas, Merci beaucoup...

Shikiryu · 12/04/2011, 14h16

Le javascript, ici, remplace la source (src="") de l'image sur les évènements onmouseover et onmouseout (il efface cette attribut et en met un nouveau). La souris ne pouvant être dessus et en dehors de l'image en même temps, il me semble impossible d'afficher les 2 images en même temps à moins d'avoir un poste ou un navigateur lent, ou un problème de réseau.

Pour les réponses à mes remarques, les urls (que ce soit des sites, des images, des fichiers CSS) se font toujours avec des slash (/) et non des backslashs (\). Le seul endroit où utiliser ces derniers sont sur les chemins windows...

En général, il faut éviter les espaces et signes spéciaux (accents par exemple) dans les URLs. Ils sont habituellement modifiés automatiquement par le navigateur en hexadécimal pour être valide (ex : espace = %20). Ils ne le font pas obligatoirement, et donc il vaut mieux les éviter... ou les encoder

Je vous invite à lire http://fr.wikipedia.org/wiki/Uniform_Resource_Locator qui en parlera beaucoup mieux que moi.

Pour les apostrophes et guillemets, si ça commence à être brouillon, rien ne vous empêche de diviser 1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo

en plusieurs

ABCIWEB · 12/04/2011, 17h58

Citation:

Envoyé par Shikiryu

Moi je ferai comme ça (à peu près la même chose que le précédent

mais en light)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<script>
function Chang_img(id,source){
    id.src = source;
}
</script>
<img id="id1" src="http://www.configmac.com/images/logiciel/image.jpg" onmouseover="Chang_img(this, 'http://www.fondationcultureetdiversite.org/items/medias/s/832fb2f600b8117d05a3dbdbda830597_picto-image.gif')" onmouseout="Chang_img(this, 'http://www.configmac.com/images/logiciel/image.jpg')">

Oui c'est plus light mais pour juste une ligne en moins dans la fonction javascript, le code devient très spécifique et ne permet plus d'externaliser les évènements onmouseover onmouseout en dehors des balises de l'image. En reprenant la fonction d'origine et l'exemple avec this, on pourrait donc faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
function Chang_img(id,source)
{
var id_img;

	if (id_img = document.getElementById(id))
	{
		id_img.src = source; 
	}
}
</script>
<img id="id1" src="http://www.configmac.com/images/logiciel/image.jpg" onmouseover="Chang_img(this.id, 'http://www.fondationcultureetdiversite.org/items/medias/s/832fb2f600b8117d05a3dbdbda830597_picto-image.gif')" onmouseout="Chang_img(this.id, 'http://www.configmac.com/images/logiciel/image.jpg')">

<p><span onmouseover="Chang_img('id1', 'http://www.fondationcultureetdiversite.org/items/medias/s/832fb2f600b8117d05a3dbdbda830597_picto-image.gif')" >changer image</span><span onmouseover="Chang_img('id1', 'http://www.configmac.com/images/logiciel/image.jpg')" >Rétablir</span></p>

A peu de chose près on passe d'une fonction très spécifique à une fonction beaucoup plus générique.

Cette deuxième méthode nécessite cependant d'avoir un id défini pour l'image cible, alors que la méthode "ligth" de Shikiryu permet de s'en affranchir.
@Shikiryu : tant qu'à faire du ligth, tu aurais pû le supprimer (l'id de l'image) puisqu'à mon avis c'est le seul avantage de ta méthode

Shikiryu · 12/04/2011, 18h22

C'est pas faux, je suis parti de ton exemple, plutôt que de celui de l'OP qui était plutôt fouilli.

Le but de ma méthode était de supprimer une balise <a> qui ne sert à rien vu qu'aucun attribut href ne lui est attribué. Sémantiquement, c'était une aberration

L'id, lui, qu'il soit là ou pas n'interfère pas en ce sens.

J'avoue que j'ai supposé qu'il avait mis une balise <a> autour de l'image, non pas pour externaliser la fonction, mais parce qu'il n'avait pas connaissance de la possibilité de mettre un évènement JS onmouseover/onmouseout sur une image. Peut-être n'était-ce pas le cas. Il fera le tri, il a plein de solutions différentes, le but étant qu'il comprenne le fonctionnement et pas de faire un copier/coller hasardeux.

Et autant qu'on soit clair, je ne fais pas une compèt' de "c'est moi qui propose la meilleure solution", j'ai l'impression que la reprise de ton code en le modifiant et le qualifiant de light t'as affecté et ce n'était pas le but de ma démarche, loin de là.

Darkyl · 12/04/2011, 20h18

je savais que l'on pouvais mettre une fonction javascript sur onmouseover et onmouseout d'une image mais cela ne marchait plus quand je mettais le code en 'dixit' php. J'ai alors penser que c'étais dû au fait que php s'exécuter avant côté serveur et ne pouvais donc pas faire changer l'image au moment du survol. Mais bon, avant de comprenne la philosophie, il y a du boulot...

Dernière question: si ma première image est une image transparente, quand je sors de la deuxième (sur onmouseout) et que je reviens à la première, je vois toujours la deuxième image

et donc il ne se passe rien. Mon but étant d'avoir une case vide avec juste des bordures, puis d'afficher une case colorée quand on survol. Mais comme il affiche l'image transparente au mouseout, on vois toujours l'image de 'case survolee'. Bref je ne sais pas si je me fais bien comprendre

.... Plus que cette interrogation et mon problème est résolu...

ABCIWEB · 12/04/2011, 21h43

Citation:

Envoyé par Shikiryu

Le but de ma méthode était de supprimer une balise <a> qui ne sert à rien vu qu'aucun attribut href ne lui est attribué. Sémantiquement, c'était une aberration

L'id, lui, qu'il soit là ou pas n'interfère pas en ce sens.

Oui je n'avais rien mis dans l'attribut href parce que ce n'était pas le coeur du problème, c'était donc en attendant qu'il le remplisse si besoin. Et si pas besoin alors pas besoin du <a></a> évidemment.

Citation:

Envoyé par Shikiryu

Et autant qu'on soit clair, je ne fais pas une compèt' de "c'est moi qui propose la meilleure solution", j'ai l'impression que la reprise de ton code en le modifiant et le qualifiant de light t'as affecté et ce n'était pas le but de ma démarche, loin de là.

Non cela ne m'a pas affecté mais ce que je trouvais dommage c'est que tu propose une solution voisine sans en indiquer les avantages et inconvénients.
En plus du code, un petit commentaire ça aide souvent les débutants

Et c'est donc ces commentaires que j'ai fait par la suite

ABCIWEB · 12/04/2011, 21h57

Citation:

Envoyé par Darkyl

je savais que l'on pouvais mettre une fonction javascript sur onmouseover et onmouseout d'une image mais cela ne marchait plus quand je mettais le code en 'dixit' php. J'ai alors penser que c'étais dû au fait que php s'exécuter avant côté serveur et ne pouvais donc pas faire changer l'image au moment du survol. Mais bon, avant de comprenne la philosophie, il y a du boulot...

non non, quand tu écris du code html (ou javascript) en php il a exactement les mêmes propriétés que quand tu l'écris directement. Ce qui ne fonctionnait pas c'est que tu n'avais pas fait de fonction javascript ("Chang_img" dans nos exemples) pour changer la source de l'image.

Citation:

Envoyé par Darkyl

Dernière question: si ma première image est une image transparente, quand je sors de la deuxième (sur onmouseout) et que je reviens à la première, je vois toujours la deuxième image

Fais un essai avec une première image non transparente, ça donne quoi ? A mon avis tu as un pb ailleurs dans ton code...

Darkyl · 12/04/2011, 22h26

Je re testerai pour mes images transparentes.
Merci de vos réponses en tous cas. Je travaille déjà sur un autre casse-tête.
Encore merci à tous et bon courage...

12/04/2011, 11h42	#6
Darkyl Membre régulier autodidacte en recherche d'emploi Inscription : novembre 2004 Messages : 259 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : autodidacte en recherche d'emploi Informations forums : Inscription : novembre 2004 Messages : 259 Points : 99 Points : 99	merci ca marche nikel. Par contre comme ma casevide est rempli de transparence (hormis les bordure) et que ma casesurvolee est rempli d'une couleur, quand la souris sort de la case, il affiche bien la casevide mais on ne le remarque pas car la casesurvolee est visible en dessous. Comment faire pour qu'il efface l'image précédemment affichée et la remplace par la nouvelle au lieu de l'afficher par dessus? Sinon, je te remercie, cela marche niquel (j'ai remplacé ma casevide par une case rempli d'une couleur et là, on fois bien le changement d'image...). Concernant tes remarques, je ne savais pas pour les backslasch, sinon tu as raison pourquoi s'embéter... J'ai remis les espaces dans mes URL et non le %20 et cela marche bien. Pourquoi il faut éviter? Dois-je les remettre?... Pour les ' et les ", j'avoue qu'éditer du html avec php, c'est déjà dur, mais du javascript dans du html généré par php, je ne m'y retrouvais plus. En tout cas, Merci beaucoup... __________________ Darkyl, celui qui conduit quand il boit pas .(faudra penser passer le permis )
	00

12/04/2011, 14h16	#7
Shikiryu Membre chevronné Développeur Web Inscription : mars 2011 Messages : 399 Détails du profil Informations personnelles : Sexe : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : Finance Informations forums : Inscription : mars 2011 Messages : 399 Points : 662 Points : 662	Le javascript, ici, remplace la source (src="") de l'image sur les évènements onmouseover et onmouseout (il efface cette attribut et en met un nouveau). La souris ne pouvant être dessus et en dehors de l'image en même temps, il me semble impossible d'afficher les 2 images en même temps à moins d'avoir un poste ou un navigateur lent, ou un problème de réseau. Pour les réponses à mes remarques, les urls (que ce soit des sites, des images, des fichiers CSS) se font toujours avec des slash (/) et non des backslashs (\). Le seul endroit où utiliser ces derniers sont sur les chemins windows... En général, il faut éviter les espaces et signes spéciaux (accents par exemple) dans les URLs. Ils sont habituellement modifiés automatiquement par le navigateur en hexadécimal pour être valide (ex : espace = %20). Ils ne le font pas obligatoirement, et donc il vaut mieux les éviter... ou les encoder Je vous invite à lire http://fr.wikipedia.org/wiki/Uniform_Resource_Locator qui en parlera beaucoup mieux que moi. Pour les apostrophes et guillemets, si ça commence à être brouillon, rien ne vous empêche de diviser 1 Code : Sélectionner tout - Visualiser dans une fenêtre à part echo en plusieurs __________________ Membre de StackOverflow, je suis un fervant utilisateur de PHP et de jQuery. Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web mais aussi plusieurs projets personnels. Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, un raccourcisseur d'url, un bookmarklet pour envoyer l'url de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc...
	10

12/04/2011, 18h22	#9
Shikiryu Membre chevronné Développeur Web Inscription : mars 2011 Messages : 399 Détails du profil Informations personnelles : Sexe : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : Finance Informations forums : Inscription : mars 2011 Messages : 399 Points : 662 Points : 662	C'est pas faux, je suis parti de ton exemple, plutôt que de celui de l'OP qui était plutôt fouilli. Le but de ma méthode était de supprimer une balise <a> qui ne sert à rien vu qu'aucun attribut href ne lui est attribué. Sémantiquement, c'était une aberration L'id, lui, qu'il soit là ou pas n'interfère pas en ce sens. J'avoue que j'ai supposé qu'il avait mis une balise <a> autour de l'image, non pas pour externaliser la fonction, mais parce qu'il n'avait pas connaissance de la possibilité de mettre un évènement JS onmouseover/onmouseout sur une image. Peut-être n'était-ce pas le cas. Il fera le tri, il a plein de solutions différentes, le but étant qu'il comprenne le fonctionnement et pas de faire un copier/coller hasardeux. Et autant qu'on soit clair, je ne fais pas une compèt' de "c'est moi qui propose la meilleure solution", j'ai l'impression que la reprise de ton code en le modifiant et le qualifiant de light t'as affecté et ce n'était pas le but de ma démarche, loin de là. __________________ Membre de StackOverflow, je suis un fervant utilisateur de PHP et de jQuery. Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web mais aussi plusieurs projets personnels. Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, un raccourcisseur d'url, un bookmarklet pour envoyer l'url de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc...
	10

12/04/2011, 20h18	#10
Darkyl Membre régulier autodidacte en recherche d'emploi Inscription : novembre 2004 Messages : 259 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : autodidacte en recherche d'emploi Informations forums : Inscription : novembre 2004 Messages : 259 Points : 99 Points : 99	je savais que l'on pouvais mettre une fonction javascript sur onmouseover et onmouseout d'une image mais cela ne marchait plus quand je mettais le code en 'dixit' php. J'ai alors penser que c'étais dû au fait que php s'exécuter avant côté serveur et ne pouvais donc pas faire changer l'image au moment du survol. Mais bon, avant de comprenne la philosophie, il y a du boulot... Dernière question: si ma première image est une image transparente, quand je sors de la deuxième (sur onmouseout) et que je reviens à la première, je vois toujours la deuxième image et donc il ne se passe rien. Mon but étant d'avoir une case vide avec juste des bordures, puis d'afficher une case colorée quand on survol. Mais comme il affiche l'image transparente au mouseout, on vois toujours l'image de 'case survolee'. Bref je ne sais pas si je me fais bien comprendre .... Plus que cette interrogation et mon problème est résolu... __________________ Darkyl, celui qui conduit quand il boit pas .(faudra penser passer le permis )
	00

12/04/2011, 22h26	#13
Darkyl Membre régulier autodidacte en recherche d'emploi Inscription : novembre 2004 Messages : 259 Détails du profil Informations personnelles : Sexe : Âge : 26 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : autodidacte en recherche d'emploi Informations forums : Inscription : novembre 2004 Messages : 259 Points : 99 Points : 99	Je re testerai pour mes images transparentes. Merci de vos réponses en tous cas. Je travaille déjà sur un autre casse-tête. Encore merci à tous et bon courage... __________________ Darkyl, celui qui conduit quand il boit pas .(faudra penser passer le permis )
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email