Traiter le survol de la souris pour deux div principales

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Traiter le survol de la souris pour deux div principales

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Traiter le survol de la souris pour deux div principales (Lu 1501 fois)

Traiter le survol de la souris pour deux div principales
« sur: le 07-05-2011 a 16:12:38 »

apt
Membre récent

Hors-Ligne

Sexe: Male

Messages: 11

Bonjour à tous,

Je cherche comment faire pour traiter un survol sur deux div
principales.

En premier temps, les deux div principales (DIV1 et DIV2) apparaissent
et le premier titre est sélectionné avec son image news1.jpg affichée.

http://majallati.comli.com/test/div3hover/d3h6.php

S'il y a survol de la souris sur l'un des deux div principales,
l'autre perdra le focus avec disparition de l'image qui était
affichée.

Comment faire pour avoir le premier titre sélectionné des deux div
principales et le traitement du survol se fera juste sur la DIV que
j'ai en train des survoler ses titres sans que le premier titre de
l'autre div disparaitra avec son image ?

Merci.

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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab verticales</title>
<meta name="description" lang="fr" content="Essais de tabs verticales
accessibles avec jquery" />
<style type="text/css" media="screen">
body {
font-size: 90%;
font-family: arial, helvetica, sans-serif;
}
h1 {text-align: center; color: #f00;}
h3 {
text-align: left;
color: #f00;
font-size: 12px;
}
.articles {
position : relative;
border: 1px solid #000;
width: 352px; height : 123px;
}
.articles h3, .articles h3 a {color: #900; }
/*.hasJS .articles {min-height:200px;}*/
.hasJS .articles h3 {
cursor: pointer;
background-color: #999;
margin: 0;
padding: 5px;
border-bottom: #fff 1px solid;
border-right: #fff 1px solid;
width:190px;
height:30px;
}
.hasJS .articles h3.selected {
background-color: #E5E5E5;
border-right: #fff 1px solid;
}
.hasJS .articles div div.montre {position: absolute; top: 0; right:
0; left: 196px; }
.hasJS .articles div div {position: absolute; top: -5000px; left:
-5000px; padding-left: 5px;}
.imag { width:150px; height:122px;}
a:link, a:visited, a:active{text-decoration: none;color: #333333;}
</style>
<script type="text/javascript">
document.documentElement.className+=" hasJS";
</script>
</head>

<body>
<h1>Tab verticales</h1>
<h2>Une série de h3 en tab horizontales</h2>
<div class= "articles" id="articles_1">
<div class="article">
<h3 class="selected"><a href="#">Massacre aux Philippines: le clan
a tué 200 autres personnes</a></h3>
<div class="montre">
<img class="imag"src="news1.jpg" alt="Figure 1" />
</div>
</div>
<div class="article">
<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2
si les Etats-Unis
suivent</a></h3>
<div>
<img class="imag" src="news2.jpg" alt="Figure 2" />
</div>
</div>
<div class="article">
<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
<div>
<img class="imag" src="news3.jpg" alt="Figure 3" />
</div>
</div>
</div>
<br /><br />
<div class= "articles" id="articles_2">
<div class="article">
<h3 class="selected"><a href="#">Massacre aux Philippines: le clan
a tué 200 autres personnes</a></h3>
<div class="montre">
<img class="imag"src="news1.jpg" alt="Figure 1" />
</div>
</div>
<div class="article">
<h3><a href="#">Le patronat européen prêt à des efforts sur le CO2
si les Etats-Unis
suivent</a></h3>
<div>
<img class="imag" src="news2.jpg" alt="Figure 2" />
</div>
</div>
<div class="article">
<h3><a href="#">Johnny Hallyday hospitalisé à Los Angeles</a></h3>
<div>
<img class="imag" src="news3.jpg" alt="Figure 3" />
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
$(document).ready( function () {
//tabindex pour la navigation au clavier
$(".articles h3").attr("tabindex", "0");
$(".articles h3").focus (
function () {
//trucs à faire pendant le focus sur les h3
$(".articles div.montre").removeClass("montre");
$(".articles h3.selected").removeClass("selected");
$(this).next("div").addClass("montre");
$(this).addClass("selected");
}
);
//
//
$('.articles').hover(function(){
var num = $(this).attr('id').substr(9); // fin de l'id à partir
du 10e caractère
if ( /^[0-9]{1,4}$/.test(num) ) { // on continue uniquement si on
a récupéré un nombre
var $articles = $('articles_' + num); // on récupère le DIV
correspondant au AREA survolé
// on fait ce qu'on veut avec
$articles.focus();

// gestion des hover sur les h3 :
$("div.article h3").hover(
function () {
//trucs à faire pendant le over sur les h3
$(".articles div.montre").removeClass("montre");
$(".articles h3.selected").removeClass("selected");
$(this).next("div").addClass("montre");
$(this).addClass("selected");
},
function () {
//out : trucs à faire éventuellement quand le pointeur sort du
h3
}
);
}
}
);
//

});
</script>
</body>
</html>

Merci.