Impressum

Rollovers : Un menu en 2 lignes et 5 colonnes créé avec 10 Images rollover (balises HTML)

lundi 28 novembre 2011
par  François Daniel Giezendanner
popularité : 1%

 Code HTML du Tableau en 2lignes 5 colonnes

La mise en page utilise le codes HTML suivant :

<center>
<table style="text-align: left;" border="1" bordercolor="#bbbbbb"
cellpadding="0" cellspacing="0">
 <tbody>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
 </tbody>
</table>
</center>

 Menu réalisé



Partant de ce menu (Cf son code ci-dessous) vous pouvez aisément simplifier et ou généraliser pour créer avec vos propres images un menu rollover en une ou deux lignes de 2 à 5 colonnes, et plus si besoin. Les images doivent toutes avoir la même définition (largeur L et hauteur H en pixels), mais vous pouvez la définir selon vos besoin aussi grande ou petite que souhaitée.

Les images utilisées sont :

Images utilisées
img_1_1_down.jpg
img_1_1_up.jpg
img_1_2_down.jpg
img_1_2_up.jpg
img_1_3_down.jpg
img_1_3_up.jpg
img_1_4_down.jpg
img_1_4_up.jpg
img_1_5_down.jpg
img_1_5_up.jpg
img_2_1_down.jpg
img_2_1_up.jpg
img_2_2_down.jpg
img_2_2_up.jpg
img_2_3_down.jpg
img_2_3_up.jpg
img_2_4_down.jpg
img_2_4_up.jpg
img_2_5_down.jpg
img_2_5_up.jpg

L’appel aux images est fait par l’instruction du type :

Appel aux images
Format des images utilisées Instruction utilisée
jpg 'IMG/jpg/img_Ligne_Colonne_down.jpg'
'IMG/jpg/img_Ligne_Colonne_up.jpg'
gif 'IMG/gif/img_Ligne_Colonne_down.gif'
'IMG/gif/img_Ligne_Colonne_up.gif'
png 'IMG/png/img_Ligne_Colonne_down.png'
'IMG/png/img_Ligne_Colonne_up.png'
avec Ligne =1,2 et Colonne = 1, 2, 3, 4, 5

 Code source utilisé

<center>
<table style="text-align: left;" border="1" bordercolor="#bbbbbb"
cellpadding="0" cellspacing="0">
 <tbody>
   <tr>
     <td><a href="spip.php?rubrique289" TITLE="Cours SPIP"  onmouseover="bouton_1_1.src = 'IMG/jpg/img_1_1_down.jpg';"
onmouseout="bouton_1_1.src = 'IMG/jpg/img_1_1_up.jpg';">
<img src="IMG/jpg/img_1_1_up.jpg" border=0 width="100" height="100" name=bouton_1_1></a></td>
     <td><a href="spip.php?rubrique104" TITLE="Ergonomie" onmouseover="bouton_1_2.src = 'IMG/jpg/img_1_2_down.jpg';"
onmouseout="bouton_1_2.src = 'IMG/jpg/img_1_2_up.jpg';">
<img src="IMG/jpg/img_1_2_up.jpg" border=0 width="100" height="100" name=bouton_1_2></a></td>
     <td><a href="spip.php?rubrique12" TITLE="Tutoriaux SPIP" onmouseover="bouton_1_3.src = 'IMG/jpg/img_1_3_down.jpg';"
onmouseout="bouton_1_3.src = 'IMG/jpg/img_1_3_up.jpg';">
<img src="IMG/jpg/img_1_3_up.jpg" border=0 width="100" height="100" name=bouton_1_3></a></td>
    <td><a href="spip.php?article1306" TITLE="Illustration de squelettes" onmouseover="bouton_1_4.src = 'IMG/jpg/img_1_4_down.jpg';"
onmouseout="bouton_1_4.src = 'IMG/jpg/img_1_4_up.jpg';">
<img src="IMG/jpg/img_1_4_up.jpg" border=0 width="100" height="100" name=bouton_1_4></a></td>
    <td><a href="spip.php?art28" TITLE="Ouvrir un SPIP au DIP" onmouseover="bouton_1_5.src = 'IMG/jpg/img_1_5_down.jpg';"
onmouseout="bouton_1_5.src = 'IMG/jpg/img_1_5_up.jpg';">
<img src="IMG/jpg/img_1_5_up.jpg" border=0 width="100" height="100" name=bouton_1_5></a></td>
   </tr>
   <tr>
     <td><a href="spip.php?rub301" TITLE="Installer son SPIP privé"  onmouseover="bouton_2_1.src = 'IMG/jpg/img_2_1_down.jpg';"
onmouseout="bouton_2_1.src = 'IMG/jpg/img_2_1_up.jpg';">
<img src="IMG/jpg/img_2_1_up.jpg" border=0 width="100" height="100" name=bouton_2_1></a></td>
     <td><a href="spip.php?art699" TITLE="SPIP : Survol des caractéristiques" onmouseover="bouton_2_2.src = 'IMG/jpg/img_2_2_down.jpg';"
onmouseout="bouton_2_2.src = 'IMG/jpg/img_2_2_up.jpg';">
<img src="IMG/jpg/img_2_2_up.jpg" border=0 width="100" height="100" name=bouton_2_2></a></td>
     <td><a href="spip.php?art1269" TITLE="PPNP-NS : Plus Petit Nombre de Plugins - Nécessaires et Suffisants" onmouseover="bouton_2_3.src = 'IMG/jpg/img_2_3_down.jpg';"
onmouseout="bouton_2_3.src = 'IMG/jpg/img_2_3_up.jpg';">
<img src="IMG/jpg/img_2_3_up.jpg" border=0 width="100" height="100" name=bouton_2_3></a></td>
    <td><a href="spip.php?art861" TITLE="Utiliser SPIP comme un Framework" onmouseover="bouton_2_4.src = 'IMG/jpg/img_2_4_down.jpg';"
onmouseout="bouton_2_4.src = 'IMG/jpg/img_2_4_up.jpg';">
<img src="IMG/jpg/img_2_4_up.jpg" border=0 width="100" height="100" name=bouton_2_4></a></td>
    <td><a href="spip.php?art597" TITLE="Gérer des formules mathématiques en LaTEX dans SPIP" onmouseover="bouton_2_5.src = 'IMG/jpg/img_2_5_down.jpg';"
onmouseout="bouton_2_5.src = 'IMG/jpg/img_2_5_up.jpg';">
<img src="IMG/jpg/img_2_5_up.jpg" border=0 width="100" height="100" name=bouton_2_5></a></td>
   </tr>
 </tbody>
</table>
</center>

 Voir aussi


Publications

Derniers articles publiés

Agenda

<<

2017

 

<<

Décembre

 

Aujourd'hui

LuMaMeJeVeSaDi
27282930123
45678910
11121314151617
18192021222324
25262728293031
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


39 sites référencés dans ce secteur

Brèves

Plugin Publication Ouverte

vendredi 19 septembre 2008

Le plugin « Publication Ouverte » a pour but de fournir une interface de publication d’article publique et anonyme permettant à n’importe quel visiteur d’un site spip de publier un article sans aucune authentification. Cette méthode de gestion/création de contenu est appelé « Publication ouverte » (ou open-publishing en anglais). La publication ouverte est principalement pratiqué par le réseau indymédia, ainsi que de nombreux autres sites d’informations alternatives.

Plugin Bouquinerie

vendredi 19 septembre 2008

Le plugin Bouquinerie permet de mettre en place rapidement et simplement un site proposant :

  • la présentation du commerce de type bouquinerie, ou librairie
  • la présentation de son catalogue de livre.

L’espace privée permet la gestions de multiples catalogues (recherches, doublons, modification des enregistrements), l’importation de catalogues en provenance de sites tiers, et l’exportation des catalogues au format xml.

KAYE, un cahier de texte électronique pour l’école primaire

vendredi 19 septembre 2008

Descriptif du plugin

Sur l’espace public

  • Le visiteur peut sélectionner le cahier de texte de la classe de son choix (Si le plugin accès resteint est installé sur le site, après authentification, ne s’affichent que les cahiers de texte sur lesquels le visiteur a les droits de lecture)
  • Le visiteur peut ordonner les résultats du tableau par discipline, par date, par consigne...

Dans l’espace privé

  • Les élèves (rédacteurs) peuvent écrire les devoirs Les enseignants (administrateurs) gèrent le cahier de texte
  • Lors de la création d’un classe, on choisit obligatoirement un enseignant référent (administrateur).
  • Si le plugin accès restreint est installé on peut choisir une zone.

Dans l’espace public : pour administrateurs connectés

  • Si le plugin crayon est activé, les administrateurs peuvent modifier les devoirs sans repasser par l’espace privé

Source

Pédagogie efficace appliquée à l’apprentissage de la construction d’un site Spip de A à Z

vendredi 6 octobre 2006

l’Institut national de la jeunesse et de l’éducation populaire applique une pédagogie adaptée pour l’enseignement et l’apprentissage de la construction d’un site SPIP de A à Z.

En effet, en informatique comme en bien d’autres domaines, les cours ne sont pas suffisants. Il importe de les accompagner d’une activité collaborative théorique et pratique à distance d’une durée suffisante. En ce sens, il propose pour la modique somme de 150 euros : 5 jours de présentiel (12, 13, 14 et 15 septembre 2006, 15 décembre 2006), 3 mois d’accompagnement à distance, et une pédagogie à la fois centrée sur le projet de chaque stagiaire et sur le travail collaboratif.

Objectifs :

  • Construction de son propre site SPIP par chaque stagiaire.
  • Acquisition des notions de base concernant les standards W3C et le référencement Web. Contenu du stage :
  • Approfondissements du langage html et des feuilles de style.
  • Les squelettes et boucles SPIP.
  • Construire un squelette en respectant les standards 3WC (construire un squelette sans tableau, etc.).
  • Installation de la newsletter Spip-lettres.
  • Création de rubriques en accès privé (extranet).
  • Outils de syndication avec d’autres sites (Spip2spip, rss).

Pour plus d’information :

Bilan

Nul doute que cette formation sera une réussite. Nous somme intéressés de visionner les sites construits par chaque stagiaire. La liste en sera probablement publiée.