Developpement Web CSS-Javascript [Résolu]

Signaler
Messages postés
32
Date d'inscription
mardi 16 octobre 2007
Statut
Membre
Dernière intervention
14 octobre 2010
-
Messages postés
32
Date d'inscription
mardi 16 octobre 2007
Statut
Membre
Dernière intervention
14 octobre 2010
-
Bonjour à tous, étant nouveau dans le développement Javascript je cherche à mettre en place une page web avec différent document PDF à télécharger et qui seront classé par ordre alphabétique comme ceci :

http://www.casimages.com/img.php?i=101012040408356685.jpg

Ma question est : Comment faire pour que je développe une seule page html avec dedans les différents liens qui m'amène dans les lettres de l'alphabet pour télécharger la doc pdf ? J'espère me faire comprendre ...
En gros le screen que je vous montre et bien ce serait des blocs qui apparaissent à chaque clic sur A-C ou D-F par exemple ! Et non des pages web différentes à chaque clic ...

Merci :)

7 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
Bonjour,
essaies avec onglet css, plein de bon exemples en pur CSS ou avec un peu de JavaScript.

;O)
Messages postés
32
Date d'inscription
mardi 16 octobre 2007
Statut
Membre
Dernière intervention
14 octobre 2010

En gros, j'aimerais réaliser la même chose que ce que vous avez en bas de votre site ou il y a dans les encarts :

Code Javascript | Tous les langages | Tutoriels | Forum | Livres | Groups | Logiciels | Boutique
Messages postés
276
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
La construction d'un tableau javascript, dans un fichier mespdf.js tel par exemple que celui-ci :
var mesDocs=new Array("atlas.pdf","bouquin.pdf",...,"zébulon.pdf");
permettrait son chargement (1ère ligne de code ci-après) puis son utilisation dans un script qui aurait pour tâche d'afficher les fichiers désignés par leurs initiales...
<script type="text/javascrip">mespdf.js</script>
<script type="text/javascrip">

function clicSurVolet(d,f){
// d et f sont des caractères tels que 'A','B','C'...
// que l'on transforme en minuscules 
   var a=d.toLowerCase(),z==f.toLowerCase(),lesDocs='';
// Construire la liste qui convient
   for (var i=0;i<mesDocs.length;i++) 
      if (a<=mesDoc[i].substr(0,1) && mesDoc[i].substr(0,1)<=z) 
         lesDocs+=mesDocs[i]+'
';}
// Afficher cette liste dans une div repérée par son identifiant (id="docs")  
   document.getElementById("docs").innerHTML=lesDocs;
} 
</script>
Il ne reste plus qu'à mapper l'image pour lancer cette fonction avec des arguments adaptés aux onglets, à modifier quelque peu la liste pour disposer des liens sur les titres, à traiter la question des accents éventuels, à passer à d'autres distinctions plus passionnantes que les initiales... etc. etc.
Messages postés
32
Date d'inscription
mardi 16 octobre 2007
Statut
Membre
Dernière intervention
14 octobre 2010

Merci,
Pourrais tu me détailler un peu plus sur le développement CSS avec les onglets ?
Comment lié le lien de chaque onglet avec ton code JavaScript ?

Je ne comprend pas "mapper l'image" ?

Désolé je débute encore ...
Messages postés
276
Date d'inscription
mercredi 22 septembre 2010
Statut
Membre
Dernière intervention
8 janvier 2014
3
Taper mapper image dans Google ! Est-ce possible ?
Messages postés
32
Date d'inscription
mardi 16 octobre 2007
Statut
Membre
Dernière intervention
14 octobre 2010

Ok ;)
Je vois ce que c'est

Pourrais tu me détailler le développement CSS si tu as le temps ? ou du moins le type d'argument que je dois adapter pour les onglets ?

Merci encore pour ta patience
Messages postés
32
Date d'inscription
mardi 16 octobre 2007
Statut
Membre
Dernière intervention
14 octobre 2010

Merci beaucoup, C'est exactement ce que je cherché :)