Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Identifiez-vous Inscrivez-vous Accueil du forum Aide sur le forum
Rester informé des mises à jour et offres TOWeb en souscrivant à la Newsletter TOWeb
pagexl.com pour la création gratuite et facile de sites "one page" (page unique)


IMPORTANT: Avant de poster un message sur le forum n'oubliez pas :
1. d'effectuer une recherche sur le forum ainsi que dans l'aide en ligne TOWeb
2. de consulter les tutoriels vidéo sur YouTube et les dernières informations du blog de TOWeb
3. de consulter les tutoriels de Frangin62
Forum TOWeb|-TOWeb| |-Scripts & astuces pour votre site| | |-Carte ou image cliquable et Responsive « sujet précédent | | sujet suivant »
Pages: [1] Bas de page Imprimer
Auteur Fil de discussion: Carte ou image cliquable et Responsive  (Lu 1649 fois)
frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« le: 13 Mars 2020 à 15h12 »

Bonjour à tou(te)s,

Je vous présente un nouveau tuto sur mon site.
Il est possible de réaliser une carte ou une image cliquable mais surtout responsive avec les zones qui suivent les dimensions de l'image réduite ou agrandie. Auparavant il était nécessaire d'ajouter des scripts à des endroits précis, ce qui rendait le principe difficile sur TW.
Avec mon script il ne suffit que ....ce script et votre image. Je vous explique comment je crée les zones avec un logiciel très léger que j'affectionne pour cela car il est simple à utiliser.
Pour voir le résultat,
http://testtoweb.free.fr/toweb/carte.html
si cela vous intéresse
http://frangin62.free.fr/cartesvg.html

Cdlt
frangin62
Journalisée

fly354
Jr. Member
**

Nombre de "j'aime" : 1
Messages: 92



WWW
« Répondre #1 le: 27 Mars 2020 à 22h27 »

Bonjour Frangin,
Je suis en train de tester ton tuto, tous ce passe bien sauf que mon image reste petite a gauche de l'écran ! je veut qu'elle prenne toute la largeur ! mon image fait 1024 x 444
Journalisée

fly354
Jr. Member
**

Nombre de "j'aime" : 1
Messages: 92



WWW
« Répondre #2 le: 27 Mars 2020 à 22h38 »

Ok, j'avais pas bien lu tout les conseils indiqué dans le script, mais je n'arrive pas a centrer l'image, elle reste a gauche !!

dernière question
Peut tu me dir où mettre la balise "alt" Huh
dans image ou polygon ??
Merci
« Dernière édition: 28 Mars 2020 à 00h43 par fly354 » Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« Répondre #3 le: 27 Mars 2020 à 22h44 »

Bonjour Fly,
j'étais entrain de répondre quand tu as posté ton second message
Tu dois modifier la valeur de  max-width : 400 px;  par 1024 px  ce paramètre limite la largeur. Comme tu peux voir, j'ai indiqué dans les lignes entourées de <!--    et  -> à quoi correspondaient certaines valeurs.

Cdlt
frangin62
Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« Répondre #4 le: 27 Mars 2020 à 22h48 »

Désolé je n'avais pas tout vu,

tu peux le mettre ici            <image alt="xxxx" width=.........
« Dernière édition: 27 Mars 2020 à 22h55 par frangin62 » Journalisée

fly354
Jr. Member
**

Nombre de "j'aime" : 1
Messages: 92



WWW
« Répondre #5 le: 28 Mars 2020 à 00h44 »

Merci, mais l'image reste a gauche ! je n'arrive pas a la centrer !
Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« Répondre #6 le: 28 Mars 2020 à 09h25 »

Bonjour

Dans ton paragraphe, tu centres le %% du champ html.
Mais si tu as fait pour que l'image prenne toute la largeur, je ne vois pas le problème.

J'ai modifié le site de test, tu peux voir le résultat en centrant le %%.

Cdlt
frangin62

Edit  :  Dans TW, on a aussi la possibilité de positionner les paragraphes avec les barres Largeur et Retrait en haut à gauche en édition
« Dernière édition: 28 Mars 2020 à 10h05 par frangin62 » Journalisée

fly354
Jr. Member
**

Nombre de "j'aime" : 1
Messages: 92



WWW
« Répondre #7 le: 28 Mars 2020 à 11h05 »

Super merci,
Quand c'est trop simple ont ne vois pas toujours les choses !
Bravo pour ton tuto qui offre pas mal de possibilité
Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« Répondre #8 le: 28 Mars 2020 à 11h43 »

 Clin d'oeil
Bon week-end
Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 125
Messages: 2617



WWW
« Répondre #9 le: 01 Avril 2020 à 14h40 »

Bonjour,

J'ai ajouté un complément au script existant. Il est possible d'ajouter des images au survol des zones en plus des liens.
En fait j'ai combiné avec un autre script qui le faisait déjà mais qui ne permettait pas de créer les contours en polygone.
Il suffit de compléter le premier script avec celui effectuant la gestion des images
Un rappel des liens
Pour voir le résultat,
http://testtoweb.free.fr/toweb/carte.html
si cela vous intéresse
http://frangin62.free.fr/cartesvg.html

Cdlt
frangin62
Journalisée

Pages: [1] Haut de page Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  


Cliquez ici pour vous abonner au flux RSS du forum  -  
Powered by SMF 1.1.18 | SMF © 2006-2009, Simple Machines