Lien depuis une image

Bonjour à toutes et à tous,

Je vous explique ce que j'essaye de faire.
J'ai trois images, une d'elle est toute blance, la deuxième représente une tige de fleur et la troisieme représente la fleur sans la tige. J'aimerais, que lorsque je clique sur l'image n°2 (c'est a dire la tige) qu'elle celle ci s'affiche dans ma premiere image.

Pour ce faire j'aimerais que lorsque je clique sur ma seconde image, ca me redirige vers un fichier en php qui va modifier le contenu de ma premiere image

(Mes images sont au format svg donc c'est du code xml)

Voici le code que j'utilise pour afficher mon image:

Code:

---

<embed src="mon_image.svg" width="150px" height="150px"/>

---

Comment puis-je faire pour faire appel a mon script php ??

Si j'ajoute la méthode

Code:

---

onclick="afficher()

---

avec dans mon fichier javascript

Code:

---

1 2 3

function afficher(){ alert('salut'); }

---

rien ne s'affiche.

Quelqu'un pourrait m'éclairer s'il vous plait?
Où m'indiquer une meilleure méthode pour arriver a mes fins ?

Merci d'avance et bonne journée à tous !

tu ajoutes ou le onclick ?
et surtout tu l'ajoutes comment ?

J'ajoute le onclick de cette façon:

Code:

---

<embed src="mon_image.svg" width="150px" height="150px" onclick="afficher()"/>

---

Voilà

essaye avec object plutot que embed ?

le problème avec object c'est que mon image ne s'affiche pas... Pareil si j'utilise img... :cry:

tu peux pas mettre autrechose que svg ???

Non car je serais amener a agrandir et rétrécir l'image final a très grande échelle... Et comme svg c'est du vectoriel je n'aurai aucune perte... C'est ce qu'il me faut...

J'ai trouver une autre moyen de les afficher mes image, en les insérant dans une iframe de cette manière:

Code:

---

<iframe src="mon_image.svg" width="150px" height="150px" frameborder="0"></iframe>

---

Mais là encore je n'arrive pas a utiliser ma méthode "onclick"

:roll:

jette un œil là dessus
http://www.carto.net/papers/svg/samples/svg_html.shtml

ou encore:
http://www.w3schools.com/svg/svg_inhtml.asp

ok je vais jeter un petit coup d'œil, merci beaucoup.

Alors déjà j'ai corriger une petite erreur que je faisait.

J'arrive a afficher mon image avec les balises object, je me trompait dans la syntaxe du lien de l'image. En effet il faut écrire:

Code:

---

<object data="maillot/maillot.svg" type="image/svg+xml" width="150px" height="150px" onclick="afficher()"><object>

---

et non

Code:

---

<object src="maillot/maillot.svg" type="image/svg+xml" width="150px" height="150px" onclick="afficher()"><object>

---

Mais dans tout les cas mon problème n'est pas résolu car je n'arrive pas a affecter un lien a mon image...

a mon avis tu devrais essayer de mettre le tpout dasn un div et mettre un onclick sur le div

et si ça ne veut toujours pas ... il faudra mettre un div au dessus en zindex

J'ai tester ce que tu viens de me conseiller, alors j'ai mis mon onclick dans mon div, et ca fonctionne... mais que dans le div autour de la photo...

Je m'explique, ma photo fait 150x150 px... et j'ai appliquer a mon div 200x200px... lorsque je clique sur la photo, rien ne se passe, mais si je clique tout autour de la photo (dans le div bien sur) ca fonctionne...

J'ai tester en mettant un jpg et ca fonctionne donc c'est mon fichier svg qui " n'est pas compatible..."

Alors j'ai essayer avec les z-index...
Je vais mettre mon code car je ne sait pas si j'ai bien utilisé le z-index.

fichier html

Code:

---

1 2 3 4 5

<div id="monImage" class="skin_monImage" onclick="afficher()"> <div id="monImage1" class="skin_monImage1"> <object data="mon_image.svg" width="150px" height="150px"></object> </div> </div>

---

fichier css

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.skin_momImage { z-index:1; position:relative; background-color:#3CBA39; width:200px; height:200px; }   .skin_momImage1{ z-index:2; position:absolute; background-color:#3CBA39; width:200px; height:200px; }

---

Voila le code que j'ai tester, je ne sait pas si c'est bien écrit mais en tout cas ça ne fonctionne pas car mon image passe en priorité...


Sinon j'ai pensé a une autre possibilité, celle d'afficher en background mon image... Je le fait de cette façon:

fichier html

Code:

---

<div id="monImage" class="skin"></div>

---

fichier css

Code:

---

1 2 3

.skin{ background: url(mon_image.svg') no-repeat; }

---

Mais là encore cela ne fonctionne pas... Ca fontionne si mon image est au format jpg mais pas en svg.


Y aurait-il quelqu'un qui aurait une solution ?

tu t'es trompé dans l'ordre du z-index ...

plus le zindex est élevé, plus l'objet est au dessus donc mets le div au dessus de l'image ...

Merci pour l'info, je ne savais pas... mais ca ne fonctionne toujours pas :cry:

Ca fonctionne dans le div mais en dehors de l'image, comme tout a l'heure... :bug:

mets provisoirement un background-color à ton div ... et joues sur les positions absolute ... il me semble bien que le z-index n'est pris en compte qu'avec une position absolute ..??
quand ton div masquera l'image ce sera bon ...

C'est ce que j'essaye de faire justement avec le z-index...

Je met un background jaune pour mon div se situant au premier plan et je met un background vert pour celui du second plan... Mais le problème est que même dans ce cas là, mon image au format svg passe en priorité...


Je vais me débrouiller autrement, merci en tout cas pour ton aide,
Je vais convertir mes images dans un autre format... tout en gardant le résultat final au format svg. En tout cas si quelqu'un d'entre vous à d'autre hypothèse afin de résoudre ce problème je suis preneur.

En tous cas merci beaucoup. :king:
Bonne journée a vous tous !

Je le signale comme résolu vu que personne n'as de réponse a ma question et que j'ai trouver une alternative.

Salut a tous !