WebSite X5Help Center

 
Christian Linsenmaier
Christian Linsenmaier
User

Texte à cliquer sur image  fr

Autor: Christian Linsenmaier
Visitado 969, Seguidores 1, Compartilhado 0  

Bonjour à tous,

Est-il possible d'avoir un texte en surimpression d'une image et sur lequel on peut cliquer directement pour accéder à la page soiuhaitée.

J'ai essayé le porfolio et le Content Slider mais dans ces 2 cas il faut ajouter un bouton sur lequel cliquer ce qui n'est pas ce que je recherche. Je souhaite éviter le bouton et qu'un clique directement sur le texte permette d'accéder à la page demandée.

Merci d'avance pour votre aide.

Bien à vous

Chris

Publicado em
16 RESPOSTAS
Incomedia
Elisa B.
Incomedia

Bonjour Christian, 

vous pouvez obtenir ce résultat de cette façon :

  • Insérez un Objet Texte et utilisez-le pour écrire le texte souhaité. 
  • Avec la fonction Lien disponible dans l'éditeur, insérez votre lien pour qu'on puisse cliquer sur le texte.
  • Puis sélectionnez la cellule où vous avez inséré l'Objet Texte et appuyez sur Style 
  • Dans la section Style, sélectionnez Arrière-plan image et importez l'image à utiliser.

Je me tiens à votre disposition et je vous souhaite une bonne journée.

Ler mais
Publicado em de Elisa B.
Christian Linsenmaier
Christian Linsenmaier
User
Autor

Bonjour 

Merci beaucoup pour votre réponse.

Cependant, la sélection de texte provoque une division des sélections de clique (mon texte contient 3 lignes et même en sélectionnant tout le texte en même temps pour appliquer le lien, cela ne fonctionne pas) et par ailleurs l'image devient carrée et est donc inutilisable.

Bien à vous

Ler mais
Publicado em de Christian Linsenmaier
JiPeR 48
JiPeR 48
Moderator

Hello Christian,

A toutes fins utiles, si tu places le texte sur un nombre de cellules impair tu devrais avoir un format rectangulaire. Testé à l'instant (...le lien est actif sur une autre page du projet et fonctionne aussi en lien externe "nouvelle fenêtre"...) :

A tester et nous dire,

J.P.

Ler mais
Publicado em de JiPeR 48
Christian Linsenmaier
Christian Linsenmaier
User
Autor

Bonjour JP,

Merci beaucoup pour ton aide. Ma photo est bien sur 3 cellules. Sur l'exmple ci-joint, on voit bien le tecte et le bouton en dessous du texte. Ce que je voudrais, c'est que le lien soit ectif en cliquant sur le texte et ne pas utiliser de bouton. Est-ce possible ?

Ler mais
Publicado em de Christian Linsenmaier
JiPeR 48
JiPeR 48
Moderator

Hello ! Avec plaisir ;o)

Dans mon exemple je me suis basé sur les explications d'Elisa (texte et image en fond de cellule, donc sans bouton). Une fois l'image en place, je jongle avec le texte pour le placer (ajout/suppression de lignes si besoin).

Le lien est actif sur la totalité du texte, et il peut être configuré depuis l'Etape 2, Modèle, Style des textes, champs et boutons (histoire de supprimer le souligné par exemple, et de lui donner la couleur voulue).

Bonne continuation,

J.P.

Ler mais
Publicado em de JiPeR 48
Christian Linsenmaier
Christian Linsenmaier
User
Autor

Merci JP.

J'ai appliqué toute la procédure mais j'obtiens une image très tronquée en fonds et le lien sur le texte ne fonctionne pas en tenant compte de m'intégralité du texte. Sur l'exemple ci-joint, le lien fonctionne séparément sur "Volley ball" et sur "Terville Florange" et non sur la totalité du texte.

Bien à toi

Ler mais
Publicado em de Christian Linsenmaier
JiPeR 48
JiPeR 48
Moderator

Re...   ;o)

Tu pourrais fournir l'image en question pour faire un petit test pour la présentation avec texte +lien ? 

@+, J.P.

Ler mais
Publicado em de JiPeR 48
Christian Linsenmaier
Christian Linsenmaier
User
Autor

Bonjour JP

Tu trouveras ci-joint le photo en question.

Bien à toi

Ler mais
Publicado em de Christian Linsenmaier
Christian Linsenmaier
Christian Linsenmaier
User
Autor

JP

Une autre solution pour moi serait d'avoir le texte qui apparaît sur l'image et de pouvoir cliquer sur l'image.

Merci d'avance pour ton aide

Ler mais
Publicado em de Christian Linsenmaier
Miguel Galarza
Miguel Galarza
User

Salut, Christian:


Bien que j'ai compris, ce que vous voulez c'est avoir l'image de fond et que cette image soit responsive... mais que le texte soit le lien vers une autre page du site.
Si cela est correct, c'est avec du code personnalisé.

1) Vous devez d’abord télécharger l’image sur le projet (pour obtenir l’adresse). Cela se fait dans:


ÉTAPE 1 - Statistiques et Code - Code


Dans la section ci-dessous "Fichiers connectés au code html", nous ajouterons l'image que nous utiliserons et la placerons dans le dossier "images"
L'adresse de notre image ressemblerait à ceci : images/DSC_4421.jpg

2) Le code suivant sera placé dans un "objet html". Il se compose de 2 sections : un style et un div comme conteneur.

------------------------------------------

<style>
.container {
position: relative;
width: 100%;
max-width: 96%;
}

.image {
display: block;
width: 100%;
height: auto;
}
.icon {
color: #ffffff;
font-size: 4vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.icon:hover {
color: green;
font-size: 4vw;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>


<div class="container">
<img src="images/DSC_4421.jpg" title="" width="560" height="374" class="image">
<div class="icon:hover"><a href="https://www.radiomazz.com" class="icon">
Ici, vous verrez le titre qui fonctionnera comme enlacé.
</a></div>
</div>

------------------------------------------

Dans la section "style" ce que vous allez modifier est la taille de la lettre (font-size). dans ce cas je l'ai laissé en 4vw. Tout dépend de la quantité de texte. Et la couleur #ffffff (blanc) et vert (vert)

Dans la section "div" il y a 3 paramètres que vous allez modifier :

  • L'adresse de l'image que nous avons précédemment téléchargée. src="images/DSC_4421.jpg" en modifiant uniquement ce qui se trouve entre les guillemets.
  • L'adresse de la page, du fichier ou du site Internet vers lequel mènera le lien : href="https://www.radiomazz.com" Dans ce cas je mets l'adresse de mon site Internet. Vous modifierez uniquement ce qui se trouve entre les guillemets.
  • Le texte qui fonctionnera comme un lien. dans ce cas je mets: Ici, vous verrez le titre qui fonctionnera comme enlacé.

L'image restera en arrière-plan et s'adaptera à la taille du conteneur. Et le texte du lien sera uniforme, sans divisions dans les sauts de ligne.

J'espère que c'est ce que vous cherchez à faire. Salutations.

Ler mais
Publicado em de Miguel Galarza
Miguel Galarza
Miguel Galarza
User

Assurez-vous de mentionner que dans la taille de la source du texte, vous pouvez utiliser le format de px : 25px ou 35px, au lieu de 4vw, selon votre critère et comment voir le grand ou le petit texte.

Ler mais
Publicado em de Miguel Galarza
Miguel Galarza
Miguel Galarza
User

Si vous avez des idées sur les fonctions du texte et de l'image telles qu'elles apparaissent, ce dont vous avez besoin pour cette section :

<div class="container"><a href="https://www.radiomazz.com">
<img src="images/DSC_4421.jpg" title="" width="560" height="374" class="image"></a>
<div class="icon:hover"><a href="https://www.radiomazz.com" class="icon">
Ici, vous verrez le titre qui fonctionnera comme enlacé.
</a></div>
</div>

Ler mais
Publicado em de Miguel Galarza
Miguel Galarza
Miguel Galarza
User

Erreur de traduction dans le commentaire précédent : haha foot-in-mouth

Si vous souhaitez que le texte et l'image fonctionnent comme des liens, remplacez cette section :

Ler mais
Publicado em de Miguel Galarza
Christian Linsenmaier
Christian Linsenmaier
User
Autor

Bonjour Miguel,

Un grand merci pour votre aide.

Tout cela est très compliqué pour moi car je ne suis pas programmeur même si vos explications sont très claires.

Cependant, si je comprend bien votre procédure, il faudrait que je fasse cela pour chaque image munie d'un lien, ce qui deviendrait alors très chronophage.

Je vais revoir ma façon de faire et peut-être qu'un jour website x5 sera plus moderne et convivial pour permettre ce type d'opération qui devrait tout de même être très facile à faire quand on regarde tout ce qui existe actuellement sur les sites internets modernes.

Bien à vous

Ler mais
Publicado em de Christian Linsenmaier
Miguel Galarza
Miguel Galarza
User

Salut, Christian:

Voici 3 façons d'utiliser l'objet "Curseur de contenu".

Je l'ai mis dans un projet ci-joint que vous pouvez télécharger.

Ça a l'air beaucoup mieux.

  • L'image est propre et réactive (elle serait bien meilleure si toutes les images étaient de la même taille).
  • La description claire et facile à lire.
  • Le bouton est indicatif pour ouvrir un lien.

C'est à cela que servent ces objets.

Si je devais améliorer le code personnalisé, je me retrouverais avec quelque chose de similaire à l'objet "Content Slider" haha laughing

Ler mais
Publicado em de Miguel Galarza
Christian Linsenmaier
Christian Linsenmaier
User
Autor

Bonjour Miguel,

Merci beaucoup d'avoir pris le temps pour m'aider. Les 3 modèles sont très intéressants avec une préférence pour le 3ème avec le texte à droite et le bouton.

Encore un grand merci pour votre aide.

Ler mais
Publicado em de Christian Linsenmaier