Plu in UP

**lomart** · 10/12/2017, 16h31

Bonsoir,

UP n'y peut pas grand chose quand on lui demande d'afficher une table de 1497px de large. Il y aura forcement des ascenceurs. C'est en amont qu'il faut résoudre le problème.
Plutôt qu'une table une imagemap responsive aurait été préférable. Par exemple en implantant ce JS pour gérer le responsive https://github.com/stowball/jQuery-rwdImageMaps
Si besoin, je veux bien créer l'action UP pour implanter ce script
Pour créer le code HTML, il faut utiliser un des innombrables générateurs d'imagemap : https://www.google.fr/search?source=...+map+generator

**jmpo** · 10/12/2017, 19h00

Bonsoir, je ne reproche rien à UP bien entendu... ce que je cherche à faire c’est de pouvoir afficher mes deux fichiers HTML...
Je vais lire ton lien, car je ne sais pas ce qu’est une imagemap responsive... désolé.
Si tu crées l’action UP cela va-t-il resoudre mon problème? Je ne veux pas te donner du travail en plus, tu m’as déjà bcp aidé.
Je ne sais pas si c’est le même problème ici http://tfe.clic-nature.com/index.php/argent
Merci

**lomart** · 10/12/2017, 19h51

Si tu crées l’action UP cela va-t-il resoudre mon problème?

Non, c'est juste pour faire une imagemap responsive

Je ne sais pas si c’est le même problème ici http://tfe.clic-nature.com/index.php/argent

Oui et non, si l'on donne une taille trop petite pour le bloc, cela ajoute des ascenceurs.
Il ne faudrait pas traiter le HTML comme iframe mais l'inclure dans le code de l'article
Un moyen facile, ou tout au moins le mien, pour inclure du code html dans un article sans risque de l'effacer :
le mettre dans un module LM-Custom et faire un loadposition de ce module dans l'article
dans la zone HTML/PHP : tout le code entre <body> et </body>
dans la zone code CSS :

Code:

.form-inline{
      display:inline-block;
      padding:8px;
      width:50%;
    }  
    .argent{
      width:200px;
      height:100px;
      border-width: 1px;
      border-radius: 10px;
      border-color: grey;
      display:inline-block;
    }
    .argent img{
      max-width:50%;    
    }

J'ai modifié la classe argent pour rendre l'affichage responsive

Autres amélioration, réduisez le poids des fichiers des billets (18Mo au total). 2.5Mo pour le billet de 50, c'est un peu beaucoup

**jmpo** · 10/12/2017, 20h01

Merci, je teste cela demain quand je serai à l’ordinateur, ici je réponds de mon iPad.
Je vais aussi réduire le poids des billets .
Bonne soirée

**lomart** · 10/12/2017, 22h50

Pour le problème du triangle, j'ai créé une action imagemap pour UP

UP-LOMART - imagemap ~ image clicable responsive

https://up.lomart.fr/demo/action-imagemap

**jmpo** · 11/12/2017, 07h44

Super, merci... je teste tout à l’heure. Bonne journée

**jmpo** · 11/12/2017, 09h31

Je viens de tester pour le triangle et j'ai un message d'erreur:

⇒ imagemap: ACTION NON TROUVEE

Voici le code que j'ai copié dans un article. L'image pyramide.png est dans le dossier pyramide de la racile.

{up imagemap=pyramide/pyramide.png | style=border:2px solid red; width:100%}
<area target="_parent" alt="Extras" title="Extras" href="http://tfe.clic-nature.com/index.php/categories/category/15-extras" coords="37,817,109,696,913,695,988,816" shape="poly">
<area target="_parent" alt="Fruits" title="Fruits" href="http://tfe.clic-nature.com/index.php/categories/category/17-fruits" coords="184,575,111,695,430,695,432,578" shape="poly">
<area target="_parent" alt="Légumes" title="Légumes" href="http://tfe.clic-nature.com/index.php/categories/category/12-legumes" coords="841,574,436,574,435,692,912,693" shape="poly">
<area target="_parent" alt="Féculents" title="Féculents" href="http://tfe.clic-nature.com/index.php/categories/category/16-feculents" coords="256,456,184,569,838,569,767,449" shape="poly">
<area target="_parent" alt="Produits laitiers" title="Produits laitiers" href="http://tfe.clic-nature.com/index.php/categories/category/13-produits-laitiers" coords="331,334,559,331,561,449,260,449" shape="poly">
<area target="_parent" alt="VVPO" title="VVPO" href="http://tfe.clic-nature.com/index.php/categories/category/19-vvpo" coords="564,334,559,448,763,451,695,330" shape="poly">
<area target="_parent" alt="Matières grasses" title="Matières grasses" href="http://tfe.clic-nature.com/index.php/categories/category/18-matieres-grasses" coords="404,210,333,325,690,324,618,206" shape="poly">
<area target="_parent" alt="Extras" title="Extras" href="http://tfe.clic-nature.com/index.php/categories/category/15-extras" coords="512,29,405,204,618,204" shape="poly">
{/up imagemap}

Merci de m'éclairer
Bonne journée.

**lomart** · 11/12/2017, 09h38

Cette action est toute nouvelle, il faut copier le dossier de l'action dans le dossiers actions de UP

Erreur: 404

https://up.lomart.fr/telechargements/download-actions/download/2-actions/70-imagemap

Quelques suggestions et questions:
il faut mieux écrire les liens comme ceci : href="index.php/categories/category/15-extras"
Il existe un dossier pyramide en racine du site ? il n'est pas dans image ?

**jmpo** · 11/12/2017, 10h12

non il n'est pas dans images, mais je peux l'y mettre

**lomart** · 11/12/2017, 10h17

Envoyé par jmpo Voir le message

non il n'est pas dans images, mais je peux l'y mettre

Ce serait mieux mais pas indispensable pour que cela fonctionne

**jmpo** · 11/12/2017, 10h31

super... cela fonctionne, y-a-t-il moyen d'enlever le cadre rouge autour de la pyramide?

clic-nature.com - Ressources et information concernant clic nature Resources and Information.

http://tfe.clic-nature.com/index.php/up-pyramide

clic-nature.com réunit des informations et annonces. Nous espérons que vous y trouverez les informations que vous recherchez !

**lomart** · 11/12/2017, 10h51

Envoyé par jmpo Voir le message

super... cela fonctionne, y-a-t-il moyen d'enlever le cadre rouge autour de la pyramide?
http://tfe.clic-nature.com/index.php/up-pyramide

En supprimant le paramétre en rouge

Code:

[COLOR=#333333][FONT=Tahoma]{up imagemap=pyramide/pyramide.png[/FONT][/COLOR][FONT=Tahoma] | style=[/FONT][COLOR=#FF0000][FONT=Tahoma]border:2px solid red; [/FONT][/COLOR][FONT=Tahoma]width:100%[/FONT][COLOR=#333333][FONT=Tahoma]}[/FONT][/COLOR]

**jmpo** · 11/12/2017, 16h01

Merci
Je me bats actuellement avec LM-Custom... J'ai téléchargé les deux modules que j'ai installé et activé, un seul apparaît dans la liste des modules installés (LM-Custom-SITE - Contenu personnalisé avancé).

J'ai remplacé la classe argent pour rendre l'affichage responsive.
Ensuite j'ai copié la totalité du code dans le module dans l'onglet HTML/PHP
J'ai édité le module dans une position dans un article Joomla.
Lorsque je visionne l'article, j'ai la cellule où taper le montant et le bouton calculer. Pas d'affichage des images et pas de possibilité d'introduire un montant dans la cellule prévue.
Par contre, le code fonctionne, car si je l'essaye directement dans un navigateur j'ai les images et la possibilité de faire une décomposition.

???
Merci

**lomart** · 11/12/2017, 20h11

J'ai téléchargé les deux modules que j'ai installé et activé, un seul apparaît dans la liste des modules installés (LM-Custom-SITE - Contenu personnalisé avancé).

C'est normal, tu n'as besoin que de la version site. L'autre est un module pour le backend de Joomla. Visible si l'on sélectionne les modules admin.

Lorsque je visionne l'article, j'ai la cellule où taper le montant et le bouton calculer. Pas d'affichage des images et pas de possibilité d'introduire un montant dans la cellule prévue.

J'ai testé avant de poster la méthode. Donc ça fonctionne

Ensuite j'ai copié la totalité du code dans le module dans l'onglet HTML/PHP

Je n'ai jamais dit cela : uniquement le code dans body

Un lien pour voir ?

Plu in UP

[RÉGLÉ] Plu in UP

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association