Bonjour,
Dommage que tu ais manqué de patience.
Simplification, js extrusif, accès clavier(lien). Ce ne sera pas difficile d'ajouter les flèches en arrière plan. Au final il faudra mettre js et css dans des fichiers externes :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<style type="text/css" />
#list1 li{font-weight:bold;font-size:.9em;border-bottom:1px dotted #aaa}
#list1{width:250px}
#list1 li div{font-weight:normal;margin:10px 2px;}
#list1 a{text-decoration:none;color:#000;display:block;}
#list1 .novisible div{display:none;background:#fff}
#list1 .visible{background:#d0daff;color:#000}
</style>
<!--[if lte IE 6]>
<style type="text/css" />
#list1 a{height:0}
</style>
<![endif]-->
<script type="text/javascript">
function commuter(n){
if(lis[n].className=='novisible')lis[n].className='visible'
else lis[n].className='novisible'
}
window.onload = function(){
lis=document.getElementById('list1').getElementsByTagName('LI')
for(j=0;j<lis.length;j++){
lis[j].className="novisible"
lien=document.createElement('A')
lis[j].insertBefore(lien,lis[j].getElementsByTagName('DIV')[0])
lien.appendChild(lis[j].firstChild)
lien.href="javascript:commuter("+j+")"
}
}
</script>
</head>
<body>
<ul id="list1">
<li>titre
<div>bla bla bla bla bla bla bla bla bla bla bla bla </div>
</li>
<li>Redirection de votre nom de domaine
<div>Lorsqu'un internaute saisit votre nom de domaine, il sera redirigé vers l'adresse Web de destination de votre choix.</div>
</li>
<li>Frame Active
<div>Caractéristiques de nos Packs Redirection qui vous permettra de fixer votre nom du domaine sur la barre d'adresses du navigateur. En activant cette option, nous vous permettons, en plus, d'insérer des ...</div>
</li>
</ul>
</body>
</html>
Autre version avec les titres dans des éléments "h4" :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<style type="text/css" />
#list1 li{font-weight:bold;font-size:.9em;border-bottom:1px dashed #aaa}
#list1{width:250px}
#list1 li div{font-weight:normal;margin:10px 4px;}
#list1 a{text-decoration:none;color:#000;display:block;}
#list1 .novisible div{display:none;background:#fff}
#list1 .visible{background:#d0daff;color:#000}
</style>
<!--[if lte IE 6]>
<style type="text/css" />
#list1 a{height:0}
</style>
<![endif ]-->
<script type="text/javascript">
function commuter(n){
if(lis[n].className=='novisible')lis[n].className='visible'
else lis[n].className='novisible'
}
window.onload = function(){
lis=document.getElementById('list1').getElementsByTagName('LI')
for(j=0;j<lis.length;j++){
lis[j].className="novisible"
titre=lis[j].getElementsByTagName('H4')[0].firstChild
lien=document.createElement('A')
lis[j].replaceChild(lien,lis[j].getElementsByTagName('H4')[0])
lien.appendChild(titre)
lien.href="javascript:commuter("+j+")"
}
}
</script>
</head>
<body>
<ul id="list1">
<li>
<h4>titre</h4>
<div>bla bla bla bla bla bla bla bla bla bla bla bla </div>
</li>
<li>
<h4>Redirection de votre nom de domaine</h4>
<div>Lorsqu'un internaute saisit votre nom de domaine, il sera redirigé vers l'adresse Web de destination de votre choix.</div>
</li>
<li>
<h4>Frame Active</h4>
<div>Caractéristiques de nos Packs Redirection qui vous permettra de fixer votre nom du domaine sur la barre d'adresses du navigateur. En activant cette option, nous vous permettons, en plus, d'insérer des ...</div>
</li>
</ul>
</body>
</html>
Modifié par chmel (22 Aug 2006 - 09:34)
