position des calques dans un article

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • xav01
    a crée un sujet position des calques dans un article

    position des calques dans un article

    Bonjour,

    J'essaye d'utiliser des calques placés par dessus une image pour mettre en avant des zones particulières de cette image, insérée dans un article.

    Malheureusement ces calques ne se positionnent pas par rapport au début de l'article, mais par rapport au début de la page html.
    Du coup cela crée des décalages.

    Et si je place les calques en positions relative (au lieu d'absolue) je ne peux plus les placer par dessus l'image de fond.

    Pour avoir l'article avec les calques bien placés, il faut que l'utilisateur:
    • regarde sur écran de largeur 1280 pixels, sinon il y a un décalage horizontal;
    • regarde l'article depuis la page de garde, et non en cliquant sur le lien direct, sinon comme la phrase d'accueil disparait, ça crée un décalage vertical.

    Pour comprendre ce que je veux dire, le plus simple est d'aller sur le site:
    http://gm.lpa.free.fr/

    Peut-être qu'en ajoutant une classe à mes calques je pourrais résoudre le souci. Mais là je ne sais pas.
    Donc si quelqu'un sait comment faire, merci de me le dire.
    Dernière édition par xav01 à 20/09/2009, 10h25 Raison: solution trouvée

  • jcgrini
    a répondu
    Bonjour
    Sarki
    je continu sur le même sujet, avec image-map, tu crées effectivement des zones cliquables sur une image. ce que je n'ai pas trouvé c'est comment avoir la zone qui change de couleur au passage de la souris, ou comme a fait xav01 avoir l'image de la zone cliquable qui change au passage de la souris.

    merci

    Laisser un commentaire:


  • sarki
    a répondu
    Hello Xav01,
    ce n'était pas péjorativement que je disais ça, d'autant que ce plugin ImageMap n'est pas disponible depuis très longtemps et peu sont certainement ceux qui le connaissent.
    Encore une fois je te réitère mes félicitation car la maîtrise des calques est quelque chose de difficile et tu as trouvé une excellente parade sans passer par des tableaux

    Laisser un commentaire:


  • xav01
    a répondu
    Merci d'avoir réagi.

    Je me doutais bien que certains modules permettaient ça, mais j'avoue que j'ai déjà du mal à saisir toutes les nuances de tinymce.

    Alors tester plusieurs éditeurs, et trouver le plugin de l'éditeur qui permet de faire ça facilement, ça m'aurait peut-être pris autant de temps que de bricoler mon mic-mac.

    Ceci dit j'ai mis le code juste pour le cas où ça puisse aider quelqu'un, je ne prétends pas que ma solution soit un exemple à montrer.
    Bien au contraire, c'est plutôt un exemple d'un mic-mac bidouillé parce que je n'ai pas pris le temps de chercher le bon outil.

    Laisser un commentaire:


  • sarki
    a répondu
    Hello,
    Que de mic-mac pour ce résultat...
    Tu aurais eu la même chose avec l'éditeur JCE et le plugin Image Map qui te permet de faire des zones à cliquer sur la même image. Il suffisait de préparer ton image dans ton logiciel habituel en faisant comme tu l'as fait des zones plus foncées, puis de définir ces zones avec le plugin cité
    Mais bon, l'essentiel c'est que tu y soit arrivé, bravo !

    Laisser un commentaire:


  • xav01
    a répondu
    solution trouvée

    Je me réponds à moi-même, puisque j'ai trouvé alors autant que ça puisse servir à quelqu'un.
    J'ai tout simplement mis l'image principale en image de fond, et alors les images à placer par dessus acceptent l'attribut "relative" et donc respectent la largeur de l'affichage.

    SI ça aide quelqu'un, je donne le code mis au point:
    Code:
    <p>Voici une phrase</p>
    <div style="margin: 0pt; background-image: url(images/stories/image_de_fond.jpg); width: 960px; height: 805px; background-repeat: no-repeat;">
    <div style="position: relative; left: 215px; top: 45px; width: 37px; height: 48px;"><a href="index.php?option=com_content&amp;view=article&amp;id=47"><img src="images/stories/image_superposee_reduite.png" border="0" ></a></div>
    </div>
    Pour voir le résultat jetez un coup d'œil à la page d'accueil de :
    http://gm.lpa.free.fr/

    Longue vie à l'AFUJ

    Laisser un commentaire:

Annonce

Réduire
1 sur 2 < >

C'est [Réglé] et on n'en parle plus ?

A quoi ça sert ?
La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
Comment ajouter la mention [Réglé] à votre discussion ?
1 - Aller sur votre discussion et éditer votre premier message :


2 - Cliquer sur la liste déroulante Préfixe.

3 - Choisir le préfixe [Réglé].


4 - Et voilà… votre discussion est désormais identifiée comme réglée.

2 sur 2 < >

Assistance au forum - Outil de publication d'infos de votre site

Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

UTILISER À VOS PROPRES RISQUES :
L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

Problèmes connus :
FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

Installation :

1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

Archive zip : https://github.com/AFUJ/FPA/zipball/master

2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
et remplacer www. votresite .com par votre nom de domaine


Exemples:
Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/
Pour executer le script: http://www..com/fpa-fr.php

Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
Télécharger le script fpa-fr.php dans: /public_html/cms/
Pour executer le script: http://www..com/cms/fpa-fr.php

En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
Voir plus
Voir moins
Travaille ...
X