Zone cliquable changeante

Fermé

Xzimnut - 13 févr. 2010 à 12:21
Xzimnut - 14 févr. 2010 à 17:41

Bonjour à tous

J'ai un petit problème concernant mon site : je souhaite créer une carte sur laquelle sont positionnés des points, point reliés à un fichier en mp3 par une zone cliquable. Or, je voudrais également que lorsque la souris survole un point, une image apparaisse (en l'occurence, une bule informative). On ma donné un fichier java ainsi que quelques indications, mais rien n'y fait.

Voilà ma page :
<head>
<link rel="stylesheet" media="screen" type="text/css" title="style1" href="css/style1.css" />
<script type="text/javascript" language="JavaScript" src="java/telech.js"></script>
</head>
<body>
[...]
<div id="TableContentBottom" class="MapContainer">
<div id="TableContentBottom" class="Map">
<div style="background-image:url(images/presentation/transparent.gif);" class="Map" id="area_image">
<img src="images/presentation/transparent.gif" border="0" usemap="#europe_map">
</div>
</div>
</div>
<map name="europe_map">
<area id="ep_1" shape="rect" coords="90,206,98,214" href="http://www.retour-a-jelen.net/episodes/episode_1_rencontre_impromptue.zip" title="Episode 1" onmouseover="change_image(1)" onmouseout="hide_image(1)">
</map>
</div>
</div>

<script type="text/javascript" language="JavaScript">

</script>

Mon script :
function preload_image(_image) {
var image = new Image;
image.src = _image;
}

function change_image(episode) {
var ShowItem = document.getElementById("area_image");
ShowItem.style.backgroundImage = 'url(images/presentation/ep_' + episode + '.gif)';
return true;
}

function hide_image(episode) {
var ShowItem = document.getElementById("area_image");
ShowItem.style.backgroundImage = 'url(images/presentation/vide.gif)';
return true;
}

Et ma feuille de style :
#TableContentBottom {
margin-top:0px;
width:100%;
}

#TableContentBottom td {
vertical-align:top;
}

#TableContentBottom .MapContainer {
margin-bottom:10px;
}

#TableContentBottom .Map {
background:url("../images/presentation/carte_europe.gif");
background-repeat: no-repeat;
width:544px;
height:399px;
}

A voir également:

Zone cliquable changeante
Zone telechargement - Accueil - Outils
Sommaire cliquable word - Guide
Combien y a-t-il de bateaux dans la zone de 475 pixels de large et 1000 pixels de haut à partir du coin supérieur gauche de cette image ? - Forum Photoshop
Zone téléchargement - Accueil - Services en ligne
Combien y a-t-il de bateaux dans la zone de 1500 pixels de large et 500 pixels de haut à partir du coin supérieur gauche de cette image ? - Forum Graphisme

4 réponses

Réponse 1 / 4

Utilisateur anonyme
14 févr. 2010 à 08:28

Salut !

J'ai fait une recopie de tes codes, pour tester et modifier si besoin ta page, mais ça a marché nickel avec tout les récents navigateurs (Google Chrome 4, Firefox, IE 8 et safari). Donc soit c'est une autre partie de ta page qui fait beuger celle-là (ce qui est loins d'être impossible), soit c'est que tu utilise un navigateur (IE 7, je me trompe ?) qui ne tiens pas compte de ces codes, mais sachant que le module de compatibilité IE 7/8 était désactivé, ce n'est sûrement pas ça. Regarde donc si ce code unique marche (c'est le tout en 1 de test 3 codes) :

<head>
<style type='text/css'>
#TableContentBottom { 
margin-top:0px; 
width:100%;	
} 

#TableContentBottom td { 
vertical-align:top; 
} 

#TableContentBottom .MapContainer { 
margin-bottom:10px; 
} 

#TableContentBottom .Map { 
background:url("http://www.retour-a-jelen.net/images/presentation/carte_europe.gif") no-repeat; 
/*background-repeat: no-repeat;*/
width:544px; 
height:399px; 
}
</style>
<script type='text/javascript'>
function preload_image(_image) { 
var image = new Image; 
image.src = _image; 
} 

function change_image(episode) { 
var ShowItem = document.getElementById("area_image"); 
ShowItem.style.backgroundImage = 'url(http://www.retour-a-jelen.net/images/presentation/ep_' + episode + '.gif)'; 
return true; 
} 

function hide_image(episode) { 
var ShowItem = document.getElementById("area_image"); 
ShowItem.style.backgroundImage = 'url(http://www.retour-a-jelen.net/images/presentation/vide.gif)'; 
return true; 
} 
</script>
</head> 
<body> 
<div id="TableContentBottom" class="MapContainer"> 
<div id="TableContentBottom" class="Map"> 
<div style="background:url(test-image.png);" class="Map" id="area_image"> 
<img src="http://www.retour-a-jelen.net/images/presentation/transparent.gif" border="0" usemap="#europe_map">
</div>	
</div> 
</div> 
<map name="europe_map"> 
<area id="ep_1" shape="rect" coords="90,206,98,214" href="http://www.retour-a-jelen.net/episodes/episode_1_rencontre_impromptue.zip" title="Episode 1" onmouseover="change_image(1)" onmouseout="hide_image(1)"> 
</map> 
</div> 
</div> 

<script type="text/javascript" language="JavaScript"> 
<!-- 
preload_image('http://www.retour-a-jelen.net/images/presentation/ep_1.gif'); 
//--> 
</script>
</body>
</html>