• Mapping + Images aléatoire •

• Mapping + Images aléatoire • - HTML/CSS - Programmation

Marsh Posté le 22-04-2007 à 19:05:29    

Bonjour,
 
Après recherche sur le Forum où je ne trouve pas réponse à mon problème, j'en viens a vous demander votre aide sur une histoire de 'mapping + images aléatoire' .
En fait, je souhaite pouvoir réaliser mon mapping entre 2 images (qui ont la même map, vu que j'ai fais en sorte que les liens sur les images soit situer exactement au même endroit), et que celle-ci tourne de façon aléatoire sur mon Site (En gros, qu'à chaque clique sur la page, l'image change.).
 
Voici mon petit morceau de code :
 

Code :
  1. <script type="text/javascript">
  2. document.write("<img src='images/1/" + parseInt(Math.random()*2) + ".png' width='500' height='648' alt='Galerie Ayumi Hamasaki' title='Galerie Ayumi Hamasaki' />" );
  3. </script>
  4. <img name="ayu" width="500" height="648" border="0" usemap="#ayu" alt="" />
  5. <center><map name="ayu">
  6. <area shape="rect" coords="224,494,494,527" href="#bio" alt="Biographie Ayumi Hamasaki" title="Biographie">
  7. <area shape="rect" coords="42,306,188,338" href="#lyrics" alt="Lyrics Ayumi Hamasaki" title="Lyrics">
  8. <area shape="rect" coords="296,153,470,185" href="#pix" alt="Galerie Ayumi Hamasaki" title="Galerie">
  9. </map></center>


 
Le 'hic', c'est que indépendemment le script et le map marche très bien ... mais les deux ensembles, je n'y arrive pas ...
 
Si vous trouvez la réponse à ma requète trop facilement, pouvez-vous m'expliquer une manière de faire en sorte que ces deux images aléatoire puisse avoir un mapping différents ?!
 
Merci pour vos réponses et à très bientôt!

Reply

Marsh Posté le 22-04-2007 à 19:05:29   

Reply

Marsh Posté le 22-04-2007 à 21:03:33    

Rajoute voir l'attribut name dans la balise img de ton javascript...

Reply

Marsh Posté le 22-04-2007 à 22:09:54    

Ca ne marche toujours pas ...
 

Code :
  1. <script type="text/javascript">
  2. document.write("<img src='images/1/" + parseInt(Math.random()*2) + ".png' width='500' height='648' alt='Galerie Ayumi Hamasaki' title='Galerie Ayumi Hamasaki' name='ayu' />" );
  3. </script>
  4. <img name="ayu" width="500" height="648" border="0" usemap="#ayu" alt="" />
  5. <center><map name="ayu">
  6. <area shape="rect" coords="224,494,494,527" href="#bio" alt="Biographie Ayumi Hamasaki" title="Biographie">
  7. <area shape="rect" coords="42,306,188,338" href="#lyrics" alt="Lyrics Ayumi Hamasaki" title="Lyrics">
  8. <area shape="rect" coords="296,153,470,185" href="#pix" alt="Galerie Ayumi Hamasaki" title="Galerie">
  9. </map></center>

Reply

Marsh Posté le 22-04-2007 à 22:12:59    

   

Code :
  1. <script type="text/javascript">
  2.     document.write("<img src='images/1/" + parseInt(Math.random()*2) + ".png' width='500' usemap="#ayu" height='648' alt='Galerie Ayumi Hamasaki' title='Galerie Ayumi Hamasaki' />" );
  3.     </script>
  4.    
  5.    
  6.     <center><map name="ayu">
  7.     <area shape="rect" coords="224,494,494,527" href="#bio" alt="Biographie Ayumi Hamasaki" title="Biographie">
  8.     <area shape="rect" coords="42,306,188,338" href="#lyrics" alt="Lyrics Ayumi Hamasaki" title="Lyrics">
  9.     <area shape="rect" coords="296,153,470,185" href="#pix" alt="Galerie Ayumi Hamasaki" title="Galerie">
  10.     </map></center>


 
 ou encore en un peu plus propre
 
 

Code :
  1. <img id="imgayu" width="500" height="648" border="0" usemap="#ayu" alt="" />
  2.    
  3. <script type="text/javascript">
  4.     document.getElementById("imgayu" ).src = "images/1/" + parseInt(Math.random()*2) + ".png";
  5.     </script>
  6.     <center><map name="ayu">
  7.     <area shape="rect" coords="224,494,494,527" href="#bio" alt="Biographie Ayumi Hamasaki" title="Biographie">
  8.     <area shape="rect" coords="42,306,188,338" href="#lyrics" alt="Lyrics Ayumi Hamasaki" title="Lyrics">
  9.     <area shape="rect" coords="296,153,470,185" href="#pix" alt="Galerie Ayumi Hamasaki" title="Galerie">
  10.     </map></center>


 
 Ou encore mieux, tu me vires tout ce code de merde et tu me le fais en CSS et en JS proprement de cette maniere
 
 
 

Code :
  1. <ul id="menu">
  2.  <li id="menu_bio"><a href="#bio" title="Biographie Ayumi Hamasaki">Biographie</a></li>
  3.  <li id="menu_lyrics"><a href="#lyrics" title="Lyrics Ayumi Hamasaki">Lyrics</a></li>
  4.  <li id="menu_pix"><a href="#pix" title="Galerie Ayumi Hamasaki">Galerie</a></li>
  5. </ul>
  6. <style type="text/css">
  7. /* la balise style doit soit etre mise dans le header  ou bien tu mets le code CSS dans une feuille CSS a part */
  8. #menu, #menu li {margin:0; padding:0}
  9. #menu {position:relative; height:648px; width:500px; background:url(images/1/1.png) no-repeat left top}
  10. #menu li {position:absolute;}
  11. #menu li a {display:block; overflow:hidden; height:100%; text-indent:-5000px; font-size:5000px; letter-spacing:5001px} /*a cause de IE le A ne serait pas forcément correctement pris en compte */
  12. #menu_bio {left:224px; top:494px; width:275px; height:33px}
  13. #menu_bio {left:42px; top:306px; width:146px; height:32px}
  14. #menu_bio {left:296px; top:153px; width:174px; height:32px}
  15. </style>
  16. <script type="text/javascript">
  17. // code JS qui peut etre mis dans un fichier JS à part
  18.  function addEvent( obj, type, fn )
  19. {
  20.  if (obj.addEventListener)
  21.   obj.addEventListener( type, fn, false );
  22.  else if (obj.attachEvent)
  23.  {
  24.   obj["e"+type+fn] = fn;
  25.   obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  26.   obj.attachEvent( "on"+type, obj[type+fn] );
  27.  }
  28. }
  29. function randomNavImage() {
  30.  var m = document.getElementById("menu" );
  31.  if (m) m.style.backgroundImage = "url(images/1/" + parseInt(Math.random()*2) + ".png)";
  32. }
  33. addEvent(window, "load", randomNavImage);
  34. </script>
 

Edit : Ayumi  :love: :love:


Message édité par gatsu35 le 22-04-2007 à 23:18:25
Reply

Marsh Posté le 23-04-2007 à 01:07:55    

Super, merci beaucoup !! =)
 
Par contre, une idée pour un éventuel 'mapping' différent avec deux images de même dimension ?  
 
Je m'explique plus clairement :
• Deux images de même dimensions.
• Des textes 'cliquables' (via map) à des endroits dfférents sur les deux images.
Je sais que j'aurais besoin de faire deux mapping, mais pour les images alétoire, comment pourrais-je m'en sortir ?!
 
En tout cas merci infiniment de consacrer du temps pour m'aider dans mon labeur ^^
 
 
Ps : Ayurosk =)

Reply

Marsh Posté le 23-04-2007 à 01:12:57    

Il m'a suffit de voir

Code :
  1. obj["e"+type+fn] = fn;
  2. obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  3. obj.attachEvent( "on"+type, obj[type+fn] );
 

Pour savoir que c'était du gatsu  :D


Message édité par Shinuza le 23-04-2007 à 01:13:35

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 23-04-2007 à 01:29:31    

fn ? :o


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 23-04-2007 à 02:06:58    


fn = FuNction :o :o :o rien à voir avec quelconque parti politique :o

Reply

Marsh Posté le 23-04-2007 à 02:57:53    

Encore une connerie du zecrazytux [:tinostar]


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 23-04-2007 à 09:00:37    

:D


---------------
Blog photo/récits activités en montagne http://planetcaravan.net
Reply

Marsh Posté le 23-04-2007 à 09:00:37   

Reply

Marsh Posté le 23-04-2007 à 14:43:49    

Et sinon ... en ce qui concerne ma requête ? :??:  
 
 :jap:


Message édité par Foxysama le 23-04-2007 à 14:44:26
Reply

Marsh Posté le 24-04-2007 à 21:35:53    

Toujours aucunes idées ?! Peut-être me suis-je mal exprimer et auriez vous besoin d'illustrations comme exemple ...
Si besoin est, n'hésitez pas a demander ! =)
 
Bonne soirée @tous!

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed