A savoir

Télécharger Mozilla Firefox

L'utilisation de Firefox comme navigateur est chaudement recommandée
Un plus est l'installation de l'extension web developer

 
Un blog secondaire pour réunir diverses astuces et aides.

Vous êtes invités à vous exprimer sur les didacticiels dans les commentaires, que ce soit pour demander un surplus d'informations, pour préciser un point un peu vague ou juste pour donner votre avis.

Merci d'éviter de me contacter via le formulaire de contact en bas de ce blog, je ne lis presque jamais les mails reçus à cette adresse là. Il est préférable d'utiliser les commentaires ou le lien email colonne de gauche.


Actuellement, série d'articles détaillant les différentes classes des CSS V2



Les articles de la catégorie mon blog est tout cassé sont là pour expliquer comment réparer son blog en cas d'insertion de jacascript là où il ne fallait pas. Pour ceux qui ne comprennent pas l'article T'as cassé ton blog ? de Francisek.

La catégorie trucs et astuces en confiance rassemble quelques tutoriels.
Les multiples façons de mettre de la musique sur son blog sont en partie recensées dans la catégorie lecteurs de musique pour OB.
Et enfin, la rubrique Logiciels à avoir vous conseille quelques logiciels (libres bien sûr) bien pratiques.
liste de communautés utiles

communauté : Apprivoiser la version 2
Dans cet article, la liste des classes intervenant au niveau du module présentation en V2, pour ceux qui veulent en modifier le style.


Voir ici pour savoir comment mettre un avatar de blog et préciser les tags.
Les éléments à afficher dans le module présentation se sélectionnent dans configurer >mise en page >module présentation (à faire dans l'onglet accueil et article en mode avancé )


Classes des éléments du module Présentation

.presentation .box-titre h2 Présentation {}
/*Le titre du module présentation*/
.presentation .box-content ul li strong label  {}
/*Blog, Catégorie, Description, Créé le, ce qui est en rouge dans mon exemple*/

.presentation .box-content ul li {}
/*le titre du blog, le contenu de la description, la date de création, ce qui est en bleu dans mon exemple. Attention, si la classe précédente n'est pas utilisée, les éléments Blog, Catégorie, Description et créé le prendront le style défini dans cette classe-ci */

.presentation .box-content ul li a {}
/* les liens du module, ce qui est en marron dans mon exemple*/

.presentation .box-content ul li a  img  {}
/* l'image avatar du blog */


Important


Les classes suivantes concernent les CSS version 2 d'over-blog. Et donc les blogs en V2 avec un modèle de design V2 et un CSS V2.

  
publié dans : CSS détaillé
ajouter un commentaire commentaires (7)   

communauté : Gadgetothèque
Voir aussi comment réaliser une image cliquable avec The Gimp .
Voici une explication sur la façon de faire du mapping avec la suite bureautique libre OpenOffice.org

Ouvrir un nouveau document Open Offixe writer, insérer dedans l'image sur laquelle vous voulez définir des zones cliquables. Faire un clic droit dessus, sélectionner Image Map
Dans la fenêtre qui s'ouvre, choisr la sélection rectangulaire, elliptique, polygonal ou à la main, sélectionner la première zone à rendre cliquable sur l'image et compléter les champs. Le champ Texte est le contenu de la balise alt, le champ cadre permet de choisir la fenêtre de destination du lien. Dans le champ adresse, on peut mettre l'adresse d'un site web, d'un blog, d'un fichier ou d'une image (hébergés sur internet)



Définir autant de zones cliquables que voulu puis fermer la fenêtre en cliquant sur oui, appliquer les modifications


Enregistrer le document au format HTML puis l'ouvrir avec un navigateur pour vérifier son bon fonctionnement. Pas besoin de cliquer sur les zones définies, un simple survol à la souris affiche l'adresse du lien dans la barre d'état du navigateur (ici Konqueror )



L'image qui sert de support doit être hébergée sur internet puis il faut dans le code HTML de l'image cliquable le chemin relatif vers l'image sur votre ordinateur par celle, absolue, de la même image hébergée sur internet. Pour cela, ouvrir le document html avec un éditeur de texte ( du type Note-Pad sous windows, textEdit sous Mac OS X, Gedit ou Kate sous Linux ). Repérer à la fin du code HTML le <img src="*****" et remplacer **** par l'url de l'image. Enregistrer.


Il ne reste plus qu'à copier le code compris entre les balises <body> et </body> et à le copier en mode source dans un article ou un module texte libre.



Ce code, comme celui obtenu avec The Gimp, fonctionne pour tous les niveaux de blogs.


Important


En cas d'insertion de plusieurs maps sur une même page, il faut donner à chacune un nom différent à ces niveaux:
<MAP NAME="nom_Map"> au début du code et  <USEMAP="#Nom_Map"  à la fin


Pour aller plus loin :

Pour ouvrir les liens dans un popup, il suffit de remplacer dans le code
href="URL" target="destination" ALT="texte">
par un code du type
href="url" onclick=
  "window.open(this.href,'','resizable=yes,scrollbars=yes,width=800,height=600,status'); return false" ALT="texte">
(ou exemple ici pour une fenêtre popup 800px*600px avec barres de défilement, redimensionnable.


Voici un exemple d'image cliquable réalisée avec OOo writer : (6 des gouttes ouvrent dans un popup des catégories d'un autre de mes blogs )

Autre Eléments naturels Paysages Du Minéral Du Végétal De l'animal
 
publié dans : trucs et astuces pour son blog
ajouter un commentaire commentaires (4)   

des trucs

Accueil

Il y a 1 curieux sur ce blog

Me contacter




Les flux RSS

Remarque


Les captures d'écran sur ce blog sont réalisées sous Firefox2/Ubuntu, le rendu peut différer avec un autre système d'exploitation et un autre navigateur.


Un peu de musique?

Va chercher

Créer un blog sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus