Mapping + Images aléatoire

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 :

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

<script type="text/javascript">
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' />" );
</script>
<img name="ayu" width="500" height="648" border="0" usemap="#ayu" alt="" />
<center><map name="ayu">
<area shape="rect" coords="224,494,494,527" href="#bio" alt="Biographie Ayumi Hamasaki" title="Biographie">
<area shape="rect" coords="42,306,188,338" href="#lyrics" alt="Lyrics Ayumi Hamasaki" title="Lyrics">
<area shape="rect" coords="296,153,470,185" href="#pix" alt="Galerie Ayumi Hamasaki" title="Galerie">
</map></center>

Reply

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

Code :

<script type="text/javascript">
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' />" );
</script>
<center><map name="ayu">
<area shape="rect" coords="224,494,494,527" href="#bio" alt="Biographie Ayumi Hamasaki" title="Biographie">
<area shape="rect" coords="42,306,188,338" href="#lyrics" alt="Lyrics Ayumi Hamasaki" title="Lyrics">
<area shape="rect" coords="296,153,470,185" href="#pix" alt="Galerie Ayumi Hamasaki" title="Galerie">
</map></center>

ou encore en un peu plus propre

Code :

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

<ul id="menu">
<li id="menu_bio"><a href="#bio" title="Biographie Ayumi Hamasaki">Biographie</a></li>
<li id="menu_lyrics"><a href="#lyrics" title="Lyrics Ayumi Hamasaki">Lyrics</a></li>
<li id="menu_pix"><a href="#pix" title="Galerie Ayumi Hamasaki">Galerie</a></li>
</ul>
<style type="text/css">
/* la balise style doit soit etre mise dans le header ou bien tu mets le code CSS dans une feuille CSS a part */
#menu, #menu li {margin:0; padding:0}
#menu {position:relative; height:648px; width:500px; background:url(images/1/1.png) no-repeat left top}
#menu li {position:absolute;}
#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 */
#menu_bio {left:224px; top:494px; width:275px; height:33px}
#menu_bio {left:42px; top:306px; width:146px; height:32px}
#menu_bio {left:296px; top:153px; width:174px; height:32px}
</style>
<script type="text/javascript">
// code JS qui peut etre mis dans un fichier JS à part
function addEvent( obj, type, fn )
{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent)
{
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
function randomNavImage() {
var m = document.getElementById("menu" );
if (m) m.style.backgroundImage = "url(images/1/" + parseInt(Math.random()*2) + ".png)";
}
addEvent(window, "load", randomNavImage);
</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 :

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

Pour savoir que c'était du gatsu

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 ?

Message cité 1 fois

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

Reply

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

zecrazytux a écrit :

fn ?

fn = FuNction rien à voir avec quelconque parti politique

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

---------------
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

Mapping + Images aléatoire

Sujets relatifs:

Leave a Replay

 Mapping + Images aléatoire 

Sujets relatifs:

Leave a Replay

Mapping + Images aléatoire