Je remonte le post avec un peu de retard, car j'ai été obligé de mettre en standby le projet. Mais me voici de retour. Merci en tout cas à vous pour votre feedbacK.
J'ai encapsulé comme me la conseillé florent, je suis content, car c'est beaucoup plus propre. Par contre je ne sais pas comment tester pour voir si le script est plus rapide ou pas.
voici ce que j'ai fait :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Javascript </title>
<link rel="stylesheet" href="css/template.css" type="text/css" media="screen" />
</head>
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
var myMap = function(){
var regions = [
'france', 'corse', 'paca', 'languedoc-roussillon', 'rhone-alpes',
'midi-pyrennees', 'aquitaine', 'poitou-charente', 'auvergne', 'limousin',
'pays-de-la-loire', 'bretagne', 'basse-normandie', 'haute-normandie',
'franche-comte', 'alsace', 'lorraine', 'bourgogne', 'centre', 'ile-de-france',
'champagne-ardenne', 'picardie', 'nord-pas-de-calais'
]
for (var r in regions) {
var img = new Image();
img.src = 'images/carte'+regions[r]+'.jpg';
regions[r] = img;
}
function swap(n) {
document.getElementById('switch1').src = regions[n].src;
}
return {regions: regions, swap: swap}
}();
//-->
</SCRIPT>
<div id="nsink-carte"><img src="images/france.jpg" id = "switch1" alt="carte de france" width="190" height="173" border="0" usemap="#carte-france" />
<map name="carte-france" id="carte-france">
<area shape="poly" coords="165,158,165,162,168,169,171,174,175,167,177,154,174,144,166,151,164,155"
href="regions/corse"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(1);"
class="tipz"
title="Corse"
alt="Corse"
style="cursor: pointer" />
<area shape="poly" coords="145,134,141,141,133,143,114,138,121,127,126,122,134,124,140,120,144,118,144,124,147,127,156,128,148,135"
href="regions/provence-alpes-cote-d-azur"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(2);"
title="Paca"
alt="Paca"
class="tipz"
style="cursor: pointer"
/>
<area shape="poly" coords="121,124,112,118,107,111,98,113,101,125,92,139,83,141,80,149,83,153,89,155,98,155,97,146,102,138,112,137,117,138"
href="regions/languedoc-roussillon"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(3);"
class="tipz"
title="Languedoc Roussillon"
alt="languedoc-roussillon"
style="cursor: pointer" />
<area shape="poly" coords="106,112,112,108,104,101,104,94,112,88,118,87,125,90,132,93,139,89,141,90,141,94,144,99,141,99,143,103,144,107,140,110,142,113,143,117,137,121,120,123"
href="regions/rhone-alpes"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(4);"
class="tipz"
title="Rhone-alpes"
alt="rhone-alpes"
style="cursor: pointer"/>
<area shape="poly" coords="98,114,90,116,83,113,75,113,74,124,70,132,62,136,64,141,66,148,68,150,72,149,77,152,85,142,94,138,97,131,99,120"
href="regions/midi-pyrennees"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(5);"
class="tipz"
title="Midi-Pyennees"
alt="midi-pyrennees"
style="cursor: pointer"/>
<area shape="poly" coords="75,115,74,106,65,106,60,114,56,111,47,104,47,125,43,138,38,140,56,149,66,150,63,137,72,130,75,122"
href="regions/aquitaine"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(6);"
class="tipz"
title="Aquitaine"
alt="aquitaine" />
<area shape="poly" coords="69,107,78,100,81,91,74,82,64,83,60,78,51,87,53,94,49,97,46,98,50,106,59,115"
href="regions/poitou-charente"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(7);"
class="tipz"
title="Poitou Charente"
alt="poitou-charente" />
<area shape="poly" coords="108,90,115,82,110,75,95,80,91,89,95,102,89,111,96,115,106,114,111,110,105,98"
href="regions/auvergne"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(8);"
class="tipz"
title="Auvergne"
alt="auvergne" />
<area shape="poly" coords="80,88,89,87,93,93,94,102,90,109,92,116,80,116,75,107,80,99"
href="regions/limousin"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(9);"
class="tipz"
title="Limousin"
alt="limousin" />
<area shape="poly" coords="63,82,69,76,76,67,76,58,63,55,52,54,50,63,48,76,43,73,37,79,41,89,48,97,50,100,52,94,52,87,58,82,63,82"
href="regions/pays-de-la-loire"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(10);"
class="tipz"
title="Pays de la Loire"
alt="pays-de-la-loire" />
<area shape="poly" coords="40,47,47,52,52,56,51,61,49,75,43,77,39,79,34,70,28,67,18,63,9,61,4,61,6,58,8,56,4,55,4,53,10,50,14,48,19,46,24,48,29,50,32,51,40,52"
href="regions/bretagne"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(11);"
class="tipz"
title="Bretagne"
alt="bretagne" />
<area shape="poly" coords="76,57,78,50,72,44,69,35,63,33,56,37,49,33,46,32,43,29,41,36,41,42,40,49,52,54"
href="regions/basse-normandie"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(12);"
class="tipz"
title="Basse Normandie"
alt="basse-normandie" />
<area shape="poly" coords="76,48,84,44,86,35,84,24,78,19,71,27,62,30,71,38"
href="regions/haute-normandie"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(13);"
class="tipz"
title="Haute Normandie"
alt="haute-normandie" />
<area shape="poly" coords="120,89,118,80,126,71,133,64,142,62,146,68,141,75,137,82,133,91,130,92,120,89"
href="regions/franche-comte"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(14);"
class="tipz"
title="Franche Comte"
alt="franche-comte" />
<area shape="poly" coords="142,63,142,59,146,49,143,42,150,40,157,43,153,52,154,61,149,69,145,66"
href="regions/alsace"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(15);"
class="tipz"
title="Alsace"
alt="alsace" />
<area shape="poly" coords="123,30,119,43,118,53,125,58,133,64,141,63,144,55,147,49,145,41,144,37,138,34,129,32"
href="regions/lorraine"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(16);"
class="tipz"
title="Lorraine"
alt="lorraine" />
<area shape="poly" coords="100,78,97,74,98,64,100,57,106,53,113,52,119,55,129,61,135,65,128,71,120,79,115,81,110,77"
href="regions/bourgogne"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(17);"
class="tipz"
title="Bourgogne"
alt="bourgogne" />
<area shape="poly" coords="85,46,95,51,102,56,99,62,98,72,99,79,92,86,84,91,77,89,72,83,68,85,68,80,77,68,77,59,77,49"
href="regions/centre"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(18);"
class="tipz"
title="Centre"
alt="centre" />
<area shape="poly" coords="85,42,88,49,94,52,104,50,106,45,100,42,93,40,89,42"
href="regions/ile-de-france"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(19);"
class="tipz"
title="Ile-de-France"
alt="ile-de-france" />
<area shape="poly" coords="108,21,103,29,103,43,106,51,113,53,116,53,119,45,121,37,124,31,121,29,118,22,113,26"
href="regions/champagne-ardenne"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(20);"
class="tipz"
title="Champagne-Ardenne"
alt="champagne-ardenne" />
<area shape="poly" coords="81,19,90,19,98,19,103,22,108,21,105,27,104,41,94,42,87,44,88,35,84,25"
href="regions/picardie"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(21);"
class="tipz"
title="Picardie"
alt="picardie" />
<area shape="poly" coords="79,18,89,18,98,19,104,22,110,22,110,19,104,16,99,11,93,8,91,5,86,5,81,8,82,14"
href="regions/nord-pas-de-calais"
onMouseOut = "myMap.swap(0)"
onMouseOver = "myMap.swap(22);"
class="tipz"
title="Nord-Pas-De-Calais"
alt="nord-pas-de-calais" />
</map>
</div>
</html>
Je vous avoue que j'opterais bien pour la solution javascript non intrusif, mais j'ai peur que mes connaissances faibles de ce language ne m'empêche de le faire. Pensez vous qu'il soit nécessaire que je me penche sur cette solution ? Quel est le rapport gain de vitesse du script / temps d'apprentissage pour mettre en place cette solution ?
Par ailleurs, j'ai placé la fonction datelastmovement ici : est bon ?
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
var myMap = function(){
var regions = [
'france', 'corse', 'paca', 'languedoc-roussillon', 'rhone-alpes',
'midi-pyrennees', 'aquitaine', 'poitou-charente', 'auvergne', 'limousin',
'pays-de-la-loire', 'bretagne', 'basse-normandie', 'haute-normandie',
'franche-comte', 'alsace', 'lorraine', 'bourgogne', 'centre', 'ile-de-france',
'champagne-ardenne', 'picardie', 'nord-pas-de-calais'
]
for (var r in regions) {
var img = new Image();
img.src = 'images/'+regions[r]+'.jpg';
regions[r] = img;
}
function swap(n) {
document.getElementById('switch1').src = regions[n].src;
}
return {regions: regions, swap: swap}
if( dateLastMovement &&
(new Date().getTime() - dateLastMovement.getTime()) < 100) {
return;
}
dateLastMovement = new Date();
}();
//-->
</SCRIPT>
merci !
pour récupérer un élément donné, myMap.swap(0) pour afficher la carte de France, etc.