[Résolu] Onmouseover et mappage html

(reprise du message précédent)

Bah elles ont été enlevées toutes seules... lol elle y sont pas dans le code source de la page...

Quand je met ça dans le code source ça marche :

<td>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>test</title>

    <script type="text/javascript">

		//<![CDATA[

		function montrer(pic){

			document.getElementById('map-sys').src = pic;

		}

		function cacher(){

			document.getElementById('map-sys').src = "/images/stories/contenu/promo/Systainer/base_sys.jpg";

		}

    //]]>

    </script>

<img style="margin-left: 5px; margin-top: -20px; border: 0px none; float: left;" id="map-sys" usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" alt="base_sys"> 
<map id="map-sys" name="mapsys">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys1ouvert.jpg');return false;" alt="SYS 1" title="SYS 1" coords="3,114,4,152,55,194,175,154,175,118,118,84" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys2ouvert.jpg');return false;" alt="SYS 2" title="SYS 2" coords="61,224,60,280,111,322,231,282,231,230,174,193" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-3.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys3ouvert.jpg');return false;" alt="SYS 3" title="SYS 3" coords="225,91,228,167,279,209,399,169,399,94,343,62" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-4.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys4ouvert.jpg');return false;" alt="SYS 4" title="SYS 4" coords="267,241,270,349,321,391,441,351,441,245,383,214" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-5.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys5ouvert.jpg');return false;" alt="SYS 5" title="SYS 5" coords="453,94,459,240,510,282,630,242,629,97,569,72" shape="poly"> 
</map>
</td>

Mais après quand je le met dans le fichier du site ça ne marche plus et le code disparait tout seul.

1- Ces lignes-ci doivent être enlevées de ton code :

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>

2- Le script javascript n'est pas au bon endroit (dans le head)

3- Comment gères-tu ton site ? (= Comment transfères-tu tes fichiers depuis ton ordi?)
Tu utilises Joomla!. C'est ça le problème...
Modifié par lddsoft (30 Mar 2011 - 19:55)

Corrige la ligne :
<map name="mapsys" id="map-sys">
par
<map name="mapsys" id="mapsys">
Je ne peux plus t'aider beaucoup si tu ne mets pas ta page en ligne, car je ne vois pas ce que tu fais ...
Modifié par lddsoft (30 Mar 2011 - 20:24)

Salut,
Ca marche !!! Tu peux aller voir sur le site, c'est exactement ce que je voulais !
Hier soir j'ai pas pu te répondre j'avais pas mon mot de passe chez moi...
Quand tu m'a dit que le problème venait de Joomla, j'ai cherché de ce coté là et en effet il y avait une fonction "activer le javascript" qui n'était pas coché donc le code était automatiquement supprimé !

Il me reste à fignoler l'image mais j'ai réussi à faire ce que je voulais grace à toi, merci beaucoup.

J'ai donc mis le script java dans le fichier html avec le reste du code html, donc pas dans le head. Je voulais savoir si je met ce code dans le head, si il pourrait me resservir pour d'autre choses du même style ou c'est juste pour cette image ?
Peux-tu m'expliquer, ce code javascript ? que veux dire la ligne :

document.getElementById('map-sys').src = pic;

Connait-tu des adresses ou je pourrais débuter avec le javascript ? ou des livres ?

Merci

Et par hasard, est-il possible d'ajouter un son sur chaque area ?

- Attention : "java" et "javascript" ne désignent pas le même langage !! Ce sont 2 choses différentes !
- Normalement, le code javascript se place soit dans un fichier externe (.js), soit dans le head avec les balises < script type=....>< /script>, soit juste avant la fin du body, également entre les mêmes balises.
- Les 2 fonctions du script ne servent que pour le déclenchement des événements "onmouseover" et "onmouseout" sur les areas de ton image. Tu peux néanmoins t'en servir ailleurs, mais il faudra sans doute adapter la valeur de la fonction cacher() et le nom de l'élément.
-

 document.getElementById('map-sys').src = pic;

J'avais donné map-sys comme id à l'image mappée.
document.getElementById('map-sys'). désigne l'élément dont l'id est 'map-sys' et lui attribue comme source (src) la valeur pic. Cette valeur a été transmise à la fonction montrer(), lorsque je l'ai appelée lors du onmouseover.
- Pour débuter en javascript, il suffit de surfer sur le net. Tu trouveras plein de sites qui enseignent ce langage!
- Il est bien sûr possible d'ajouter un son (mp3) lors du survol de chaque area, et cela, grâce aux mêmes attributs "onmouseover" (pour déclencher le son) et "onmouseout" (pour l'arrêter).
Il te faudra aussi un player, et là, tu tombes bien, car sur Alsacréations, il y a le fameux Dewplayer ! Si tu veux, je te donne le code pour installer tout ça!
A+
Modifié par lddsoft (31 Mar 2011 - 10:37)

a écrit :
Normalement, le code javascript se place soit dans un fichier externe (.js), soit dans le head avec les balises < script type=....>< /script>

Je devrais pouvoir faire ça, c'est plus "clean". Mais le problème c'est que pour l'instant il reprend le chemin de l'image de mes boites... Donc il doit falloir :

iddsoft a écrit :
adapter la valeur de la fonction cacher() et le nom de l'élément.

Mais de quelle manière pour qu'il fonctionne avec d'autres onmouseover ???

a écrit :
Il te faudra aussi un player, et là, tu tombes bien, car sur Alsacréations, il y a le fameux Dewplayer ravi ! Si tu veux, je te donne le code pour installer tout ça!

Oui ça m'interesse. Il faut installer une sorte de mini player dans le site qui pourra lire des sons ? C'est aussi du javascript dont il faudra mettre un code dans le head, et ensuite le rappeler dans les fichiers html ?

Tout semble fonctionner à merveille !
Le code des 2 fonctions montrer(pic) et cacher() peut servir pour d'autres adresses d'images, car c'est la variable pic qui reçoit l'adresse de l'image à montrer. Il faudra quand même effectuer certaines adaptations pour la transmission de l' id de l'élément et des adresses d'images.

En ce qui concerne le player, c'est un peu plus compliqué quand même, mais je peux te fournir un code tout prêt!

a écrit :
Tout semble fonctionner à merveille ! smile

Oui c'est nickel !
J'aimerai bien finir de mettre en place ce code javascript.. Si je le place tel quel dans le head, il fonctionnera mais que pour ce mappage puisqu'il y a le nom du mappage :

function montrer(pic){ 
document.getElementById('[b]map-sys[/b]').src = pic; 

et le chemin de l'image :

function cacher(){
document.getElementById('map-sys').src = "[b]/images/stories/contenu/promo/Systainer/base_sys.jpg";[/b] 

[/code]
C'est donc juste ces 2 bouts de code qu'il faut modifier ? Mais comment ? Difficultée ?

Voici (en rappel) un bout du code html de l'image mappée :

<img height="381" width="633" style="margin-left: 5px; margin-top: 0px; border: 0px none; float: left;" id="map-sys" usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" alt="base_sys"> 
<map id="mapsys" name="mapsys">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys1ouvert.jpg');return false;" alt="SYS 1" title="SYS 1" coords="2,114,113,85,171,119,171,154,55,195,2,158" shape="poly">
<area .....

Donc l' id "map-sys" est reprise par le code javascript, il faudrait peu être seulement appeler le code javascript par "onmouse" par exemple ? C-a-d :

<tr>
<script type="text/javascript">
// &lt;![CDATA[
                

                
                
                function montrer(pic){
                    
                    
                    
                    document.getElementById([b]'onmouse'[/b]).src = pic;
                    
                    
                    
                }
                
                
                
                function cacher(){
                    
                    
                    
                    document.getElementById('[b]onmouse[/b]').src = "/images/stories/contenu/promo/Systainer/base_sys.jpg";
                    
                    
                    
                }
// ]]&gt;
</script>
<td><img height="381" width="633" style="margin-left: 5px; margin-top: 0px; border: 0px none; float: left;" id=[b]"onmouse" [/b]usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" alt="base_sys"> 
<map id=[b]"onmouse" [/b] name="mapsys">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys1ouvert.jpg');return false;" alt="SYS 1" title="SYS 1" coords="2,114,113,85,171,119,171,154,55,195,2,158" shape="poly">
<area href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html" onmouseout="cacher();return false;" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys2ouvert.jpg');return false;" alt="SYS 2" title="SYS 2" coords="37,219,155,189,208,223,210,282,91,319,33,280" shape="poly">

Qu'en penses-tu ? Je te fait peu être mal aux yeux avec du code tout faux
Modifié par dwarf17 (31 Mar 2011 - 13:43)

Déjà tu ne peux pas avoir 2 fois la même id sur une page, or toi tu as mis 2 fois "onmouse" (une fois pour img et une fois pour map).
Il faut jouer avec les paramètres transmis aux fonctions! Exemple :
Pour l'appel :

... onmouseover="montrer('image1.jpg','map1'); ....

Pour la fonction :

function montrer(pic,quelle-map){
    document.getElementById(quelle-map).src = pic;
}

Ici pic vaudra image1.jpg et quelle-map vaudra map1

Pour cacher :
Pour l'appel :

... onmouseout="cacher('image0.jpg','map1'); ....

(image0.jpg étant l'image de départ)
Pour la fonction :

function cacher(pic,quelle-map){
    document.getElementById(quelle-map).src = pic;
}

Re,
J'ai mis le code javascript dans le head en le modifiant un peu de cette manière :

<script type="text/javascript">
// &lt;![CDATA[
                function montrer([b]pic,map[/b]){
                  document.getElementById('[b]map[/b]').src = pic;
                }

		function cacher([b]pic,map[/b]){
                  document.getElementById('[b]map[/b]').src = pic;
                }
// ]]&gt;
</script>

Du coup le onmouseover ne marchait plus, normal...
Donc j'ai modifier le code html de ma page avec les caisses (systainers) pour que onmouseover refonctionne de cette manière :

<td><img height="381" width="633" alt="base_sys" src="/images/stories/contenu/promo/Systainer/base_sys.jpg" usemap="#mapsys" [b]id="map"[/b] style="margin-left: 5px; margin-bottom: -10px; border: 0px none; float: left;"> 
<map name="mapsys" id="mapsys">
<area shape="poly" coords="2,114,113,85,171,119,171,154,55,195,2,158" title="SYS 1" alt="SYS 1" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys1ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-1.html">
<area shape="poly" coords="37,219,155,189,208,223,210,282,91,319,33,280" title="SYS 2" alt="SYS 2" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys2ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-2.html">
<area shape="poly" coords="213,91,332,64,390,98,389,172,269,212,212,166" title="SYS 3" alt="SYS 3" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys3ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-3.html">
<area shape="poly" coords="273,222,390,196,450,229,448,336,330,376,272,334" title="SYS 4" alt="SYS 4" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys4ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-4.html">
<area shape="poly" coords="457,106,580,82,633,109,631,256,513,296,455,254" title="SYS 5" alt="SYS 5" onmouseover="montrer('/images/stories/contenu/promo/Systainer/sys5ouvert.jpg');return false;" onmouseout="cacher();return false;" href="/boutique/acc.-outillage-electroportatif/accessoires-rangement/systainer/promo-systainer-festool-t-loc-sys-5.html"> 
</map>
</td>

Et la magie ! Ca marche !!

Si je comprend bien ce qu'on a fait, on a nommé l'id de la fonction javascript en 'map' pour pouvoir s'en servir quand je referais ce genre d'image réactive. Ensuite dans le code html j'ai modifier l'id de la fonction a appeler (donc 'map') et là ça a fonctionné !

Ce que je ne comprend pas :

a écrit :
tu ne peux pas avoir 2 fois la même id sur une page

Oui mais pourtant il y a 2 id dans le code html, ce ne sont pas pour les mêmes choses alors ? L' id ici appel le javascript ? :

><img height="381" width="633" style="margin-left: 5px; margin-bottom: -10px; border: 0px none; float: left;" id="map" usemap="#mapsys" src="/images/stories/contenu/promo/Systainer/sys1ouvert.jpg" alt="base_sys"> 

Et la, le premier 'mapsys' a quoi fait-il référence ? Le second est le nom du mappage je crois ? :

<map id="mapsys" name="mapsys">

Modifié par dwarf17 (31 Mar 2011 - 15:26)

Ton erreur est que tu ne sembles pas avoir compris que map et pic sont des noms de variables et non pas les id d'éléments de la page.
Dans map et pic tu peux mettre ce que tu veux. Ici, dans ton code, la variable map doit prendre la valeur map-sys que tu lui assignes lorsque tu fais montrer('map-sys','nouvelle_image.jpg') et la variable pic prend la valeur nouvelle_image.jpg que tu lui assignes lorsque tu fais montrer('map-sys','nouvelle_image.jpg').
Attention à la syntaxe EXACTE, les guillemets, apostrophes, virgules, points-virgules etc., c'est HYPER IMPORTANT dans du code. La moindre erreur là-dedans et rien ne va plus

name et id ce n'est pas la même chose ! En gros, l'attribut id est utilisé par les navigateurs de la nouvelle génération, tandis que "name" est utilisé par les anciens navigateurs. Il faut parfois utiliser les deux dans la même balise. Ils doivent être identiques.
Modifié par lddsoft (31 Mar 2011 - 15:51)

D'accord je commence à comprendre...
Alors il faut repartir de ce code à chaque fois que je voudrai faire un OnMouseOver en renommant les attributs map et pic du code javascript et en les reprenant dans le code html...
Mais du coup il faut recréer un script javascript pour chaque image et le mettre dans le head ??!! On peut vite se retrouver avec la grosse tête !

Et je ne trouve pas ou il faut que j'intègre ce script javascript dans mon site pour le mettre dans le head... J'ai bien retrouvé mootools.js et d'autres script javascript, mais en essayant de créer un nouveau fichier .js et en mettant le script dedans, il n'apparait pas dans le code source sur firebug... Saurais-tu ou je pourrais le mettre ?

Tu m'excuseras, mais là, je commence à saturer un peu.
Tu y verrais beaucoup plus clair si tu utilisais autre chose que FireBug pour éditer tes pages. Personnellement (et comme beaucoup d'autres ^^, j'utilise Notepad++.
Modifié par lddsoft (31 Mar 2011 - 18:10)

lol ok, désolé...
Merci pour ton aide en tout cas.

Si tu pouvais me donner le script pour les sons maintenant pour que je me mette la dessus ?
j'ai trouvé un son pour chaque systainer.

C'est un peu plus compliqué parce qu'il y a plusieurs fichiers à te communiquer.
Voici ce que je te propose:
- tu affiches sur le forum qu'on peut te joindre par MP (message privé)[va dans ton profil],
- par MP, je te communique l'adresse (sur mon site) où tu peux télécharger le dossier pour le son,
- tu le télécharges et tu enlèves ton logo MP.

OK ??

OK c'est fait tu peux m'envoyer tout ça par MP
merci

J'ai mis le fichier dewplayer.swf dans un dossier sur mon site qui contenait déjà un uploader.swf.
J'ai ensuite mis mes mp3 dans les médias de mon site ici : /images/media/son/sys1son.mp3
Puis j'ai essayer, avec firebug, d'intégrer le javascript et le code sur une image.
Voici le résultat :

<tbody>
<tr>

<script type="text/javascript">
	function jouerSon(son) {
		var content = '<object type="application/x-shockwave-flash" data="dewplayer.swf?autostart=1&son='/images/media/son/sys1son.mp3'" width="0" height="0"><param name="movie" value="dewplayer.swf?autostart=1&son='/images/media/son/sys1son.mp3'" /><\/object>';
		document.getElementById('player').innerHTML = content;
	}
</script>
<td>
<p><img style="margin: 5px; float: left; border: 0px none rgb(0, 0, 0); width: 633px; height: 240px;" src="/images/contenu/promo/promoshoes.gif" alt="Promo shoes" onmouseover="jouerSon('/images/media/son/sys1son.mp3');return false;" onmouseout="jouerSon('');return false;"></a></p>
</td>
</tr>
<div id="player">&nbsp;</div>
</tbody>

Mais ça ce marche pas encore, bientot surement

Faut-il indiquer ou se trouve mon fichier dewplayer.swf ?
Modifié par dwarf17 (01 Apr 2011 - 15:04)

QUATRE erreurs dans ton code :

1- le script n'est pas placé au bon endroit (voir un de mes posts précédents). Tu l'as mis entre un TR et un TD de ton tableau !! ,

2- tu n'as pas adapté le chemin vers le fichier "dewplayer.swf" (2 fois),

3- tu ne devais pas modifier ce qui vient après dewplayer.swf?autostart=1&son='... . Il faut remettre le code que je t'ai donné! (2 fois). C'est la variable "son" qui contient le nom du fichier que tu lui transmets.

4- <div id="player">&nbsp;</div> est mal placé! Place ça juste avant la balise fermante < /body>

j'essaie, j'essaie pourtant !! Voila, j'ai modifié mes erreurs je crois :

<head>
<script type="text/javascript"> 
    function jouerSon(son) { 
        var content = '<object type="application/x-shockwave-flash" data="/media/system/swf/dewplayer.swf?autostart=1&son='+son+'" width="0" height="0"><param name="movie" value="/media/system/swf/dewplayer.swf?autostart=1&son='+son+'" /><\/object>'; 
        document.getElementById('player').innerHTML = content; 
    } 
</script> 
</head>
<div>
<table>
<tbody> 
<tr> 
<td> 
<p><img style="margin: 5px; float: left; border: 0px none rgb(0, 0, 0); width: 633px; height: 240px;" src="/images/contenu/promo/promoshoes.gif" alt="Promo shoes" onmouseover="jouerSon('/images/media/son/sys1son.mp3');return false;" onmouseout="jouerSon('');return false;"></a></p> 
</td> 
</tr> 
</tbody>
</table>
</div>
<div id="player">&nbsp;</div> 
</body>

Pour indiquer le chemin du fichier "dewplayer.swf" c'est bien la :

var content = '<object type="application/x-shockwave-flash" data="/media/system/swf/dewplayer.swf?autostart=1&son='+son+'" width="0" height="0"><param name="movie" value="/media/system/swf/dewplayer.swf?autostart=1&son='+son+'" />

iddsoft a écrit :
C'est la variable "son" qui contient le nom du fichier que tu lui transmets.

Oui mais j'la voit pas !!!

Reste 1 (nouvelle) faute dans le code ci-dessus : il manque la balise < body> après < /head> . Le reste a l'air correct.
Si cela ne fonctionne pas c'est qu'il y a une erreur de chemin, mais ça, je ne sais pas le voir depuis mon ordi.

Note : la variable "son" (j'aurais pu l'appeler autrement) est celle que tu trouves
dans jouerSon(son) { et dans '+son+' dans le code.