Probleme de RollOver sur une map area

Bonjour a tous !

Pour vous exposer plus en detail mon probleme : voila je possede une carte du monde que j'ai decouper à l'aide de map area .
Mon souci est que j'aimerais appliquer a cette image un rollover (par exemple: modifier la couleur de la france en passant au dessus) tout en gardant la possibilité de rediriger l'utilisateur vers une 3eme image qui n'est pas en rollover...

J'ai chercher sur google plusieurs tutoriel qui n'ont rien donner que sa soit en javascript ou en Css.

je tient a préciser que mon image posséde plusieurs Area : Us, europe, asie...
Merci a vous par avance
Modifié par julxr6 (16 Mar 2007 - 09:57)

Bonjour, j'ai un problème de la même nature.

Voici ma page, elle fonctionne partout, sauf sur IE7.

En effet lorsque l'on survole une région, le nom de celle-ci devrait se souligner dans la liste !

http://www.ebuco.be/clients/ipantheon/1.consult.html
log : ipantheon
pass : ipant123

Si vous avez une solution, n'hésitez pas : <modération>Donnez la réponse sur le forum, tout le monde en profitera. </modération>
Merci bcp !

Le script Javascript :
----------------------
<script type="text/javascript">
var oneselected = false;

function switchImg(value) {

mapImg = document.getElementById('theMap');


document.getElementById('pro1').className='noselectPro';
document.getElementById('pro2').className='noselectPro';
document.getElementById('pro3').className='noselectPro';
document.getElementById('pro4').className='noselectPro';
document.getElementById('pro5').className='noselectPro';
document.getElementById('pro6').className='noselectPro';
document.getElementById('pro7').className='noselectPro';
document.getElementById('pro8').className='noselectPro';
document.getElementById('pro9').className='noselectPro';
document.getElementById('pro10').className='noselectPro';
document.getElementById('pro11').className='noselectPro';
document.getElementById('pro12').className='noselectPro';
document.getElementById('pro13').className='noselectPro';
oneselected = true;

mapText = document.getElementById('pro'+value);
mapText.className='selectPro';
mapImg.src= "images/"+value+".jpg";
}


function hoverImg(value) {
if(oneselected==false) {
mapImg = document.getElementById('theMap');
mapText = document.getElementById('pro'+value);
mapText.className='selectPro';
if(mapImg.src!='file:///D:/Data%20Thomas/PRO/web/Ipantheon/static%20HTML/images/'+value+'.jpg') {

mapImg.src= "images/"+value+"r.jpg";
}
}
}

function leaveImg(value) {


mapImg = document.getElementById('theMap');
mapText = document.getElementById('pro'+value);

if(oneselected==false) {
mapText.className='noselectPro';
mapImg.src= "images/0.jpg";
}



}

</script>

----------------------
Et dans mon tableau, les éléments se présentent comme ceci (en résumé) :

<tr>
<td id="pro3" ><a href="javascript:switchImg(3)" onmouseOver="hoverImg(3)" onmouseOut="leaveImg(3)">Anvers</a>
</td>
</tr>
Modifié par Julien Royer (06 Apr 2007 - 10:56)

Bonjour witchgunn et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation