Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Tutoriel : Image vers Ancre

Voir le sujet précédent Voir le sujet suivant Aller en bas

Tutoriel : Image vers Ancre

Message par Solie le Dim 29 Nov 2015 - 13:18

Bonjour,


Il peut être sympa de relier une image "Scroll Button" vers une ancre d'une même page, surtout si on utilise l'effet de défilement fluide "Smooth Scrolling" proposé dans l'aide Jimdo.

Actuellement, il n'est pas possible (depuis leurs modules respectifs), de relier une image ou un bouton call to action vers une ancre d'une même page sans l'ouverture d'une nouvelle fenêtre par le navigateur.

Donc... Utilisons les modules compatibles.

Sur Tutoriel Image vers ancre la version complète du tuto est en ligne, avec les étapes en images, et la démo.





Tutoriel : image vers ancre (Solie)



ÉTAPE 1

La création de l'ancre :

     ● Ajouter un élément Widget/HTML juste au dessus de la zone d'arrivée.

                  

     ● Intégrer le code :
Code:
<a name="nom_ancre" id="nom_ancre"> </a>
 en remplaçant nom_ancre  par le nom que l'on souhaite donner à l'ancre. Les deux parties "nom_ancre"  doivent porter le même nom.

     ● Enregistrer.



ÉTAPE 2

Insertion de l'image :

    ● Héberger l'image dans une page cachée du site.




Passer en mode visiteurs...

    ● Examiner l’élément à l'aide de son navigateur (clic-droit sur l'image).



    ● Copier les données de l'image. Elles sont affichées dans la partie surlignée.
<img id= "xxxxxxxxx></img>




Revenir en mode administrateur...

    ● Ajouter un élément Texte sur la page de l'ancre.

    ● Cliquer directement sur le bouton Modifier le HTML.



    ● Coller les données de l'image récupérées précédemment.

    ● Enregistrer.



ÉTAPE 3

Lier l'image vers l'ancre :

    ● Ouvrir le module Texte qui contient à présent l'image.

    ● Sélectionner l'image en la double-cliquant avec la souris.
Il est possible de la centrer ou de l'aligner à droite avec les outils d'alignement-texte du module.

    ● Créer un lien en renseignant dans le champ "Lien externe ou adresse e-mail"  un dièse  suivi du nom de l'ancre.
par exemple : #nom-ancre



    ● Enregistrer.
avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Tutoriel : Image vers Ancre

Message par FredVig le Lun 7 Déc 2015 - 15:43

Solie a écrit:Bonjour,
Revenir en mode administrateur...

    ● Ajouter un élément Texte sur la page de l'ancre.

    ● Cliquer directement sur le bouton Modifier le HTML.


Ne peut-on point utiliser un module html directement ?
bon système en tout cas et clairement expliqué.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1827
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Tutoriel : Image vers Ancre

Message par freewill le Lun 7 Déc 2015 - 15:53

Super ! Tuto
Mais comment pouvons nous faire pour mettre une ancres avec les boutons de jimdo ?

merci d'avance

freewill

Messages : 16
Date d'inscription : 04/12/2015

http://www.peaj.org

Revenir en haut Aller en bas

Re: Tutoriel : Image vers Ancre

Message par Solie le Lun 7 Déc 2015 - 15:58

FredVig a écrit:Ne peut-on point utiliser un module html directement ?
bon système en tout cas et clairement expliqué.
Oui Fred, j'en parle dans le tuto en ligne. J'ai choisi de faire le tuto avec le module texte car c'est plus facile pour une personne qui n'a pas de connaissances en html. Elle pourra centrer l'image et ajouter son lien juste avec l'aide des outils intégrés au module texte Wink

freewill a écrit:Super ! Tuto
Mais comment pouvons nous faire pour mettre une ancres avec les boutons de jimdo ?
merci d'avance
Suivez le tuto express bouton vers ancre.

avatar
Solie

Messages : 513
Date d'inscription : 06/05/2015

http://www.voixoff.com

Revenir en haut Aller en bas

Re: Tutoriel : Image vers Ancre

Message par freewill le Mar 8 Déc 2015 - 9:49

Merci beaucoup !

freewill

Messages : 16
Date d'inscription : 04/12/2015

http://www.peaj.org

Revenir en haut Aller en bas

Re: Tutoriel : Image vers Ancre

Message par FredVig le Sam 28 Mai 2016 - 9:50

Je complète ce tuto par un correctif de bugg sur firefox.
Firefox comprend les ancres, mais elles sont perturbées par le javascript éventuellement présent sur la page (par exemple, si vous avez une galerie d'images au dessus de l'ancre) :

Voici la solution :
Le problème vient d'un bugg référencé de firefox sur les ancres
Il apparait lorsque du javascript s'exécute sur la page ciblée
Il vous suffit de rajouter en début de page CIBLE, le script javascript suivant, inséré dans un widget html :

   
Code:
<script type="text/javascript">

    /*fixer le problème des ancres qui ne marchent pas dans firefox*/
    //<![CDATA[
    $(document).ready(function () { var anchor_id = window.location.hash; if (anchor_id != "") { var new_position = $(anchor_id).offset(); window.scrollTo(new_position.left,new_position.top); } });
    //]]>
    </script>


Exceptionnellement, ce code fonctionnera pour tout site.

_________________
Les codes de ce forum ne sont valables que pour UN site précis, à une date précise. Inutile de les essayer sans comprendre comment cela fonctionne.
Si vous avez apprécié mon aide, aidez en retour.
Acupuncture Bordeaux - Tailam (école Arts Martiaux) - MTC Tours - Maison des arts martiaux Tours L'étape à pâtes (Restaurant)Association Bohaires de Gasconha
avatar
FredVig

Messages : 1827
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Tutoriel : Image vers Ancre

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum