Sujet Précédent Sujet Suivant

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
Bonjour,
j'aimerais savoir s'il est possible d'avoir une aide sur un projet web concernant une image avec des zones (balise <map>) nous souhaitons au survol d'une zones surligner dans un tableau (rempli par une base de données) la ligne correspondante avec une couleur.

Merci



A voir également:

2 réponses

Réponse 1 / 2
Justin_Bebert
7 juin 2012 à 17:16
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 

<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
1
Réponse 2 / 2
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
Merci beaucoup sa marche
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses