Site web

loyo34 Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   -  
loyo34 Messages postés 44 Date d'inscription   Statut Membre Dernière intervention   -
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
 
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 44 Date d'inscription   Statut Membre Dernière intervention  
 
Merci beaucoup sa marche
0

Discussions similaires

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

2 réponses