1 Le Menu de la gargote au ***. 2 Un menu très simple de très bon rapport qualité prix div#links {position: absolute;} div#links a {display: block;} div#links.

Slides:

Advertisements

Présentations similaires

HTML la base Structure de la page Code HTML: les tags de base.

Advertisements

Les pronoms compléments

Table des matières En famille Part 1 Ma famille Subject pronouns

Why? Extended language Sentence level work Cultural Find out new language Stimulus for creativity Reinforce everything children do in English Fun for.

Primary French PowerPoints What’s Your Name?.

STEP 1 Bring an object you really like or which is important to you and hide it in your bag.

Quand, lorsque, aussitôt que, dès que, et après que

To use this resource, make sure you view the slideshow, not just open the file. You can learn a slide off by heart, then test yourself on the next slide.

Le Futur OBJECTIVES Saying what you are going to do

Questions II How do you Form Questions in French??

Les Adjectifs Possessifs

A Le verbe être et les pronoms sujets p. 84 Être (to be) is the most frequently used verb in French. Note the forms of être in the chart below. être to.

Les verbes en -er. chanter – to singtelephoner – to call danser – to dancetravailler – to work diner – to have dinnervoyager –to travel ecouter – to listen.

Smoking a regular verb cigar: the –er version The keys to putting together what you want to say!

Cliquez et modifiez le titre Cliquez pour modifier les styles du texte du masque Deuxième niveau Troisième niveau Quatrième niveau Cinquième niveau 23/01/2014©

1 Le Menu de la gargote au ***. 2 Un menu très simple de très bon rapport qualité prix div#links {position: absolute;} div#links a {display: block;} div#links.

1 Modèles. 2 Sauvegarder le code en cliquant sur editer html 4 zones avec scroll

Minimisation Techniques 1 Assimilation Algorithms: Minimisation Techniques Yannick Trémolet ECMWF Data Assimilation Training Course March 2006.

Reading an analog clock

Français I Leçon 2B Une semaine au lycée Au Debut #7 (for the dates of November 5 and 6) Please Translate the Following: 1. I love the math course. (Adorer.

WALT: how to use the time when talking about your timetable WILF: to identify the correct time in French when reading & listening (level 3) DAYS OF THE.

The interrogative structure indicates that the speaker is searching for information In other words, we use the interrogative to ask questions.

Le Passé Composé et LImparfait Comparaison. Limparfait You already know the imparfait is used to: Say what was happening (not what happened) Say how things.

Les pluriels Sometimes you cant just take one!. Les articles… There are « DEUX » articles that can show that something is plural. Les = the Les ciseaux,

Les matières WALT: Talk about school subjects in French Give our opinion about subjects and say why.

Français 3 Chapitre 1 Grammaire 1. To conjugate –er, -ir and –re verbs in the present tense (to say that something is happening or happens), drop the.

regarder écouter dormir jouer sortir finir

L’Heure Telling Time.

Quest-ce que tu fais à lécole? Buts: Using regular verbs to say what we do at school.

Assessment and the new secondary curriculum S. Barfoot.

Starter Fill in the gaps with the right words from the bottom:

1 of of 40 UPDATE UPDATE ON TV ANTENNAS SINCE LAST BOARD MEETING SINCE LAST BOARD MEETING HELD ON FEBRUARY 25, 2010, YOUR BOARD HAS MADE MORE PROGRESS.

Pour mieux écrire. Do not use on-line translators (except as a dictionary for a single word) Be very careful using a dictionary (be sure youre finding.

Mardi 20 Novembre 2012 Recap I can

Talking about the things you do

TortoiseSVN N°. Subversion : pour quoi faire ? Avoir un espace de stockage commun – Tous les étudiants du SIGLIS ont un espace svn commun Partager vos.

En Avant Communication en direct C HAPITRE 1 : Pour commencer.

Faculté I&C, Claude Petitpierre Cascaded style sheets CSS.

140 ans Dune entreprise familiale à… Une famille dentreprises.

IAFACTORY | conseil en architecture de linformation | | |

GRAMMAIRE Révision des verbes réflexives Les verbes et grammaire Fill in the phrases with the missing words: 1.Bonjour, comment vous sentez-_______?

Les choses que j aime Learning Objective: To know how to use j aime to talk about things I like to do.

Les Tâches Ménagères Learning Objectives:

WALT: how to talk about your timetable

Quelle est ta matière préférée?

Déjeuner du matin Jacques Prévert

Un chat deux chats deux chiens Un chien deux chevaux Un cheval

Il est vs. cest. How would you translate these sentences? Cest Pierre. Il est gentil. Cest un ami. Cest un ami français. It is Pierre. He is nice. Its.

QU’EST-CE QUE TU FAIS?.

To be able to say what I think about different jobs for level 3.

Donnez l’heure “Time”… it’s a ticking!.

OHT 44 Starter 5, page 79 House vocabulary eée e a o auii e eueau aaàae esc. aaeeais a ae aoue acae eaae aa eeeu eai.

Saying what you have been doing

Français II H – Leçon 1B Structures

1. Je mentends très bien avec _________. 2. Je me chamaille souvent avec ________. 3. Je me fâche avec _________. 4. Je me dit tout avec __________. 5.

J’aime ma culture francophone, j’aime notre façon d’être, notre joie de vivre, nos traditions, nos manies. Je veux que mes enfants vivent ça et qu’ils.

Différencier: NOMBRE PREMIER vs. NOMBRE COMPOSÉ

Quelle heure est-il? What time is it ?.

Whenever you want to move along in this presentation, press the space bar. You can « go back » by pressing the « page-up key ». Clear ? Then start !

Pour commencer … Read the statements below and put them into three columns depending on whether they are written in the past, present or future tense.

WE’RE ALMOST DONE – CONGRATULATIONS! LE PRONOM « Y »

ANSWERS. What is Verb Conjugation? For one thing, conjugating a verb is simply putting a verb in an orderly arrangement. We will use a chart. To create.

Slide 1 of 39 Waterside Village Fête ses 20 ans.

Template joomla Leblanc 2011.

To practice: Quantities Un, une, des, de Du, de la, de l’, de Le, la, l’, les.

F RIENDS AND FRIENDSHIP Project by: POPA BIANCA IONELA.

Quelle est la date aujourd’hui?

Transcription de la présentation:

1 Le Menu de la gargote au ***

2 Un menu très simple de très bon rapport qualité prix div#links {position: absolute;} div#links a {display: block;} div#links a:hover {;} Home Links … plus d'info :

3 les balises

4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" " Pure CSS Popups  Home The main page of the site-- a jumping-off point, as it were-- and not actually a picture of our house Links A collection of things which interest me, and might interest you Away Who knows? Could be anywhere; you clicks the link and you takes your chances! Eric He's been called "an internationally recognized expert," but then he's also been called a "techno-fascist" Kat She cooks fabulous meals, she throws great parties, she helps women deliver their babies-- what can't she do? Other Inevitably, there's stuff that doesn't fit in with other stuff, so we stuffed it all into this page of random stuff Pure CSS Popups If you've already seen the complexspiral demo, then this page layout probably seems a bit familiar. However, this time we aren't playing around with background images, or indeed images of any kind. Instead we're creating static-text popups purely through the power of CSS. The title of the page is intentional: there is no Javascript used in this document. For that matter, there aren't any images either. And once again, there are no proprietary extensions being employed here. It's all validated HTML and CSS, period, end of story. Hands-on: What to Do Any browser that does a good job of supporting positioning will get some of the stuff I did here correct, so continuing onward is probably worth it. The basic drill is this: mouse over the links on the left side of the page. Watch the space below the links. Make sure to mouse over all the links, back and forth, up and down... Again I say it: no Javascript was used in the making of this page. What the...? You lie! I do not. Here's how it's done. In every case, the "caption" text is a span element inside the actual hyperlinks. Here's one example from the source of this document: <a href=" collection of things which interest me, and might interest you</span></a> To prevent the text from showing up when the page loads, I have the following style: div#links a span {display: none;} So they're gone, removed entirely from the document flow. Bringing them back, then, is a simple matter of switching the display to block and positioning the element whenever the associated link is hovered over with the mouse pointer. Thus we get the first two lines of this rule: div#links a:hover span {display: block; position: absolute; top: 200px; left: 0; width: 125px; padding: 5px; margin: 10px; z-index: 100; color: #AAA; background: black; font: 10px Verdana, sans-serif; text-align: center;} The last three lines relate to how the element will be styled when it appears, but the first two cause it to be made visible ( display: block; ) and position it appropriately. Want to have even more fun? How about icons that appear on rollover ? A Minor Side Note Notice how the hyperlinks appear to overlay the main-content border, and how that overlap really lights up when you're hovering over a link but still has a gray stripe down the middle of the overlap. That's done with nothing more complicated than a border on the hyperlinks themselves, the color and style of which change during the hover: div#links a:hover {color: #411; background: #AAA; border-right: 5px double white;} This effect works because I set up everything so the borders on the hyperlinks actually overlaps the border of the main content area. Because I'm positioning these elements using pixel measures, I can get things to line up appropriately and then style them however I like. it's a bit of a trick, of course-- by sticking to shades of gray, it's easier for me to create translucency effects. Someone with a sufficiently keen color sense could probably come up with better stuff than I did. (Like not putting light text on a dark background, for starters.) Jump to css/edge home pure CSS popup images

5 Le top des gargotes : mais un gros avantage

6

7 Les Frames : le menu Mercure … Pluton Mercure … Pluton

8 La page Vénus

9 Menu simple

10 le style ul { list-style-type: none; font: 14px Verdana, Arial, sans-serif;} li { margin-bottom: 5px;}.menu a { margin: 0 2px; width: 100px; height: 20px; display: block; text-align: center; border: 1px solid gray; text-decoration: none; color: #000; background: #fff;}.menu a:hover { background: #ccc;}.menu a:active { background: gray;}

11 Remarque.menu a:hover { background: #ccc;} C'est la couleur de fond du lien qui change. Nous verrons que la couleur de l'élément liste peut changer et non celle du lien. Retenez bien cette nuance. Elle permettra de changer une partie de la page au survol d'une autre partie.

12 code ul { list-style-type: none; font: 14px Verdana, Arial, sans-serif;} li { margin-bottom: 5px;}.menu a { margin: 0 2px; width: 100px; height: 20px; display: block; text-align: center; border: 1px solid gray; text-decoration: none; color: #000; background: #fff;}.menu a:hover { background: #ccc;}.menu a:active { background: blue;} Accueil Jeux Photos Contact

13 Menu horizontal

14 Code ul#menu li { float: left ; text-align: center ; } ul#menu li a { width: 130px ; line-height: 25px ; font-size: 1.2em ; font-weight: bold ; letter-spacing: 2px ; color: indianred ; display: block ; text-decoration: none ; border-right: 5px solid #dea ; }

15

16 Création d'un design étape par étape - Etape n°4 : Le titre et le menu <meta http-equiv="Content-Type" content="text/html; charset=iso "> body { margin: 10px 0 ; padding: 0 ; text-align: center ; font: 0.8em "Trebuchet MS", helvetica, sans-serif ; background: indianred ; } div#conteneur { width: 770px ; margin: 0 auto ; text-align: left ; border: 2px solid #ab4 ; background: #fff ; } h1#header { height: 250px ; margin: 0 ; background: url(sable.jpg) no-repeat left top ; } h1#header a { width: 40px ; height: 70px ; display: block ; background: url(Iceberg.gif) no-repeat ; position: relative ; left: 350px ; top: 15px ; } h1#header a span { display: none ; } ul#menu { height: 24px ; margin: 0 ; padding: 0 ; //background: url(sablerouge.jpg) repeat-x 0 -5px ; list-style-type: none ; } ul#menu li { float: left ; text-align: center ; } ul#menu li a { width: 130px ; line-height: 25px ; font-size: 1.2em ; font-weight: bold ; letter-spacing: 2px ; color: indianred ; display: block ; text-decoration: none ; border-right: 5px solid #dea ; } ul#menu li a:hover { color: #dea; background: url(sablenoir.jpg) repeat-x 0 0px ; } div#contenu { padding: 0 25px 0 100px ; background: url() no-repeat 15px 15px ; } div#contenu h2 { padding-left: 25px ; line-height: 25px ; font-size: 1.4em ; background: url(little_apple.gif) no-repeat left bottom ; color: indianred ; border-bottom: 1px solid #9b2 ; } div#contenu h3 { margin-left: 15px ; padding-left: 5px ; border-bottom: 1px solid #9b2 ; border-left: 3px solid #9b2 ; color: #9b2 ; } div#contenu p { text-align: justify ; text-indent: 2em ; line-height: 1.7em ; } div#contenu a { color: #8a0 ; } div#contenu a:hover { color: #9b2 ; } p#footer { margin: 0 ; padding-right: 10px ; line-height: 30px ; text-align: right ; color: #8a0 ; } pre { overflow: auto ; background: #dea ; border: 2px solid #9b2 ; padding: 5px 0 0 5px ; font-size: 1.2em ; } * html pre { width: 636px ; } pre span { color: #560 ; } pre span.comment { color: #b30000 ; } Mongolie Islande Dune Les sables de Mongolie Le sable consiste en de petites particules de roche. Une particule individuelle est appelée grain de sable. En géologie, les particules entre 0,063 et 2 mm sont classées comme Retour Les sables du monde

17 Les onglets Cours TD TP Examens

18 les onglets

19 le CSS #tabnav { height: 20px; margin: 0; padding-left: 10px; background: url(css-tabs.gif) repeat-x bottom; } #tabnav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #tabnav a:link, #tabnav a:visited { float: left; background: #f3f3f3; line-height: 14px; padding: 2px 10px 2px 10px; margin-right: 4px; border: 1px solid #ccc; text-decoration: none; color: #666; } #tabnav a:link.active, #tabnav a:visited.active { border-bottom: 1px solid #fff; background: #fff; color: #000; } #tabnav a:hover { background: #fff; }

20 autre solution denis coucou moi

21 CSS #nav { display: block; float: left; clear: both; padding: 0; margin-left: 25px; margin-bottom: 0; list-style: none; font-family : "Lucida Grande", "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size: 13px; } #nav a { display: block; float: left; padding: 13px 28px 5px 20px; background: no-repeat right bottom url("onglet-d.gif"); text-decoration: none; color: #a7b9cc; } #nav li { display: block; float: left; list-style: none; background: no-repeat left bottom url("onglet-g.gif"); padding: px; }

22 Les onglets Il faut bien comprendre que pour chaque feuille du site, il faudra modifier la feuille active.

23 Pur CSS Extrait du livre de Meyer chapitre 6

24 en CSS

25 Etape 1 Home Services Strategy Optimization Publications Articles Tutorials Events Contact erreur fréquente

26 div#nav { float: left; width: 7em; background: #FDD; }

27

28 Code complet <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Project 6 body {background: #EEE; color: #000;} h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;} div#nav {float: left; width: 7em; background: #FDD;} Le pont mirabeau Home Services Strategy Optimization Publications Articles Tutorials Events Contact Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure Passent les jours et passent les semaines Ni temps passait Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure "Le Pont Mirabeau" Apollinaire, Alcools (1912)

29 Mode blocs div#nav ul {margin: 0; padding: 0; width: 7em;} div#nav li {position: relative;} div#nav ul ul {position: relative; top: 0; left: 1em;} div#nav ul {margin: 0; padding: 0; width: 7em;} div#nav li {position: relative;} div#nav ul ul {position: relative; top: 0; left: 7em;}

30 En position absolute div#nav ul {margin: 0; padding: 0; width: 7em;} div#nav li {position: relative;} div#nav ul ul {position: absolute; top: 0; left: 7em;} On quitte le flux : on se calle sur le li, décalé de sa largeur.

31 vue Le chevauchement est normal

32 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Project 6 body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* WinIE behavior call */ h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;} div#nav {float: left; width: 7em; background: #FDD;} div#nav ul {margin: 0; padding: 0; width: 7em;} div#nav li {position: relative;} div#nav ul ul {position: absolute; top: 0; left: 7em;} Le pont mirabeau Home Services Strategy Optimization Publications Articles Tutorials Events Contact Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure Passent les jours et passent les semaines Ni temps passait Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure "Le Pont Mirabeau" Apollinaire, Alcools (1912)

33 Home Services Strategy Optimization Publications Articles Tutorials Events Contact

34 div#nav {float: left; width: 7em; margin: -1px px;} div#nav ul {margin: 0; padding: 0; width: 7em;} div#nav li {position: relative; list-style: none; margin: 0;} div#nav li:hover {background: #ccccff;} div#nav li.submenu {} div#nav li.submenu:hover {background-color: #cccccc;} div#nav li a {display: block; padding: 0.25em em 0.5em; text-decoration: none; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;} div#nav li.submenu:hover ul {display:block;}

35

36 Rendre invisible le tout <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Project 6 body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* WinIE behavior call */ h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;} div#nav {float: left; width: 7em; margin: -1px px;} div#nav ul {margin: 0; padding: 0; width: 7em;} div#nav li {position: relative; list-style: none; margin: 0;} div#nav li:hover {background: #ccccff;} div#nav li.submenu {} div#nav li.submenu:hover {background-color: #cccccc;} div#nav li a {display: block; padding: 0.25em em 0.5em; text-decoration: none; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; top: 0; left: 7em; display: none;} div#nav li.submenu:hover ul {display:block;} Le pont mirabeau Home Services Strategy Optimization Publications Articles Tutorials Events Contact Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure Passent les jours et passent les semaines Ni temps passait Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure "Le Pont Mirabeau" Apollinaire, Alcools (1912)

37 Tester sous Explorer ! div#nav li {position: relative; list-style: none; margin: 0; border-bottom: 1px solid #CCC; } permettra de corriger un décalage.

38 Menu avec texte d'info / (diff de la sol avec span)

39 div#nav li.submenu1:hover ul {display:block; top: 0;} div#nav li.submenu2:hover ul {display:block;top: -2em;} div#nav li.submenu3:hover ul {display:block; top: -4em;} div#nav li.submenu4:hover ul {display:block;top: -6em;} premier Sous le pont Mirabeau coule la Seine … deuxieme Les mains dans les mains restons …

40 code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Project 6 body {background: #EEE; color: #000; behavior: url(csshover.htc);} /* WinIE behavior call */ h1 {color: #AAA; border-bottom: 1px solid; margin-bottom: 0;} #main {color: #CCC; margin-left: 7em; padding: 1px 0 1px 5%; border-left: 1px solid;} div#nav {float: left; width: 7em; margin: -1px px;} div#nav ul {margin: 0; padding: 0; width: 7em;height: 1em; } div#nav li {position: relative; list-style: none; margin: 0;height: 2em;} div#nav li:hover {background: #ccccff;} div#nav li.submenu {} div#nav li.submenu:hover {background-color: #cccccc;} div#nav li a {display: block; padding: 0.25em em 0.5em; text-decoration: none; width: 6.5em;} div#nav>ul a {width: auto;} div#nav ul ul {position: absolute; left: 400px; display: none; width: 200px;} div#nav li.submenu1:hover ul {display:block; top: 0;} div#nav li.submenu2:hover ul {display:block;top: -2em;} div#nav li.submenu3:hover ul {display:block; top: -4em;} div#nav li.submenu4:hover ul {display:block;top: -6em;} Le pont mirabeau premier Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure deuxieme Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure troisieme L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure quatrieme Passent les jours et passent les semaines Ni temps passait Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Sous le pont Mirabeau coule la Seine Et nos amours Faut-il qu'il m'en souvienne La joie venait toujours après la peine Vienne la nuit sonne l'heure Les jours s'en vont je demeure Les mains dans les mains restons face à face Tandis que sous Le pont de nos bras passe Des éternels regards l'onde si lasse Vienne la nuit sonne l'heure Les jours s'en vont je demeure L'amour s'en va comme cette eau courante L'amour s'en va Comme la vie est lente Et comme l'Espérance est violente Vienne la nuit sonne l'heure Les jours s'en vont je demeure Passent les jours et passent les semaines Ni temps passait Ni les amours reviennent Sous le pont Mirabeau coule la Seine Vienne la nuit sonne l'heure Les jours s'en vont je demeure "Le Pont Mirabeau" Apollinaire, Alcools (1912)

41 En Javascript

42 La liste menu Menus Enseignement Tests Divers Recherche

43 Le code javascript <!-- window.onload=montre; function montre(id) { var d = document.getElementById(id); for (var i = 1; i<=10; i++) { if (document.getElementById('smenu'+i)){ document.getElementById('smenu'+i).style.display='none'; } if (d) { d.style.display='block'; } remarque importante : Si javascript est désactivé le menu sera visible.

44 Denis DUPONT  //cible var cible=""; //nb compris entre 0 et 9 pour choix des photos var nb= Math.round(10*Math.random()); // Espace entre 2 images var espace = 1; // Pas d'incrémentation (ne pas changer) var pas = 1; // Rafraîchir les images toutes les (millisecondes) var rafraichissement = 30; // Position de la barre position_x = 905; position_y = 5; // Taille de l'image au repos (carré) var largeur = 32; // Taille de l'image au survol (carré) var largeur_zoom = 180; var chrono; // Tableau des images image = new Array(); lien = new Array(); for(i = 0; i < 8; i++) { image[i] = nb + ".jpg"; lien[i] = nb + ".jpg"; nb=nb+10; } taille = new Array(); for(i = 0; i < image.length; i++) { taille[i] = largeur; } // Incrémente la taille l'image n°num function zoom(num) { if(document.getElementById('icone_' + num).width < taille[num]) { document.getElementById('icone_' + num).width = document.getElementById('icone_' + num).width + pas; document.getElementById('icone_' + num).height = document.getElementById('icone_' + num).height + pas; chrono1 = window.setTimeout("zoom("+ (num) + ")",rafraichissement); } if(document.getElementById('icone_' + num).width > taille[num]) { document.getElementById('icone_' + num).width = document.getElementById('icone_' + num).width - pas; document.getElementById('icone_' + num).height = document.getElementById('icone_' + num).height - pas; window.setTimeout("zoom("+ (num) + ")",rafraichissement); } } // Met à jour la taille de l'image n°num function tailleimage(num){ window.clearTimeout(chrono); for(i = 0; i < image.length; i++){ if(i == num-1){ taille[i] = Math.round((largeur_zoom-largeur) / 2) + largeur; } else { if(i == num+1){ taille[i] = Math.round((largeur_zoom-largeur) / 2) + largeur; } else{ if(i == num){ taille[i] = largeur_zoom; } else{ taille[i] = largeur; } } zoom(i); } chrono = window.setTimeout("tailleimage(-2);",1500); } /* SCRIPT JAVASCRIPT ESPACE JAVASCRIPT.COM merci à vous denis dupont pour modif random */ // Gère cette propriété ? if(document.getElementById){ // Création des calques document.write(" "); for(i = 0; i < image.length; i++){ document.write(" "); document.write(" ") document.write(" "); } document.write(" "); } Menus Enseignement Tests Divers Archi htm TD C RTS Recherche Laboratoire Equipe Sujet Divers tutorat forum Miage Alternance Initiale //--> page accueil

45 Autre code /* Author : bieler batiste Company : doSimple : send me a mail for more informations : - remove ( PASDEPOURRIEL ) Short javascript function to create and handle a CSS navigation menu Copyright (C) 2004 Bieler Batiste This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details. You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA USA */ // the timeout for the menu var timeout = 1000; // not very clean but simple // the function can be run in the HTML for faster display // window.onload=initMenu; // creat timeout variables for list item // it's for avoid some warning with IE for( var i = 0; i < 100; i++ ) { eval("var timeoutli" + i + " = false;"); } // this fonction apply the CSS style and the event function initMenu() { // a test to avoid some browser like IE4, Opera 6, and IE Mac if ( browser.isDOM1 && !( browser.isMac && browser.isIE ) && !( browser.isOpera && browser.versionMajor < 7 ) && !( browser.isIE && browser.versionMajor < 5 ) ) { // get some element var menu = document.getElementById('menuv'); // the root element var lis = menu.getElementsByTagName('li'); // all the li // change the class name of the menu, // it's usefull for compatibility with old browser menu.className='menu'; // i am searching for ul element in li element for ( var i=0; i<lis.length; i++ ) { // is there a ul element ? if ( lis.item(i).getElementsByTagName('ul').length > 0 ) { // improve IE key navigation if ( browser.isIE ) { addAnEvent(lis.item(i),'keyup',show); } // link events to list item addAnEvent(lis.item(i),'mouseover',show); addAnEvent(lis.item(i),'mouseout',timeoutHide); addAnEvent(lis.item(i),'blur',timeoutHide); addAnEvent(lis.item(i),'focus',show); // add an id to list item lis.item(i).setAttribute( 'id', "li"+i ); } function addAnEvent( target, eventName, functionName ) { // apply the method to IE if ( browser.isIE ) { //attachEvent dont work properly with this eval('target.on'+eventName+'=functionName'); } // apply the method to DOM compliant browsers else { target.addEventListener( eventName, functionName, true ); // true is important for Opera7 } // hide the first ul element of the current element function timeoutHide() { // start the timeout eval( "timeout" + this.id + " = window.setTimeout('hideUlUnder( \"" + this.id + "\" )', " + timeout + " );"); } // hide the ul elements under the element identified by id function hideUlUnder( id ) { document.getElementById(id).getElementsByTagName('ul')[0].style['visibility'] = 'hidden'; } // show the first ul element found under this element function show() { // show the sub menu this.getElementsByTagName('ul')[0].style['visibility'] = 'visible'; var currentNode=this; while(currentNode) { if( currentNode.nodeName=='LI') { currentNode.getElementsByTagName('a')[0].className = 'linkOver'; } currentNode=currentNode.parentNode; } // clear the timeout eval ( "clearTimeout( timeout"+ this.id +");" ); hideAllOthersUls( this ); } // hide all ul on the same level of this list item function hideAllOthersUls( currentLi ) { var lis = currentLi.parentNode; for ( var i=0; i<lis.childNodes.length; i++ ) { if ( lis.childNodes[i].nodeName=='LI' && lis.childNodes[i].id != currentLi.id ) { hideUlUnderLi( lis.childNodes[i] ); } // hide all the ul wich are in the li element function hideUlUnderLi( li ) { var as = li.getElementsByTagName('a'); for ( var i=0; i<as.length; i++ ) { as.item(i).className=""; } var uls = li.getElementsByTagName('ul'); for ( var i=0; i<uls.length; i++ ) { uls.item(i).style['visibility'] = 'hidden'; }

46 Menu avec PHP et Mysql !

47 Menu crée avec php Mysql

48 menu.php <? echo " beaujaulais "; $MySQL_host = "localhost"; $MySQL_user = "root"; $MySQL_passw = "123solei"; $db="victor.dupont"; echo " \n"; echo " Accueil \n"; $requete1 = "SELECT * FROM site_structure WHERE categorie_mere = '0' ORDER by nom"; $resmenu1=mysql_db_query($db,$requete1); while ($temp = mysql_fetch_row($resmenu1)) { $categorie=$temp[0]; echo " ".$temp[1]." \n"; echo " \n"; $requete2 = "SELECT * FROM site_structure WHERE categorie_mere = $categorie ORDER by nom"; $resmenu2=mysql_db_query($db,$requete2); while ($temp2 = mysql_fetch_row($resmenu2)) { echo " ".$temp2[1]." \n"; } echo " \n"; } echo " "; ?>

49 index.php <? echo " \n"; $MySQL_host = "localhost"; $MySQL_user = "root"; $MySQL_passw = "icimonpassword"; $db="victor.dupont"; echo " \n"; echo " Accueil \n"; $requete1 = "SELECT * FROM site_structure WHERE categorie_mere = '0' ORDER by nom"; $resmenu1=mysql_db_query($db,$requete1); while ($temp = mysql_fetch_row($resmenu1)) { $categorie=$temp[0]; echo " ".$temp[1]." \n"; echo " \n"; $requete2 = "SELECT * FROM site_structure WHERE categorie_mere = $categorie ORDER by nom"; $resmenu2=mysql_db_query($db,$requete2); while ($temp2 = mysql_fetch_row($resmenu2)) { echo " ".$temp2[1]." \n"; } echo " \n"; } ?>

50 sql # # Structure de la table `site_structure` # CREATE TABLE `site_structure` ( `ID` int(10) NOT NULL default '0', `nom` varchar(40) NOT NULL default '', `fichier` varchar(40) NOT NULL default '', `repertoire` varchar(40) NOT NULL default '', `categorie_mere` int(10) NOT NULL default '0', PRIMARY KEY (`ID`) ) TYPE=MyISAM; # # Contenu de la table `site_structure` # INSERT INTO `site_structure` VALUES (21, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (22, 'Conversions multibases', 'calculatrice.php', 'mathematique', 65); INSERT INTO `site_structure` VALUES (23, 'Nombres premiers', 'nbrepremiers.php', 'mathematique', 65); INSERT INTO `site_structure` VALUES (24, 'Erreurs VBA', 'erreursvba.php', 'office', 64); INSERT INTO `site_structure` VALUES (25, 'Excel fonctions AN/FR', 'excelfonctionsanfr.php', 'office', 64); INSERT INTO `site_structure` VALUES (26, 'Raccourcis Office', 'raccourcisoff.php', 'office', 64); INSERT INTO `site_structure` VALUES (27, 'Erreurs STOP', 'erreursstop.php', 'windows', 63); INSERT INTO `site_structure` VALUES (28, 'Erreurs Windows XP', 'erreurswinxp.php', 'windows', 63); INSERT INTO `site_structure` VALUES (29, 'RunDLL', 'raccourcissysteme.php', 'windows', 63); INSERT INTO `site_structure` VALUES (30, 'Raccourcis Windows', 'raccourciswin.php', 'windows', 63); INSERT INTO `site_structure` VALUES (31, 'VxD', 'vxd.php', 'windows', 63); INSERT INTO `site_structure` VALUES (43, 'Longueurs', 'longueurs.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (44, 'Volumes', 'volumes.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (45, 'Masses', 'masses.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (48, 'Pressions', 'pressions.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (50, 'Vitesses', 'vitesses.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (51, 'Codes des langues', 'codes_langues.php', 'internet', 60); INSERT INTO `site_structure` VALUES (53, 'Codes ANSI', 'codesansi.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (58, 'Surfaces', 'surfaces.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (62, 'Internet Webmasters', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (63, 'Windows', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (64, 'Office', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (65, 'Mathématiques', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (67, 'Conversions', '-', 'mère', 0); INSERT INTO `site_structure` VALUES (69, 'Codes des couleurs', 'codescouleurs.php', 'internetwebmasters', 61); INSERT INTO `site_structure` VALUES (74, 'Erreurs Windows XP SP2', 'erreurssp2.php', 'windows', 63); INSERT INTO `site_structure` VALUES (75, 'Services', 'services.php', 'windows', 63); INSERT INTO `site_structure` VALUES (79, 'XHTML', 'xhtml.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (80, 'Nombre d\'or', 'nombredor.php', 'mathematique', 65); INSERT INTO `site_structure` VALUES (83, 'Fichier.htaccess', 'htaccess.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (85, 'Processus Windows', 'processus.php', 'windows', 63); INSERT INTO `site_structure` VALUES (90, 'Monnaies', 'conversionsmon.php', 'conversions', 67); INSERT INTO `site_structure` VALUES (95, 'Excel formules', 'excel_formules.php', 'office', 64); INSERT INTO `site_structure` VALUES (97, 'Disques durs', 'disquesdurs.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (100, 'Pseudos', 'pseudogen.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (102, 'Claviers', 'claviers.php', 'informatique', 61); INSERT INTO `site_structure` VALUES (103, 'Robots', 'robots.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (104, 'Référencement', 'refmoteurs.php', 'internetwebmasters', 62); INSERT INTO `site_structure` VALUES (118, 'Blogs', 'blogs.php', 'internetwebmasters', 62);

51 Ajax le chargement dans la page de façon asynchrone facile le chargement des liens.