Marqueurs interactifs

[Robert44]

Bonjour à tous,

J'ai une petite question technique. Peut être que je ne m'adresse pas au bon endroit puisque cette question n'est pas spécifique à Joomla. Auquel cas n'hésitez pas à me rediriger, je ne connais pas les forums à part celui-ci.

Je souhaiterais créer une image avec des marqueurs interactifs (comme celle-ci).

Savez-vous quelle technologie est utilisée ? (HTML5, Javascript, JQuery?)

Existe-t-il une extension Joomla capable de traiter ce genre de requête?

Cordialement.
Robert.

[ghazal]

Re : Marqueurs interactifs

Salut,
l'exemple que tu montres, sur lequipe.fr, provient d'un service spécialisé (avec une offre gratuite et une payante) :

https://www.thinglink.com/

https://www.thinglink.com/signup

qui travaille visiblement avec joomla :
Help - ThingLink

https://www.thinglink.com/help/Joomla

A Simple Way to Convert Content from HTML to Joomla [ThingLink]

http://www.cms2cms.com/blog/simple-way-convert-content-static-html-site-joomla-prezi/

[Robert44]

Re : Marqueurs interactifs

Merci pour cette réponse.
J'avais en effet vue le lien vers Thinglink, mais je ne savais pas qu'ils travaillaient avec Joomla et c'est une excellente chose.
En revanche, pour le cas qui me concerne aujourd'hui, je souhaite personnaliser davantage les éléments, et le version payante est trop onéreuse pour moi. C'est pour ça que je souhaitais connaître la technologie utilisée afin d'apprendre par moi-même à créer ma propre image interactive.
Cordialement.

[ghazal]

Re : Marqueurs interactifs

Tu peux essayer le plugin imagemap pour JCE développé par un membre de ce forum, Sharky.

plugins JCE pour imagemap (2x) | I Wanna click

http://www.iwannaclick.org/articles/informatique/47-cms-joomla/91-plugins-jce-pour-imagemap-2x.html

[webcrea]

Re : Marqueurs interactifs

Tu peux aussi définir le background d'une div avec la photo
- positionner les puces via une css
- définir le comportement via du jQuery

css

#fond{
background:url(images/mon_fond.png);
width:500px;
height:300px;
}

.puce{
background:url(images/ma_puce.png);
width:20px;
height:20px;
}

#puce-1{
left:120px;
top:50px;
z-index:10;
}
#puce-2{
left:150px;
top:50px;
z-index:11;
}

.contenu{
display:hidden;
z-index:1000;
}

html

<div id="fond">
<div class="puce" id="puce-1"></div><div class="contenu">Mon contenu 1...blabla</div>
<div class="puce" id="puce-2"></div><div class="contenu">Mon contenu 2...blabla</div>
</div>

js



$( "div.puce" ).on(

mouseenter: function() {
$( this ).next().show();


}, mouseleave: function() {


$( this ).next().hide();


}


});



je n'ai pas testé, mais l'idée est de définir un comportement général qui affiche ou non la div suivant la puce