Zone cliquable changeante
Xzimnut
-
Xzimnut -
Xzimnut -
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">
<!--
preload_image('http://www.retour-a-jelen.net/images/presentation/ep_1.gif');
//-->
</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;
}
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">
<!--
preload_image('http://www.retour-a-jelen.net/images/presentation/ep_1.gif');
//-->
</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
- Alternative zone telechargement - Accueil - Outils
- Zone alarm - Télécharger - Pare-feu
- Sommaire cliquable word - Guide
- Zone annuaire guru - Accueil - Services en ligne
- 02 880 zone - Guide
4 réponses
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) :
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>