Developpement Web CSS-Javascript

Résolu
jeanMOULIN54 Messages postés 32 Date d'inscription mardi 16 octobre 2007 Statut Membre Dernière intervention 14 octobre 2010 - 13 oct. 2010 à 09:44
jeanMOULIN54 Messages postés 32 Date d'inscription mardi 16 octobre 2007 Statut Membre Dernière intervention 14 octobre 2010 - 14 oct. 2010 à 09:04
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

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

;O)
3
jeanMOULIN54 Messages postés 32 Date d'inscription mardi 16 octobre 2007 Statut Membre Dernière intervention 14 octobre 2010
13 oct. 2010 à 09:47
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
0
007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 4
13 oct. 2010 à 12:23
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.
0
jeanMOULIN54 Messages postés 32 Date d'inscription mardi 16 octobre 2007 Statut Membre Dernière intervention 14 octobre 2010
13 oct. 2010 à 14:29
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 ...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 4
13 oct. 2010 à 14:54
Taper mapper image dans Google ! Est-ce possible ?
0
jeanMOULIN54 Messages postés 32 Date d'inscription mardi 16 octobre 2007 Statut Membre Dernière intervention 14 octobre 2010
13 oct. 2010 à 15:11
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
0
jeanMOULIN54 Messages postés 32 Date d'inscription mardi 16 octobre 2007 Statut Membre Dernière intervention 14 octobre 2010
14 oct. 2010 à 09:04
Merci beaucoup, C'est exactement ce que je cherché :)
0
Rejoignez-nous