Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

header avec differents liens

jean-marie
le 4 novembre 2015
à 14:30 		Rappel du sujet :

Bonjour

Sur mon site d’origine (en ligne pour le public) oursel-maison.fr dans le header j’ai une image central, et dans les contours différentes image avec des liens, sur oursel-maison.fr/spip j’ai fait un copié de limage du header mais cela ne convient je voudrai reproduire ce que j’ai fait sur le 1er site cité, comment faire au mieux ?

J’en profites pour savoir si par la suite je pourrai mettre mon spip sans aucun problème à la raine en remplacement de celui existant ?
header avec differents liens

yo jean marie

j’ai vu et si les images des colonnes droite et gauche ne change pas , je partirais sur une image en dur coté bandeau et du coup je m’appuie sur
https://contrib.spip.net/Plugin-Image-Cliquable.

vi vi par la suite le transfert de /spip vers la racine se fera en douceur
header avec differents liens

Bonsoir Bachant

Merci pour ta réponse rapide.

J’ai regardé le lien que tu m’as mis ci dessus, mais c’est essentiellement pour des liens dans les articles comment faire pour le header ?
header avec differents liens

J’ai installer le plugins image_cliquable, mais je ne vois pas comment configurer ou l’utiliser pour le header, je n’ai aucun lien dans l’admin concernant image_cliquable
header avec differents liens

cela été l’idée ...

je pense qu’il te faut pas utilisé le plugin mais plutôt créer une image avec des liens cliquables

prendre cette image lien supprimé

la travailler pour rendre les zones cliquables

genre la je t’ai définie les vignette de gauche n’ayant pas les url j’ai mis

<HTML><BODY>
<IMG SRC='lien_image'  USEMAP='#themap'  STYLE='height:912px;' BORDER='0'>
<MAP NAME='themap'>
<AREA NAME='zone0' ID='zone0'         SHAPE='rect' COORDS='3,1,271,269' HREF="javascript:alert('zone 0');" TARGET='_self' >
<AREA NAME='zone1' ID='zone1'         SHAPE='rect' COORDS='16,281,248,536' HREF="javascript:alert('zone 1');" TARGET='_self' >
<AREA NAME='zone2' ID='zone2'         SHAPE='rect' COORDS='25,578,235,705' HREF="javascript:alert('zone 2');" TARGET='_self' >
<AREA NAME='zone3' ID='zone3'         SHAPE='rect' COORDS='14,746,246,896' HREF="javascript:alert('zone 3');" TARGET='_self' >
</MAP>
</BODY></HTML>

ya plu ka
header avec differents liens

Voici ce que j’ai fait :

<HTML><BODY>
<img src='lien_image'  usemap='#themap'  style='height:912px;' border='0'>
<map name='themap'>
  <area name='zone0' id='zone0'         shape='rect' coords='3,1,271,269' href="lien" target='_self' >
  <area name='zone1' id='zone1'         shape='rect' coords='16,281,248,536' href="lien;" target='_self' >
  <area name='zone2' id='zone2'         shape='rect' coords='26,578,236,705' href="lien;" target='_self' >
  <area name='zone3' id='zone3'         shape='rect' coords='14,741,246,891' href="lien" target='_self' >
  <area name='zone4' id='zone4'         shape='rect' coords='2478,116,2713,354' href="lien" target='_self' >
  <area name='zone5' id='zone5'         shape='rect' coords='2479,389,2712,624' href="lien" target='_self' >
  <area name='zone6' id='zone6'         shape='rect' coords='2478,662,2708,792' href="lien;" target='_self' >
</map>
</BODY></HTML>

J’ai sauvegarder dans un fichier nommé bandeau.html (logique non)
J’ai mis ce fichier dans /squelettes/bandeau/

est ce la bonne manière ?
header avec differents liens

zut mon code n’est pas passé mais l’image, comment faire pour vous le montrer correctement.
header avec differents liens

alors pour le code il faut l’encadrer entre les balise

< code> bla bla bla < /code> (sans l’espace après le chevron)

voili voila

est la bonne manière je ne sais , ça fonctionne ou ça fonctionne pas sur oursel-maison.fr ?

pour le nom tu fait ce qu’il te plait plait plait ........

sérieux
tu enregistre ton fichier créer sous le nom que tu souhaite
tu place ce fichier dans ton repertoire squelette

(n’oublie pas que ce n’est pas une image au sens strict du terme donc il va falloir mettre ton fichier (l’inclure) a la place de ton image (en faisant cela tu perdra la possibilité de changer de bandeau par la suite)

ceci étant dit , tu copie le fichier escal/inclusions/inc-bandeau que tu place dans squelettes/inclusions

c’est ce fichier la qu’on va modifier en rajoutant ceci a la première ligne
<INCLURE{fond=squelettes/bandeau}>

après il te faut dans les paramètre d’escal ne pas utiliser d’image

et je pense que ça devrais le faire si ton fichier est bon ce qui ne parais pas le cas
header avec differents liens

J’ai du cafouiller quelques part car j’ai ce message d’erreur.

1 Aucun squelette squelettes/bandeau n’est disponible... squelettes/inclusions/inc-bandeau.html / 1
header avec differents liens

ce n’est pas
<INCLURE{fond=squelettes/bandeau}>
qu’il faut écrire mais
<INCLURE{fond=inclusions/bandeau>
header avec differents liens

Ah ausi, il faut virer les balise html et body au début et à la fin de ton fichier
header avec differents liens

Bon ca avance mais là, il doit s’agir d’une question de taille l’image ? Enfin je pense !
header avec differents liens

J’ai reduit l’image mais les liens ne fonctionne pas !
header avec differents liens

J’ai 2 liens qui fonctionnent ceux du bas à droite et à gauche, là je ne comprends pas trop.
J’ai réduit mon image à 840x280 pixels.

et voici le code que j’ai mis :

<img src='lien_vers_l_image' width="840" height="280" border='0'  usemap='#themap' >
<map name='themap'>
  <area name='zone0' id='zone0'         shape='rect' coords='2,1,84,82' href="lien" target='_self' >
  <area name='zone1' id='zone1'         shape='rect' coords='4,85,78,167' href="lien" target='_self' >
  <area name='zone2' id='zone2'         shape='rect' coords='8,177,72,216' href="lien" target='_self' >
  <area name='zone3' id='zone3'         shape='rect' coords='4,229,77,273' href="lien" target='_self' >
  <area name='zone4' id='zone4'         shape='rect' coords='766,34,839,107' href="lien" target='_self' >
  <area name='zone5' id='zone5'         shape='rect' coords='766,119,837,190' href="lien" target='_self' >
  <area name='zone6' id='zone6'         shape='rect' coords='766,203,836,243' href="lien" target='_self' >
</map>
header avec differents liens

Bonjour,
Suite à diverses migrations transnationales, un tremblement de terre près de GAP, et la lecture des messages multipliés par 3 de ce forum, en profitant d’un réseau wifi performant, j’ajoute mon grain de sel à la réflexion concernant "ajouter des liens dans le bandeau de tête".

La multiplication des petits écrans mobiles impacte les consultations d’internet : sur mobiles (tablettes, smartphones, etc ...) celles-ci dépassent celles sur écran de PC fixes.

Pour s’adapter aux changements de comportements des mobinautes devenus, il y a besoin de simplifier l’affichage des infos pour les gros doigts, en raccourcissant le chemin pour accéder à une information.

  • Est-il bien utile et pratique, dans ce cas, de vouloir ajouter, en plus du menu, d’autres infos secondaires, dans le bandeau de tête ?
  • N’y a-t-il pas d’autres emplacements pour coller ces informations ?
  • Précédemment combien de lecteurs ont vraiment cliqué sur ces liens supplémentaires du bandeau de tête ?
  • Ces liens supplémentaires du bandeau de tête, sont-ils directement utiles pour valoriser, faciliter l’accès au site municipal et à tout son contenu ?

Je me pose aussi ces questions - réflexions partagées, quant à l’ergonomie pratique pour faciliter la lecture et l’acces aux infos,

Bien cordialement à vous
header avec differents liens

Essaye d’enlever les (’zone XX’) de ton code pour voir.

Ceci dit, je partage l’avis de Jaseur. Il me semble que ce serait plus esthétique et surtout plus responsive de ne mettre qu’une image simple de bandeau (la photo du village) et de mettre ces liens "partenaires" dans une noisette "accès direct" par exemple.
header avec differents liens

Ok pour vos remarque c’est que je n’ai pas du tout pensé au coté mobilité des sites maintenant.
Aussi je vais donc revoir ma copie.
N’empêche qu’avec ce post j’ai appris des choses sur les fonction map, merci à vous.
header avec differents liens

Pour JCV effectivement ca fonctionne en enlevant les "zone XX".
header avec differents liens

Comme on me dit que du fait des liens mis dans mon bandeau le header n’est pas responsive, peut-on me donner la manoeuvre pour remettre mon bandeau sans les icones cliquables.
Merci à vous
header avec differents liens

Vire ton fichier inc-bandeau personnalisé et va voir dans la config d’Escal -> Généralités -> Bandeau
header avec differents liens

bonjour

Voila c’est résolu.

Merci
header avec differents liens

Bonjour

Je voudrais diminuer la hauteur de mon header, est ce possible ?
header avec differents liens

Ben oui, en diminuant la hauteur de ton image de ton bandeau ... 😉
Réagir au sujet
Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre. Inutile de le poster à nouveau ;-)

Ajouter un document

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2025 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.14