1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
| <!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> |
Partager