Texte à cliquer sur image
Autor: Christian Linsenmaier
Visited 971,
Followers 1,
Udostępniony 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
Posted on the
Bonjour Christian,
vous pouvez obtenir ce résultat de cette façon :
Je me tiens à votre disposition et je vous souhaite une bonne journée.
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
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.
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 ?
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.
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
Re... ;o)
Tu pourrais fournir l'image en question pour faire un petit test pour la présentation avec texte +lien ?
@+, J.P.
Autor
Bonjour JP
Tu trouveras ci-joint le photo en question.
Bien à toi
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
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'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.
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.
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>
Erreur de traduction dans le commentaire précédent : haha
Si vous souhaitez que le texte et l'image fonctionnent comme des liens, remplacez cette section :
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
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.
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
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.