Tom's Guide > Forum > Programmation > [resolu][code dispo]onMouseOver avec Area

[resolu][code dispo]onMouseOver avec Area

Forum Programmation : [resolu][code dispo]onMouseOver avec Area

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
cool166   04-04-2008 à 14:07:53

Bonjour
je vient chercher de l'aide car je doit faire une carte avec photo :
J'ai donc ma carte avec des numéro est quand le visiteur de la page passa sa souris dessus l'image s'affiche
donc j'ai penser au onMouseOver !
Mais après moult essais de code , rien ne va :
pas d'affichage de photo !
J'ai juste le lien qui marche :s
Voici les 2 code que j'ai essayer :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script language="JavaScript">
  5. <!-- Begin
  6. bouton = new Image();
  7. bouton.src = "1.JPG";
  8. end -->
  9. </script>
  10. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  11. <title>Documento sin t&iacute;tulo</title>
  12. </head>
  14. <body>
  15. <img src="Carte terrain ..bmp" width="1218" height="844" border="0" usemap="#map" />
  16. <map name="map">
  17. <area shape="circle" coords="422,829,14" onmouseover="bouton.src = '1.JPG';" href="1.jpg" />
  18. </map>
  20. </body>
  21. </html>


et

Code :
  1. <img src="Carte terrain ..bmp" width="1218" height="844" border="0" usemap="#map" />
  3. <map name="map">
  4. <area shape="circle" coords="422,829,14" onmouseover="img.src='1.JPG';" href="1.jpg" />
  5. </map>


merci de votre aide


Message édité par cool166 le 07-04-2008 à 14:11:16
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
hiola   04-04-2008 à 16:42:00
- 0 +

J'utilise ce script pour un site web qui fonctionne très bien :

HTML :

Citation :

<img src="image/boutonOutAccueil.jpg" alt="Accueil" id="boutonAccueil" onmouseover="allumer(this.id, 'boutonOnAccueil.jpg');" onmouseout="eteindre(this.id, 'boutonOutAccueil.jpg');"/></a>



Citation :

Javascript

/**passage de la souris sur une image du menu**/
function allumer(nomImage, image)
{
document.images[nomImage].src = "image/"+image ;
}

/**la souris n'est pas sur une image du menu**/
function eteindre(nomImage, image)
{
document.images[nomImage].src = "image/"+image ;
}




Comme tu le vois, je n'ai pas eus besoin de créer un objet image. Pour modifier le contenu d'une balise HTML <img>, je lui met un identifiant et lorsque la souris passe dessus, j'appelle une fonction javascript en lui passant cet identifiant et le lien vers l'image à charger. Ensuite, j'accède à la bonne image grâce au tableau images[] en passant l'identifiant de l'image. Je modifie ensuite la source avec l'attribut src. Ce qu'il faut comprendre, c'est que tu peux accéder à tes <img> grâce à l'objet images[] et tu dois donner à chaque <img> un moyen d'être identifiable sans ambiguïté, donc avec un identifiant.

edit : merci d'avoir poster ce topic ça m'a permit de voir qu'une des deux fonctions javascript est inutile XD


Message édité par hiola le 04-04-2008 à 19:37:03
------------------------------ On a autant d'enmerdes sous Linux que sous Windows mais on les a en passant pour un pro de l'informatique
 Répondre à hiola
cool166   05-04-2008 à 11:34:06
- 0 +

Oui mais ceci est pour un menu est non une aréa ( map )
merci quand même de ta réponse ( je vais essayer de rebidouillier )

Répondre à cool166
cool166   06-04-2008 à 18:03:01
- 0 +

personne ne peut m'aider ?

Répondre à cool166
cool166   07-04-2008 à 14:09:31
- 0 +

C'est bon j'ai trouver !
Voici le code complet :
( attention extrêmement long )

Code :
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <SCRIPT LANGUAGE="javascript">
  6. Image1 = new Image(600,416)
  7. Image1.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/ep.bmp"
  9. Image2 = new Image(555,416)
  10. Image2.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/1.jpg"
  12. Image3 = new Image(555,416)
  13. Image3.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/2.jpg"
  15. Image4 = new Image(555,416)
  16. Image4.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/3.jpg"
  18. Image6 = new Image(555,416)
  19. Image6.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/4.jpg"
  21. Image7 = new Image(555,416)
  22. Image7.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/6.jpg"
  24. Image8 = new Image(555,416)
  25. Image8.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/7.jpg"
  27. Image9 = new Image(555,416)
  28. Image9.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/8.jpg"
  30. Image10 = new Image(555,416)
  31. Image10.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/9.jpg"
  33. Image11 = new Image(555,416)
  34. Image11.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/10.jpg"
  36. Image12 = new Image(555,416)
  37. Image12.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/11.jpg"
  39. Image13 = new Image(555,416)
  40. Image13.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/12.jpg"
  42. Image14 = new Image(555,416)
  43. Image14.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/13.jpg"
  45. Image15 = new Image(555,416)
  46. Image15.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/14.jpg"
  48. Image16 = new Image(555,416)
  49. Image16.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/15.jpg"
  51. Image17 = new Image(555,416)
  52. Image17.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/16.jpg"
  54. Image18 = new Image(555,416)
  55. Image18.src = "http://www.storm-of-fox.info/modules/xfsection/html/images/17.jpg"
  57. Image19 = new Image(555,416)
  58. Image19.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/18.jpg"
  60. Image20 = new Image(555,416)
  61. Image20.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/19.jpg"
  63. Image21 = new Image(555,416)
  64. Image21.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/20.jpg"
  66. Image23 = new Image(555,416)
  67. Image23.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/21.jpg"
  69. Image24 = new Image(555,416)
  70. Image24.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/23.jpg"
  72. Image25 = new Image(555,416)
  73. Image25.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/24.jpg"
  75. Image26 = new Image(555,416)
  76. Image26.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/25.jpg"
  78. Image27 = new Image(555,416)
  79. Image27.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/26.jpg"
  81. Image28 = new Image(555,416)
  82. Image28.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/27.jpg"
  84. Image29 = new Image(555,416)
  85. Image29.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/28.jpg"
  87. Image30 = new Image(555,416)
  88. Image30.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/29.jpg"
  90. Image31 = new Image(555,416)
  91. Image31.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/30.jpg"
  93. Image32 = new Image(555,416)
  94. Image32.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/31.jpg"
  96. Image33 = new Image(555,416)
  97. Image33.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/32.jpg"
  99. Image34 = new Image(555,416)
  100. Image34.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/33.jpg"
  102. Image35 = new Image(555,416)
  103. Image35.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/34.jpg"
  105. Image36 = new Image(555,416)
  106. Image36.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/35.jpg"
  108. Image37 = new Image(555,416)
  109. Image37.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/36.jpg"
  111. Image38 = new Image(555,416)
  112. Image38.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/37.jpg"
  114. Image39 = new Image(555,416)
  115. Image39.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/38.jpg"
  117. Image40 = new Image(555,416)
  118. Image40.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/39.jpg"
  120. Image41 = new Image(555,416)
  121. Image41.src = "http://www.storm-of-fox.info/modules/xfsection/html//images/40.jpg"
  122. </SCRIPT>
  123. <title>Plan du terrain</title>
  124. </head>
  125. <body onLoad="cacheOff()">
  126. <DIV ID="cache"><TABLE WIDTH=400 BGCOLOR=#000000 BORDER=0 CELLPADDING=2 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><TABLE WIDTH=100% BGCOLOR=#FF9900 BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN=center VALIGN=middle><FONT FACE="Verdana" SIZE=4 COLOR=#000000><B><BR>Chargement en cour...<BR></B></FONT></TD>  </TR></TABLE></TD>  </TR></TABLE></DIV>
  129. <SCRIPT LANGUAGE="JavaScript">
  130. /*
  131. SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
  132. http://www.editeurjavascript.com
  133. */
  134. var nava = (document.layers);
  135. var dom = (document.getElementById);
  136. var iex = (document.all);
  137. if (nava) { cach = document.cache }
  138. else if (dom) { cach = document.getElementById("cache" ).style }
  139. else if (iex) { cach = cache.style }
  140. largeur = screen.width;
  141. cach.left = Math.round((largeur/2)-200);
  142. cach.visibility = "visible";
  146. function cacheOff()
  147.     {
  148.     cach.visibility = "hidden";
  149.     }
  150. </SCRIPT>
  151. <table width="600"><td width="600"> <IMG NAME="emp" SRC="http://www.storm-of-fox.info/modules/xfsection/html//images/ep.bmp" USEMAP="#ep" width="600">
  152. <SCRIPT LANGUAGE="javascript">
  154. function zoomin2() {
  155. document.emp.src = Image2.src; return true;
  156. }
  157. function zoomin3() {
  158. document.emp.src = Image3.src; return true;
  159. }
  160. function zoomin4() {
  161. document.emp.src = Image4.src; return true;
  162. }
  163. function zoomin6() {
  164. document.emp.src = Image6.src; return true;
  165. }
  166. function zoomin7() {
  167. document.emp.src = Image7.src; return true;
  168. }
  169. function zoomin8() {
  170. document.emp.src = Image8.src; return true;
  171. }
  172. function zoomin9() {
  173. document.emp.src = Image9.src; return true;
  174. }
  175. function zoomin10() {
  176. document.emp.src = Image10.src; return true;
  177. }
  178. function zoomin11() {
  179. document.emp.src = Image11.src; return true;
  180. }
  181. function zoomin12() {
  182. document.emp.src = Image12.src; return true;
  183. }
  184. function zoomin13() {
  185. document.emp.src = Image13.src; return true;
  186. }
  187. function zoomin14() {
  188. document.emp.src = Image14.src; return true;
  189. }
  190. function zoomin15() {
  191. document.emp.src = Image15.src; return true;
  192. }
  193. function zoomin16() {
  194. document.emp.src = Image16.src; return true;
  195. }
  196. function zoomin17() {
  197. document.emp.src = Image17.src; return true;
  198. }
  199. function zoomin18() {
  200. document.emp.src = Image18.src; return true;
  201. }
  202. function zoomin19() {
  203. document.emp.src = Image19.src; return true;
  204. }
  205. function zoomin20() {
  206. document.emp.src = Image20.src; return true;
  207. }
  208. function zoomin21() {
  209. document.emp.src = Image21.src; return true;
  210. }
  211. function zoomin23() {
  212. document.emp.src = Image23.src; return true;
  213. }
  214. function zoomin24() {
  215. document.emp.src = Image24.src; return true;
  216. }
  217. function zoomin25() {
  218. document.emp.src = Image25.src; return true;
  219. }
  220. function zoomin26() {
  221. document.emp.src = Image26.src; return true;
  222. }
  223. function zoomin27() {
  224. document.emp.src = Image27.src; return true;
  225. }
  226. function zoomin28() {
  227. document.emp.src = Image28.src; return true;
  228. }
  229. function zoomin29() {
  230. document.emp.src = Image29.src; return true;
  231. }
  232. function zoomin30() {
  233. document.emp.src = Image30.src; return true;
  234. }
  235. function zoomin31() {
  236. document.emp.src = Image31.src; return true;
  237. }
  238. function zoomin32() {
  239. document.emp.src = Image32.src; return true;
  240. }
  241. function zoomin33() {
  242. document.emp.src = Image33.src; return true;
  243. }
  244. function zoomin34() {
  245. document.emp.src = Image34.src; return true;
  246. }
  247. function zoomin35() {
  248. document.emp.src = Image35.src; return true;
  249. }
  250. function zoomin36() {
  251. document.emp.src = Image36.src; return true;
  252. }
  253. function zoomin37() {
  254. document.emp.src = Image37.src; return true;
  255. }
  256. function zoomin38() {
  257. document.emp.src = Image38.src; return true;
  258. }
  259. function zoomin39() {
  260. document.emp.src = Image39.src; return true;
  261. }
  262. function zoomin40() {
  263. document.emp.src = Image40.src; return true;
  264. }
  265. function zoomin41() {
  266. document.emp.src = Image41.src; return true;
  267. }
  268. function original() {
  269. document.emp.src = Image1.src; return true;
  270. }
  271. </SCRIPT>
  272. <map name="ep">
  273. <!-- #$AUTHOR:carl -->
  274. <AREA shape="circle" ALT="Enlarged right side" coords="209,411,7" href="1.jpg" onMouseOver="zoomin2()" onMouseOut="original()" />
  275. <AREA shape="circle" ALT="Enlarged right side" coords="243,324,9" href="40.jpg" onMouseOver="zoomin41()" onMouseOut="original()" />
  276. <AREA shape="circle" ALT="Enlarged right side" coords="219,326,14" href="39.jpg" onMouseOver="zoomin40()" onMouseOut="original()" />
  277. <AREA shape="circle" ALT="Enlarged right side" coords="65,363,8" href="28.jpg"  onMouseOver="zoomin29()" onMouseOut="original()" />
  278. <AREA shape="circle" ALT="Enlarged right side" coords="59,346,13" href="26.JPG" onMouseOver="zoomin27()" onMouseOut="original()" />
  279. <AREA shape="circle" ALT="Enlarged right side" coords="82,356,10" href="27.jpg" onMouseOver="zoomin28()" onMouseOut="original()" />
  280. <AREA shape="circle" ALT="Enlarged right side" coords="72,295,15" href="29.jpg" onMouseOver="zoomin30()" onMouseOut="original()" />
  281. <AREA shape="circle" ALT="Enlarged right side" coords="26,294,18" href="25.jpg" onMouseOver="zoomin26()" onMouseOut="original()" />
  282. <AREA shape="circle" ALT="Enlarged right side" coords="41,179,9" href="24.jpg" onMouseOver="zoomin25()" onMouseOut="original()" />
  283. <AREA shape="circle" ALT="Enlarged right side" coords="34,156,15" href="23.jpg" onMouseOver="zoomin24()" onMouseOut="original()" />
  284. <AREA shape="circle" ALT="Enlarged right side" coords="197,294,6" href="2.jpg" onMouseOver="zoomin3()" onMouseOut="original()" />
  285. <AREA shape="circle" ALT="Enlarged right side" coords="196,276,12" href="38.jpg" onMouseOver="zoomin39()" onMouseOut="original()" />
  286. <AREA shape="circle" ALT="Enlarged right side" coords="262,263,14" href="4.jpg" onMouseOver="zoomin6()" onMouseOut="original()" />
  287. <AREA shape="circle" ALT="Enlarged right side" coords="304,218,12" href="6.jpg" onMouseOver="zoomin7()" onMouseOut="original()" />
  288. <AREA shape="circle" ALT="Enlarged right side" coords="305,167,5" href="8.jpg" onMouseOver="zoomin9()" onMouseOut="original()" />
  289. <AREA shape="circle" ALT="Enlarged right side" coords="294,167,5" href="7.jpg" onMouseOver="zoomin8()" onMouseOut="original()" />
  290. <AREA shape="circle" ALT="Enlarged right side" coords="282,168,7" href="9.jpg" onMouseOver="zoomin10()" onMouseOut="original()" />
  291. <AREA shape="circle" ALT="Enlarged right side" coords="302,149,7" href="10.jpg" onMouseOver="zoomin11()" onMouseOut="original()" />
  292. <AREA shape="circle" ALT="Enlarged right side" coords="298,112,8" href="11.jpg" onMouseOver="zoomin12()" onMouseOut="original()" />
  293. <AREA shape="circle" ALT="Enlarged right side" coords="256,94,7" href="12.jpg" onMouseOver="zoomin13()" onMouseOut="original()" />
  294. <AREA shape="circle" ALT="Enlarged right side" coords="255,109,9" href="13.jpg" onMouseOver="zoomin14()" onMouseOut="original()" />
  295. <AREA shape="circle" ALT="Enlarged right side" coords="235,94,7" href="14.jpg" onMouseOver="zoomin15()" onMouseOut="original()" />
  296. <AREA shape="circle" ALT="Enlarged right side" coords="202,94,6" href="15.jpg" onMouseOver="zoomin16()" onMouseOut="original()" />
  297. <AREA shape="circle" ALT="Enlarged right side" coords="185,93,5" href="16.jpg" onMouseOver="zoomin17()" onMouseOut="original()" />
  298. <AREA shape="circle" ALT="Enlarged right side" coords="188,108,8" href="17.jpg" onMouseOver="zoomin18()" onMouseOut="original()" />
  299. <AREA shape="circle" ALT="Enlarged right side" coords="144,95,9" href="18.jpg" onMouseOver="zoomin19()" onMouseOut="original()" />
  300. <AREA shape="circle" ALT="Enlarged right side" coords="98,113,8" href="21.jpg" onMouseOver="zoomin23()" onMouseOut="original()" />
  301. <AREA shape="circle" ALT="Enlarged right side" coords="148,136,7" href="19.jpg" onMouseOver="zoomin20()" onMouseOut="original()" />
  302. <AREA shape="circle" ALT="Enlarged right side" coords="162,137,8" href="20.jpg" onMouseOver="zoomin21()" onMouseOut="original()" />
  303. <AREA shape="circle" ALT="Enlarged right side" coords="201,253,8" href="3.jpg"  onMouseOver="zoomin4()" onMouseOut="original()"/>
  304. <AREA shape="circle" ALT="Enlarged right side" coords="105,239,7" href="30.jpg" onMouseOver="zoomin31()" onMouseOut="original()"/>
  305. <AREA shape="circle" ALT="Enlarged right side" coords="136,203,6" href="31.jpg" onMouseOver="zoomin32()" onMouseOut="original()" />
  306. <AREA shape="circle" ALT="Enlarged right side" coords="150,203,6" href="32.jpg" onMouseOver="zoomin33()" onMouseOut="original()" />
  307. <AREA shape="circle" ALT="Enlarged right side" coords="149,214,6" href="34.jpg" onMouseOver="zoomin35()" onMouseOut="original()" />
  308. <AREA shape="circle" ALT="Enlarged right side" coords="135,215,8" href="33.jpg" onMouseOver="zoomin34()" onMouseOut="original()" />
  309. <AREA shape="circle" ALT="Enlarged right side" coords="182,211,8" href="36.jpg" onMouseOver="zoomin37()" onMouseOut="original()" />
  310. <AREA shape="circle" ALT="Enlarged right side" coords="167,237,8" href="35.jpg" onMouseOver="zoomin36()" onMouseOut="original()"/>
  311. <AREA shape="circle" ALT="Enlarged right side" coords="194,236,10" href="37.jpg" onMouseOver="zoomin28()" onMouseOut="original()"/>
  312. <AREA SHAPE="default" nohref>
  313. </map>
  314. </td></table>
  315. </body>
  316. </html>

Répondre à cool166
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [resolu][code dispo]onMouseOver avec Area
Aller à :

Il y a 3195 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,656 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens