Discussion :

[xelfer13]

Bonjour,

Bon je ne savais pas trop quoi mettre comme titre.
J'explique mon problème. J'ai une photo du style google map qui contient des bâtiments, et je dois, quand je passe ma souris sur un bâtiment, afficher une photo de ce bâtiment (dans une infobulle par exemple).

J'utilise pour cela une map area. Jusque-là tout va bien. Et j'ai récupérer un script que j'ai trouvé dans un forum. Je vous préviens je n'y connais vraiment pas grand chose en JavaScript... Du coup j'utilise onmouseover(id) et onmouseout(id).

Voici le script :

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 afficher(info)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
        run= true ;
}
function masquer(id)
{
        var tooltip = document.getElementById(id) ;
        tooltip.style.visibility = "hidden";
        run= false ;
}
</script>

Le problème c'est que comme je récupère un id quand je passe la souris sur d'autres bâtiments, j'aurai toujours la même photo. Or je voudrais que ça se fasse dynamiquement sur la même page. Je pensais à mettre un attribut class mais je ne sais pas comment modifier le script en fonction et si ça peut marcher.

En espérant que vous ayez compris mon soucis. :p

[SpaceFrog]

Ben modifie le src de l'image ?

[xelfer13]

Non mais les images sont déjà stockées dans le serveur mais je voudrais que ça se fasse dynamiquement car j'utilise tout ça dans un foreach en php.
Je met pas la source en brut mais un truc comme

Code :

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

<?php echo $batiment['photo']; ?>

[SpaceFrog]

quel est le rapport avec les images stockées sur le serveur ?
heureusement qu'elle y sont ^^

Code :

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

tooltip.style.visibility = "visible";

là tu modifie le style d'un element de la page ...

si tu as par ailleurs une balise image sur ta page, qu'est ce qui t'empêche d'en modifier son src ???

[Darkyl]

Salut,

Je comprend pas qu'on utilise encore

Code :

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

tooltip.style.visibility = "hidden";

alors qu'il y a des problemes de compatibilité, je trouve que c'est une mauvaise habitude, utilise plutôt:

Code :

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

tooltip.style.display="block"; ou tooltip.style.display="none";

Sinon, ben pareil que SpaceFrog:

si tu as par ailleurs une balise image sur ta page, qu'est ce qui t'empêche d'en modifier son src ???

Dans

Code :

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

1
2
3
4
5
6
function afficher(info)
{
        var tooltip = document.getElementById(info);
        tooltip.style.visibility = "visible";
        run= true ;
}

tu dois rajouter une ligne:

Code :

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

document.getElementById(Mon_objet_image).src=nouvel_src;

Maintenant reste à savoir comment tu récupère la nouvel source...

[xelfer13]

Oui je sais jsais pas pourquoi j'ai dis ça ...bref

la src de mon image est la meme dans toute ma page.
En fait j'utilise le framework zend .

Code :

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

1
2
3
<?php foreach($this->batiments as $batiment) : ?>  
			<div id="id"><p><?php echo $batiment['intitule']; ?></p> <img src="<?php echo $this->baseUrl();?>/<?php echo $batiment['photo']; ?>" alt="Photo Batiment"  />  </div>
	 <?php endforeach; ?>

Donc jpeux pas changer ma source. Enfin si c'est bien ça que tu voulais me dire :/

[SpaceFrog]

c'est affligeant d'utiliser des frameworks sans savoir ce qu'ils font

zend est un framework php ... c'est coté serveur !!!!!!!!!!!!


un hover c'est coté client
tout se passe an javascript, la modification du src se fait en javascript, je ne vois pas pourquoi tu mèles zend à ça ?

[Darkyl]

SpaceFrog, sois indulgent, encore une fois le problème vient de la notion d'exécution coté serveur en php et utilisation côté utilisateur avec javascript...
Non ?
Il faut que tu aies la bonne src dynamiquement.

Tout se joue là :

Code :

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

<?php echo $this->baseUrl();?>/<?php echo $batiment['photo']; ?>

Je n'ai jamais utilisé Zend mais à mon avis tu vas avoir de l'ajax dans l'air pour faire ce que tu veux faire...

[Darkyl]

Heu aprés relecture de ton code, il semble que tu n'aie pas besoin de changer la source car si je ne m'abuse, tu créer autant de div et d'img que tu n'as de batiment? en fait, tu crée toute les info-bulle que tu cache, et c'est lors du survol sur un batiment que tu affiche la bonne info-bulle...non?

Si c'est cela, ton problème vient bien de

Code :

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

<?php echo $this->baseUrl();?>/<?php echo $batiment['photo']; ?>

qui te sort la même réponse pour toutes les info-bulles créer...

Aprés, j'ai peut-être mal compris.

[xelfer13]

Alors voilà dans mon premier post j'ai bien précisé que je n'y connaissais pas grand chose en javascript et que j'avais récupéré le ptit script sur internet.
Alors si on peut changer la source en javascript oui jveux bien savoir comment on fait car je ne sais pas.
Pour moi quand on me parle de src c'est coté php.

[SpaceFrog]

heu ...

alors on va revoir les bases ...

le html est interprété par le navigateur donc coté client

Code :

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

<img src="monimage.png" />

php génère le code html et l'envoie au navigateur

Code :

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

echo '<img src="monimage.png" />';

donc soit tu demandes à php de mettre le src que tu veux et de l'envoyer au client, mais cela supposer un passage sur le serveur donc rechargement de page ou ajax.
soit tu modifies dynamiquement coté client avec javascript le src de la balise image (code déja donné par Daryl ...)

[vermine]

Code :

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

document.getElementById(Mon_objet_image).src=nouvel_src;

Le src vient de :

Code html :

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

<img src="la_source">

Qui est du HTML et donc nous sommes du côté client.

Mais comme l'a dit Darkyl, changer la source ne servira à rien ici.

[Darkyl]

Ouai, moi jui d'accord avec moi

Si tu montre ton html généré, à mon avis, toutes tes src sont égales...

Code :

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

<?php echo $this->baseUrl();?>/<?php echo $batiment['photo']; ?>

te donne tout le temps le même string...

Faut que tu résolves cela avant d'essayer autres choses.

Bon aprés, concernant la technique, c'est toujours un peu moche de généré toutes tes info_bulles, puis de les cacher, puis d'afficher celle qui va bien.
Le mieux est de récupéré l'id du survol, de créer un div (dynamiquement) au bonne coord puis de le charger graçe à ajax de ton info-bulle...
Mais cela, au prochain épisode..

[SpaceFrog]

D'autant plus si c'est pour n'afficher qu'une image à la fois.
Colle une seul balise image et modifie dynamiquement son src

[xelfer13]

Ouai, moi jui d'accord avec moi

Si tu montre ton html généré, à mon avis, toutes tes src sont égales...

Code :

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

<?php echo $this->baseUrl();?>/<?php echo $batiment['photo']; ?>

te donne tout le temps le même string...

Faut que tu résolves cela avant d'essayer autres choses.

Ok donc avec du javascript ça n'est pas possible alors...

Pour répondre à Spacefrog, ZEnd c'est pas un choix personnel, en fait je suis en stage en entreprise et ça m'a été imposé en quelque sorte ...

[SpaceFrog]

Toutes mes condoléances alors ^^

Ok donc avec du javascript ça n'est pas possible alors...

Biensur que si !

Tu n'a a priori pas bien saisi la portée de php et js

php rédige ton html/js
une fois que la page quitte le serveur et est interprétée par le client, php n'existe plus, le navigateur ne reçoit que du code html / js .

La page n'est pas figée pour autant, js est là pour dynamiser les pages.

De même php ne voit pas ce qui se passe sur le client
php ne peut pas capter un evenement coté cleint (onclick, mouseover ...)

Par contre js peut sur un mouseover modifier le src d'une balise image ...