Header
Partagez | 

Changer le contenu d'un bloc au survol de la souris

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 113
Voir le profil de l'utilisateur

Message Sujet: Changer le contenu d'un bloc au survol de la souris   Mar 7 Aoû - 9:22

[justify]Bonjour à tous Smile

Dans ce tutoriel surtout axé javascript, nous allons apprendre à faire ceci



Ce tuto va se divisier en 3 parties :


Comme nous allons travailler ce code sur une page html, nous allons tous partir de la même base, qui est la suivante :
Code:
<!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=utf-8" />
      <title>Tutoriel "Changer le contenu d'un bloc au survol de la souris"</title>
      
<style type="text/css">

/* Le CSS sera ici */

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
<!--

   <!-- le code javascript sera ici -->

-->
</script>

   </head>
   <body>

<!-- le code html sera ici -->   

   </body>
</html>

Idea Rappel :
Code:
/* Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie CSS */

<!-- Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie javascript -->

<!-- Pour mettre un commentaire/un repère non intéprété par le navigateur dans la partie HTML -->

Idea Pré-requis :


Allez ! C'est parti !

La partie HTML



Tout ce qu'on va bosser dans cette partie sera à placer entre les balises
Code:
<body>

...

</body>

Ici, on va partir sur une structure simple Smile Une zone contenant 3 textes et un bloc qui contiendra notre contenu.

1 :: Les éléments déclancheurs
Ici, on va donc avoir un paragraphe, avec 3 mots (ou groupes de mots) qu'on placera entre span. Afin de pouvoir travailler la mise en page, on va aussi donner un nom à ce paragraphe.
Code:
<p id="eltDeclancheur">
   <span>Texte1</span> - <span>Texte2</span> - <span>Texte3</span>
</p>

2 :: Le bloc "contenu"
Ensuite, on va coder un bloc (div) à qui on va donner un nom également.
Code:
<div id="contenu">

</div>
Ce bloc va contenir 3 blocs : un pour chaque élément déclancheur
Code:
<div id="contenu">
   <div id="contenu1">
      <!-- Le contenu affiché au survol de l'élement déclancheur 1 -->
   </div>
   <div id="contenu2">
      <!-- Le contenu affiché au survol de l'élement déclancheur 2 -->
   </div>
   <div id="contenu3">
      <!-- Le contenu affiché au survol de l'élement déclancheur 3 -->
   </div>
</div>

On va remplir ces blocs avec du texte généré et on va mettre un titre.
Code:
<div id="contenu">
   <div id="contenu1">
      <!-- Le contenu affiché au survol de l'élement déclancheur 1 -->
      <h1>Mon contenu 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
   <div id="contenu2">
      <!-- Le contenu affiché au survol de l'élement déclancheur 2 -->
      <h1>Mon contenu 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
   <div id="contenu3">
      <!-- Le contenu affiché au survol de l'élement déclancheur 3 -->
      <h1>Mon contenu 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
</div>

Pour le moment, ça ressemble à ça
Spoiler:
 

La partie CSS



Mettons un peu de mise en page dans tout ça. Personnellement, je pars dans un truc simple :
-> une couleur de fond de page
-> tous mes textes seront écrit en verdana, #666666 et taille 12px
-> mon paragraphe avec mes élements déclancheurs sera centré et écrit en gras
-> mes titres seront en taille 14, avec une couleur de fond et un cadre
-> mes contenus seront dans un bloc avec une taille fixe et une scrollbar.
Code:
/*--- Mise en page de la page ---*/
body{
   background-color:#333333;
   color:#666666;
   font-family:Verdana;
   font-size:12px;
   }
   
/*--- Mise en page des textes déclancheurs ---*/
p#eltDeclancheur{
   font-weight:bold;
   text-align:center;
   }
   
/*--- Mise en page des titres ---*/
div#contenu h1{
   font-size:14px;
   background-color:white;
   color:black;
   border:1px solid black;
   text-align:center;
   width:400px;
   margin:auto;
   }

/*--- Mise en page du bloc contenant les contenus ---*/   
div#contenu{
   background-color:#252525;
   width:500px;
   margin:auto;
   border:1px solid white;
   }
   
/*--- Mise en page des contenus ---*/
div#contenu div#contenu1, div#contenu div#contenu2, div#contenu div#contenu3{
   width:500px;
   margin:auto;
   margin-bottom:10px;
   height:100px;
   overflow-y:auto;
   }

ça prend forme
Spoiler:
 

La partie javascript



Tout d'abord, je vous ai pré-maché le travail Smile En effet, dans la base du code fourni, j'ai déjà appelé la bibliothéque javascript (= la grosse base de donnée contenant des fonctions/animations pré-définies). Cela correspond à cette partie du code :
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Ici, on va donc devoir faire en sorte que :
  • au lancement de la page, tout nos blocs contenus soit cachés, sauf le premier,
  • quand on survole un élément déclancheur, il masque tous les blocs contenus sauf celui auxquels il est rattaché.

On y va donc.

1 :: Tout d'abord, on crée notre fonction qui s'appelle "changeInfos"
Code:
function changeInfos(elem){

}

Ensuite, on va créer une variable (en gros une sorte de case mémoire) que l'on va appeler "info_element" et qui va correspondre à la valeur de "elem" (donc l'élement à afficher). Rassurez-vous, vous comprendrez dans la suite son utilité Smile
Code:
var info_element = elem;

2 :: Puis, on va faire des tests pour savoir quoi afficher Smile Par exemple, si "elem" correspond à "aff1", ça veut dire que j'ai survolé le texte pour afficher les infos du contenu1 et que donc, c'est ce bloc que je veux rendre visible. Ici, pour "afficher/masquer", on va tout simplement utiliser du css
Code:
display:none; => on cache
display:inline => on affiche
On commence par le test "si ma variable 'info_element' contient 'aff1'"
Code:
if(info_element == "aff1"){
"Alors j'affiche le bloc de ma page (document.) ayant pour id 'contenu1'" (getElementById("contenu1").) (à comprendre, je lui donne comme CSS le display inline)
Code:
document.getElementById("contenu1").style.display = "inline";
"Et du coup, je cache les blocs 'contenu2' et 'contenu3'(à comprendre, je leur donne comme CSS le display none)
Code:
document.getElementById("contenu2").style.display = "none";
   document.getElementById("contenu3").style.display = "none";

Et on n'oublie pas de fermer l'accolade pour signaler que le test est terminé Smile

Notre premier test ressemble donc à ça
Code:
if(info_element == "aff1"){
   document.getElementById("contenu1").style.display = "inline";
   document.getElementById("contenu2").style.display = "none";
   document.getElementById("contenu3").style.display = "none";
   }

3 :: Mais il faut le faire pour chaque bloc Smile Donc, on va avoir un test du type
Citation :
Si info_element contient "aff1", alors on fait ça.....
Code:
if(info_element == "aff1"){
   document.getElementById("contenu1").style.display = "inline";
   document.getElementById("contenu2").style.display = "none";
   document.getElementById("contenu3").style.display = "none";
   }
Citation :
sinon
Code:
else
Citation :
Si info_element contient "aff2", alors on fait ça.....
Code:
if(info_element == "aff2"){
   document.getElementById("contenu1").style.display = "none";
   document.getElementById("contenu2").style.display = "inline";
   document.getElementById("contenu3").style.display = "none";
   }
Citation :
sinon
Code:
else
Citation :
Si info_element contient "aff3", alors on fait ça.....
Code:
if(info_element == "aff3"){
   document.getElementById("contenu1").style.display = "none";
   document.getElementById("contenu2").style.display = "none";
   document.getElementById("contenu3").style.display = "inline";
   }

Au final, le javascript ressemble à ça

Code:
function changeInfos(elem){
   var info_element = elem;
   
   if(info_element == "aff1"){ /* J'affiche le contenu 1 */
      document.getElementById("contenu1").style.display = "inline";
      document.getElementById("contenu2").style.display = "none";
      document.getElementById("contenu3").style.display = "none";
   }else if(info_element == "aff2"){ /* J'affiche le contenu 2 */
      document.getElementById("contenu1").style.display = "none";
      document.getElementById("contenu2").style.display = "inline";
      document.getElementById("contenu3").style.display = "none";
   }else if(info_element == "aff3"){ /* J'affiche le contenu 3 */
      document.getElementById("contenu1").style.display = "none";
      document.getElementById("contenu2").style.display = "none";
      document.getElementById("contenu3").style.display = "inline";
   }
}

4 :: Nos blocs sont prêts, le javascript est prêt, il n'y a plus qu'à l'appeler Smile On va donc devoir utiliser un code qui va dire
Citation :
Quand ma souris passe, j'appelle le javascript en lui fournissant le bon nom de l'élement à afficher.

Ce code va ressembler à ça
Code:
onmouseover="changeInfos('nom_du_bloc')"

Et on va mettre ce code dans les bonnes balises par exemple
Code:
<p id="eltDeclancheur">
   <span onmouseover="changeInfos('aff1');this.style.cursor='pointer'">Texte1</span> - <span onmouseover="changeInfos('aff2');this.style.cursor='pointer'">Texte2</span> - <span onmouseover="changeInfos('aff3');this.style.cursor='pointer'">Texte3</span>
</p>
Idea this.style.cursor='pointer' permet de changer le curseur en main au survol du texte.

Idea Si vous voulez que le texte s'affiche en cliquant sur l'élement déclancheur (et non en le survolant), on va utiliser onclick
Code:
<p id="eltDeclancheur">
   <span onmouseover="this.style.cursor='pointer'" onclick="changeInfos('aff1');">Texte1</span> - <span onmouseover="this.style.cursor='pointer'" onclick="changeInfos('aff2');">Texte2</span> - <span onmouseover="this.style.cursor='pointer'" onclick="changeInfos('aff3');">Texte3</span>
</p>

5 :: Pour le moment, si vous essayez votre code, ça fonctionne, sauf qu'au départ, tous nos blocs sont visibles. Or, nous on ne veut que le premier contenu visible par défaut (donc au chargement de la page). On va tout simplement donner au départ un display:none à nos autres blocs

Code:
<div id="contenu">
   <div id="contenu1">
      <!-- Le contenu affiché au survol de l'élement déclancheur 1 -->
      <h1>Mon contenu 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
   <div id="contenu2" style="display:none;">
      <!-- Le contenu affiché au survol de l'élement déclancheur 2 -->
      <h1>Mon contenu 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
   <div id="contenu3" style="display:none;">
      <!-- Le contenu affiché au survol de l'élement déclancheur 3 -->
      <h1>Mon contenu 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
</div>

-------------

Voila c'est terminé ^^ Voici donc le code complet de votre page html
Code:
<!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=utf-8" />
      <title>Tutoriel "Changer le contenu d'un bloc au survol de la souris"</title>
      
<style type="text/css">

/* Le CSS sera ici */

/*--- Mise en page de la page ---*/
body{
   background-color:#333333;
   color:#666666;
   font-family:Verdana;
   font-size:12px;
   }
   
/*--- Mise en page des textes déclancheurs ---*/
p#eltDeclancheur{
   font-weight:bold;
   text-align:center;
   }
   
/*--- Mise en page des titres ---*/
div#contenu h1{
   font-size:14px;
   background-color:white;
   color:black;
   border:1px solid black;
   text-align:center;
   width:400px;
   margin:auto;
   }

/*--- Mise en page du bloc contenant les contenus ---*/   
div#contenu{
   background-color:#252525;
   width:500px;
   margin:auto;
   border:1px solid white;
   }
   
/*--- Mise en page des contenus ---*/
div#contenu div#contenu1, div#contenu div#contenu2, div#contenu div#contenu3{
   width:500px;
   margin:auto;
   margin-bottom:10px;
   height:100px;
   overflow-y:auto;
   }

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >
<!--

function changeInfos(elem){
   var info_element = elem;
   
   if(info_element == "aff1"){ /* J'affiche le contenu 1 */
      document.getElementById("contenu1").style.display = "inline";
      document.getElementById("contenu2").style.display = "none";
      document.getElementById("contenu3").style.display = "none";
   }else if(info_element == "aff2"){ /* J'affiche le contenu 2 */
      document.getElementById("contenu1").style.display = "none";
      document.getElementById("contenu2").style.display = "inline";
      document.getElementById("contenu3").style.display = "none";
   }else if(info_element == "aff3"){ /* J'affiche le contenu 3 */
      document.getElementById("contenu1").style.display = "none";
      document.getElementById("contenu2").style.display = "none";
      document.getElementById("contenu3").style.display = "inline";
   }
}

-->
</script>

   </head>
   <body>

<p id="eltDeclancheur">
   <span onmouseover="changeInfos('aff1');this.style.cursor='pointer'">Texte1</span> - <span onmouseover="changeInfos('aff2');this.style.cursor='pointer'">Texte2</span> - <span onmouseover="changeInfos('aff3');this.style.cursor='pointer'">Texte3</span>
</p>   

<div id="contenu">
   <div id="contenu1">
      <!-- Le contenu affiché au survol de l'élement déclancheur 1 -->
      <h1>Mon contenu 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
   <div id="contenu2" style="display:none;">
      <!-- Le contenu affiché au survol de l'élement déclancheur 2 -->
      <h1>Mon contenu 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
   <div id="contenu3" style="display:none;">
      <!-- Le contenu affiché au survol de l'élement déclancheur 3 -->
      <h1>Mon contenu 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit elit, malesuada nec sagittis at, lobortis vel elit. Donec quis lorem hendrerit odio vehicula hendrerit. Maecenas rhoncus est nec lacus pulvinar dictum. Nulla aliquam molestie iaculis. Ut hendrerit nisl a felis gravida accumsan. Ut molestie malesuada mollis. Suspendisse ullamcorper dignissim dapibus</p>
   </div>
</div>

   </body>
</html>




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
Revenir en haut Aller en bas
Changer le contenu d'un bloc au survol de la souris
Page 1 sur 1
 Sujets similaires
-
» Changer le contenu d'un objet Texte Riche dynamiquement?
» Objets réagissant au survol de la souris, sans clic !
» [résolu] Lien dans image survolée vers page html
» [RESOLU] une action en sortant d'un bouton (type onmouseout)
» [résolu] une vidéo ajustable en taille avec bouton survol?
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+