Site web
Fermé
loyo34
Messages postés
43
Date d'inscription
mercredi 17 mars 2010
Statut
Membre
Dernière intervention
11 juin 2012
-
7 juin 2012 à 12:39
loyo34 Messages postés 43 Date d'inscription mercredi 17 mars 2010 Statut Membre Dernière intervention 11 juin 2012 - 11 juin 2012 à 11:29
loyo34 Messages postés 43 Date d'inscription mercredi 17 mars 2010 Statut Membre Dernière intervention 11 juin 2012 - 11 juin 2012 à 11:29
A voir également:
- Site web
- Site de telechargement - Guide
- Site inaccessible - Guide
- Traduire une page web - Guide
- Instagram web - Guide
- Site de vente entre particulier - Guide
2 réponses
Bonjour, il faut utiliser le DOM javascript pour le survol et changer l'attribut CSS du background.
Voici un exemple qui change le texte(nom du département) dans un div au survol d'une area <map> sur une carte
A adapter en fonction au lieu du div container qui change de texte ce doit être un truc du genre:
document.id_element_a_changer.class.value='css_couleur_au_survol';
Plus d'infos sur le DOM javascript @Google
Voici un exemple qui change le texte(nom du département) dans un div au survol d'une area <map> sur une carte
<html>
<head>
<script type="text/javascript">
<!-- --------------------intervertir image/texte(au survol)-------------------- -->
function changeimage1(){
document.gal.src="images/nice.gif";
document.getElementById("dynamiq").innerHTML ="Nice";
}
function changeimage2(){
document.gal.src="images/essonne.gif";
document.getElementById("dynamiq").innerHTML ="Soisy sur Seine";
}
function changeimage3(){
document.gal.src="images/salon.gif";
document.getElementById("dynamiq").innerHTML ="Salon de Provence";
}
<!-- --------------------remettre image/texte par défaut(onMouseout)-------------------->
function restore(){
document.gal.src="images/defaut.gif";
document.getElementById("dynamiq").innerHTML ="Lieu";
}
</script>
</head>
<body bgcolor="#8acdfc">
<table>
<tr>
<td>
<div style="border:1px solid blue;padding-left:1em;">
<p>
<span style="text-decoration:underline;">Les départements suivants sont sélectionnables sur la carte :</span>
<ul type="none">
<li>
Essonne(91)
</li>
<li>
Bouches-du-Rhône(13)
</li>
<li>
Alpes Maritimes(06)
</li>
<ul>
</p>
</div>
<center>
<div class="container">
<p class="titr" id="dynamiq">
Lieu
</p>
<img name="gal" src="images/defaut.gif">
</div>
</center>
</td>
<td>
<map name="map">
<!-- DEPARTEMENT 06-->
<area shape="polygon" coords="431,394, 439,387, 429,375, 441,365, 469,375, 465,393, 443,412, 420,393" href="http://google.com" alt="Alpes Maritimes" onmouseover="changeimage1()" onmouseout="restore()" />
<!-- ESSONNE 91 -->
<area shape="polygon" coords="256,131, 265,139, 264,150, 256,157, 253,153, 250,158, 244,154, 244,145" href="#" alt="Essonne" onmouseover="changeimage2()" onmouseout="restore()"/>
<!-- BOUCHES DU RHONE 13-->
<area shape="polygon" coords="338,418, 344,410, 344,408, 348,403, 353,401, 353,396, 358,391, 373,402, 380,401, 395,412, 396,425, 399,428, 393,433, 377,425, 372,425, 363,419, 360,424," href="#" alt="Bouches du Rhone" onmouseover="changeimage3()" onmouseout="restore()" />
</map>
<img usemap="#map" border="0" src="images/france.gif" width="480" height="540" alt="Carte des departements francais" />
</td>
</tr>
</table>
A adapter en fonction au lieu du div container qui change de texte ce doit être un truc du genre:
document.id_element_a_changer.class.value='css_couleur_au_survol';
Plus d'infos sur le DOM javascript @Google
loyo34
Messages postés
43
Date d'inscription
mercredi 17 mars 2010
Statut
Membre
Dernière intervention
11 juin 2012
11 juin 2012 à 11:29
11 juin 2012 à 11:29
Merci beaucoup sa marche
