11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Le survol d'un lien change le CSS d'une class

Bonjour à tous!

J'espère que je ne suis pas passer à côté de ma réponse parmi les questions déjà posées dans le forum, mais là je bloque Smiley sweatdrop

Je souhaite qu'au survol du lien "Salle A", toutes les td de class .salleA changent de couleur.
Idem pour le lien "Salle B" qui agit sur les td de class .salleB

Je ne sais pas si je suis très claire...

Voici mon code surement plus clair que mon français Smiley smile 

<a href="#">Salle A</a> <!--au survol de ce lien, toutes les td class .salleA changent de couleur-->
<a href="#">Salle B</a> <!--au survol de ce lien, toutes les td class .salleB changent de couleur-->

<table id="mosaique">
<tr>
<td class="salleA">blabla</td>
<td class="salleB">blabla</td>
<td class="salleA">blabla</td>
<td class="salleB">blabla</td>
</tr>
</table>



Merciii
Modifié par sarahhh (17 Jun 2011 - 17:35)
Salut sarahhh,

Un petit hover de ce style en jquery fera parfaitement l'affaire :


$("#lien_a").hover(
  function () {
    $(".salleA).css('color','red');
  }, 
  function () {
    $(".salleA).css('color','black');
  }
);


Il faut juste que tu identifies tes liens avec un id.
Bonsoir,

Ou alors, sans faire appel à jQuery :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Changement de couleur</title>
  </head>
  <body>
	<a href="#" onmouseover="changeBG('salleA')" onmouseout="changeBG('')">Salle A</a> <!--au survol de ce lien, toutes les td class .salleA changent de couleur--> 
	<a href="#" onmouseover="changeBG('salleB')" onmouseout="changeBG('')">Salle B</a> <!--au survol de ce lien, toutes les td class .salleB changent de couleur--> 
	 
	<table id="mosaique"> 
		<tr> 
			<td class="salleA">blabla</td> 
			<td class="salleB">blabla</td> 
			<td class="salleA">blabla</td> 
			<td class="salleB">blabla</td> 
		</tr> 
	</table>
	
    <script type="text/javascript">
//<![CDATA[
	var tblTD = document.getElementsByTagName("td");		
	function changeBG(salle){
		for(var x = 0; x < tblTD.length; x++){
			if(tblTD[x].className == "salleA" && salle == "salleA") {tblTD[x].style.backgroundColor = "#ffff33";}
			else if(tblTD[x].className == "salleB" && salle == "salleB") {tblTD[x].style.backgroundColor = "aqua";}
			else if(salle==""){tblTD[x].style.backgroundColor = "transparent";}
		}
	}
    //]]>
    </script>
  </body>
</html>

Veiller à bien placer le script js avant la balise fermante du body!
Cordialement
Merci à tous les deux! Vous avez sauvez la blonde que je suis Smiley langue

Utilisant déjà la librairie jQuery dans ce site, j'ai choisi la première solution.
Je mets bien la 2ème de côté par contre!

Et si ça peut être utile à quelqu'un, voici ce que j'ai mis :


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">       
$(document).ready(function() {
$('#lienA').hover( function () { 
$('.salleA').css('color','red'); },  
function () { 
$('.salleA').css('color','black'); } ); 
});

</script>

<a href="#" id="lienA">Salle A</a>
<!--au survol de ce lien, toutes les td class .salleA changent de couleur-->
<a href="#" id="lienB">Salle B</a>
<!--au survol de ce lien, toutes les td class .salleB changent de couleur-->
<table id="mosaique">
  <tr>
    <td class="salleA">blabla</td>
    <td class="salleB">blabla</td>
    <td class="salleA">blabla</td>
    <td class="salleB">blabla</td>
  </tr>
</table>



Merci encore!
Modifié par sarahhh (17 Jun 2011 - 18:25)
Attention à bien placer ton script à la fin du code html, avant la balise fermante du body comme l'a dit lddsoft.
sarahhh a écrit :
Utilisant déjà la librairie jQuery dans ce site, j'ai choisi la première solution.

Dans ce cas, pourquoi se priver?
Bonne continuation! Smiley smile
Modifié par lddsoft (17 Jun 2011 - 20:04)
Sujet clos
Aller à