[Problème] Comment indiquer les bons parmètres de Image map sous JCE

[olef]

Bonjour,

Problème un peu délicat…
J’ai une image jpg qui représente un écran de cinéma. Avec l’éditeur image map, (editeur JCE), j’ai sélectionné la zone de l’écran et j’aimerais voir s’afficher à l’intérieur de celle-ci un diaporama que j’ai créé avec smart slider 3. Comment puis-je faire svp pour sélectionner uniquement le diaporama et non pas l’article ou se trouve ce diaporama (voir la photo ci-jointe).
Mais est-ce faisable ? Merci pour votre aide… car j’aimerais bien proposer mon idée, mais je n’arrive pas à indiquer les bons paramètres.
Merci encore,

Cordialement.

[webcrea]

Re : Comment indiquer les bons parmètres de Image map sous JCE

Une image map n'est pas une superposition d'images mais une image avec des zones reliées à des url.

Pour faire ce que tu veux tu peux déclarer une div, y mettre ton image en fond et insérer ton diaporama dans la div.

Cela donne un truc du genre

<div style="background-image:url("images/salle_cine.jpg");width:500px;height:400px;padding 10 10 0 0">
{loadmodule diaporama}
</div>

ton diaporama est un module nommé diaporama qui va être inséré dans la div. Tu auras à ajuster le padding pour le caler pile-poil sur l'écran et la taille de ton fond.

tu peux insérer ce code dans un article ou un module

si c'est dans un module il faut indiquer "Plug-ins de contenu" sur Oui

[olef]

Re : Comment indiquer les bons parmètres de Image map sous JCE

Bonjour webcrea,
Sympa d'avoir regardé et surtout m'aider sur ce point. J'ai compris par rapport à la superposition d'images, effectivement......
par contre, je dois avoir oublié un élément car le diaporama (l'image pour le moment) se positionne après mon image ou j'ai mon écran de cinéma (j'ai fait une copie d'écran) :


Et au niveau de la config, j'ai fait ceci :
<div>&nbsp;<img src="images/documents/hiver/bon.jpg" alt="bon" /></div>
<div style="background-image: url(images/documents/hiver/bon.jpg;">;width:500px;height:400px;padding 10 10 0 0&gt;{loadmodule mod_smartslider3[7]}</div>
<p>&nbsp;</p>

Ai-je bien écris ?
Est-ce aussi la quote après le padding qui est en trop ?

Pourtant, je ne dois être plus très loin de la solution. Merci encore..... si vous pouvez me corriger.
Cordialement.

[webcrea]

Re : Comment indiquer les bons parmètres de Image map sous JCE

retire <div>&nbsp;<img src="images/documents/hiver/bon.jpg" alt="bon" /></div>

essaye juste

<div style="background-image: url(images/documents/hiver/bon.jpg;width:500px;height:400px;padding 10 10 0 0;">{loadmodule mod_smartslider3[7]}</div>

[olef]

Re : Comment indiquer les bons parmètres de Image map sous JCE

Merci webcrea,
J'ai essayé, mais je ne vois pas l'image en background (j'ai renommé mon fichier bon.jpg en cinema.jpg ; c'est tout de même plus explicite.
Par contre, en cherchant un peu partout je suis tombé sur cela (joomla 2.5) : c'est moi qui ait rajouté width: 700px; height: 700px. C'est la taille de mon image background.


<div style="background: url('images/documents/hiver/cinema.jpg'); width: 700px; height: 700px; background-repeat: no-repeat; background-attachment: fixed; background-position: center center;">
<p>{loadmodule mod_smartslider3[7]}</p>
<p>&nbsp;</p>
</div>
Et cela donne la copie d'écran que je faite.....

Je pense ne plus être très loin. On voit que l'image du cinéma en background est coupée en haut. J'ai beau augmenté la taille et la hauteur, même en mettant beaucoup plus cela scroll au niveau de l'article, je vois que mon image cinema est trop grande.
Faut-il réduire un peu mon image en background, ou y a t'il des paramètres inutiles ?
Merci encore pour votre aide, car ce n'est pas si facile que cela. J'aime bien cette idée de cinéma mais ce n'est pas simple de cibler ma photo dans le cadre de l'écran.
Cordialement, et à bientôt j'espère pour l'apothéose.
olef

[olef]

Re : Comment indiquer les bons parmètres de Image map sous JCE

J'ai repris un peu :
<div style="background: url('images/documents/icones/cinema.jpg'); width: 1200px; height: 600px; background-repeat: no-repeat; background-attachment: fixed; background-position: center center;">
<p>{loadmodule mod_smartslider3[7]}</p>
</div>

et cela donne cela :


1°) L'image est coupé en haut
2°) J'aimerais bien effacer le texte {loadmodule mod_ }
3°) Je mets des espaces, et l'image n'avance pas. Y a t'il un paramètre à rajouter.

Merci pour cette touche finale.... car on n'est plus très loin.
Cordialement
olef