Salut !
Voici mon problème :
je voudrais que, lorsque la souris survole une photo de groupe, à chaque personne survolée on puisse cliquer pour accéder à un article "portrait" de cette personne.
Est-ce possible pour un site sous spip et sarka ?
Merci de vos réponses et cordialement
--
Djeel
hello,
à priori si j'ai bien compris ta question il s'agit d'une "image map" (html)
j'ai pas testé de solution "spip" mais a priori y'a une piste sur
spip-contrib :
audrey
Le 29 novembre 2009 15:55, djeel <djeel@free.fr> a écrit :
Salut !
Voici mon problème :
je voudrais que, lorsque la souris survole une photo de groupe, à chaque
personne survolée on puisse cliquer pour accéder à un article "portrait" de
cette personne.
Est-ce possible pour un site sous spip et sarka ?
Merci de vos réponses et cordialement--
Djeel_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.netInfos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.netDocumentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
audwill a écrit :
hello, à priori si j'ai bien compris ta question il s'agit d'une "image map" (html) j'ai pas testé de solution "spip" mais a priori y'a une piste sur spip-contrib : audreySalut ! Voici mon problème : je voudrais que, lorsque la souris survole une photo de groupe, à chaque personne survolée on puisse cliquer pour accéder à un article "portrait" de cette personne. Est-ce possible pour un site sous spip et sarka ? Merci de vos réponses et cordialement -- Djeel
on peut avec une image mappée
j’ai fait un truc du genre avec une carte sur ce site
si ça t’intéresse, je te file les fichiers et tu adaptes
Jean-Christophe Villeneuve a écrit :
on peut avec une image mappée
j'ai fait un truc du genre avec une carte sur ce site <http://www.villagesbotaniques.fr/>
si ça t'intéresse, je te file les fichiers et tu adaptes
Salut le drômois !
Voici ce que j'ai fait :
une photo d'équipe
dans Gimp, délimitation d'une zone cliquable sur chaque joueur, pointant sur l'URL d'un article créé par joueur.
Ce que je ne sais pas :
où enregistrer la photo mappée issue de Gimp ?
Un tuto dit "sur internet" ce qui est un peu vague...
Et où copier le code html obtenu ?
Merci de tes lumières...
Je débute, sois indulgent et pédagogique :-)))
cordialement
--
Djeel
djeel a écrit :
Jean-Christophe Villeneuve a écrit :
on peut avec une image mappée
j'ai fait un truc du genre avec une carte sur ce site <http://www.villagesbotaniques.fr/>
si ça t'intéresse, je te file les fichiers et tu adaptesSalut le drômois !
perdu, je suis stéphanois d'adoption, c'est le site d'un copain
Voici ce que j'ai fait :
une photo d'équipe
dans Gimp, délimitation d'une zone cliquable sur chaque joueur, pointant sur l'URL d'un article créé par joueur.
Ce que je ne sais pas :
où enregistrer la photo mappée issue de Gimp ?
Un tuto dit "sur internet" ce qui est un peu vague...Et où copier le code html obtenu ?
Merci de tes lumières...
Je débute, sois indulgent et pédagogique :-)))
cordialement
voici les codes, à vous d'adapter, djeel et bobof
et pourquoi demander en privé ?
ça peut intéresser d'autres, alors je mets sur la liste
1- le code intégré directement dans la page sommaire
<div id="carte" >
<div id="curseur" class="infobulle"></div>
<img src="#CHEMIN{images/carte.gif}" width="280" height="350" border="0" usemap="#drome" alt="carte" title="carte" />
<map name="drome" id="drome">
<area shape="rect" coords="66,11,131,25" href="spip.php?rubrique7" alt=""
onmouseover="montre('<BOUCLE_rub7(RUBRIQUES){id_rubrique=7}>#DESCRIPTIF</BOUCLE_rub7>');" onmouseout="cache();" />
<area shape="rect" coords="67,34,105,48" href="spip.php?rubrique2" alt=""
onmouseover="montre('<BOUCLE_rub2(RUBRIQUES){id_rubrique=2}>#DESCRIPTIF</BOUCLE_rub2>');" onmouseout="cache();" />
<area shape="rect" coords="110,102,171,117" href="spip.php?rubrique52" alt=""
onmouseover="montre('<BOUCLE_rub52(RUBRIQUES){id_rubrique=52}>#DESCRIPTIF</BOUCLE_rub52>');" onmouseout="cache();" />
<area shape="rect" coords="113,123,185,137" href="spip.php?rubrique9" alt=""
onmouseover="montre('<BOUCLE_rub9(RUBRIQUES){id_rubrique=9}>#DESCRIPTIF</BOUCLE_rub9>');" onmouseout="cache();" />
<area shape="rect" coords="96,163,158,177" href="spip.php?rubrique4" alt=""
onmouseover="montre('<BOUCLE_rub4(RUBRIQUES){id_rubrique=4}>#DESCRIPTIF</BOUCLE_rub4>');" onmouseout="cache();" />
<area shape="rect" coords="177,158,231,182" href="spip.php?rubrique5" alt=""
onmouseover="montre('<BOUCLE_rub5(RUBRIQUES){id_rubrique=5}>#DESCRIPTIF</BOUCLE_rub5>');" onmouseout="cache();" />
<area shape="rect" coords="188,198,238,211" href="spip.php?rubrique3" alt=""
onmouseover="montre('<BOUCLE_rub3(RUBRIQUES){id_rubrique=3}>#DESCRIPTIF</BOUCLE_rub3>');" onmouseout="cache();" />
<area shape="rect" coords="73,183,138,198" href="spip.php?rubrique8" alt=""
onmouseover="montre('<BOUCLE_rub8(RUBRIQUES){id_rubrique=8}>#DESCRIPTIF</BOUCLE_rub8>');" onmouseout="cache();" />
<area shape="rect" coords="49,250,100,264" href="spip.php?rubrique6" alt=""
onmouseover="montre('<BOUCLE_rub6(RUBRIQUES){id_rubrique=6}>#DESCRIPTIF</BOUCLE_rub6>');" onmouseout="cache();" />
<area shape="rect" coords="101,211,155,232" href="spip.php?rubrique67" alt=""
onmouseover="montre('<BOUCLE_rub67(RUBRIQUES){id_rubrique=67}>#DESCRIPTIF</BOUCLE_rub67>');" onmouseout="cache();" />
</map>
</div><!--fin carte-->
2- les css
#carte{
float:left;
margin-top: 100px;
margin-left: 20px;
width: 300px;
}
.infobulle{
position: absolute; visibility : hidden;
border: 2px outset gray;
padding: 0 5px;
font-size: 10px;
background-color: green;
color:white;
z-index: 10;
}
3- le fichier infobulle.js utilisé piqué je ne sais plus où
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposée par TeDeum, merci à lui
if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
} else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}
function montre(text) {
if(i==false) {
GetId("curseur").style.visibility="visible"; // S'il est caché (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // on copie notre texte dans l' élément html
i=true;
}
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
bonsoir,
merci bien JC
cordialement
Jean-Christophe Villeneuve a écrit :
djeel a écrit :
Jean-Christophe Villeneuve a écrit :
on peut avec une image mappée
j'ai fait un truc du genre avec une carte sur ce site <http://www.villagesbotaniques.fr/>
si ça t'intéresse, je te file les fichiers et tu adaptesSalut le drômois !
perdu, je suis stéphanois d'adoption, c'est le site d'un copain
Voici ce que j'ai fait :
une photo d'équipe
dans Gimp, délimitation d'une zone cliquable sur chaque joueur, pointant sur l'URL d'un article créé par joueur.
Ce que je ne sais pas :
où enregistrer la photo mappée issue de Gimp ?
Un tuto dit "sur internet" ce qui est un peu vague...Et où copier le code html obtenu ?
Merci de tes lumières...
Je débute, sois indulgent et pédagogique :-)))
cordialementvoici les codes, à vous d'adapter, djeel et bobof
et pourquoi demander en privé ?
ça peut intéresser d'autres, alors je mets sur la liste1- le code intégré directement dans la page sommaire
<div id="carte" >
<div id="curseur" class="infobulle"></div>
<img src="#CHEMIN{images/carte.gif}" width="280" height="350" border="0" usemap="#drome" alt="carte" title="carte" /><map name="drome" id="drome">
<area shape="rect" coords="66,11,131,25" href="spip.php?rubrique7" alt=""
onmouseover="montre('<BOUCLE_rub7(RUBRIQUES){id_rubrique=7}>#DESCRIPTIF</BOUCLE_rub7>');" onmouseout="cache();" />
<area shape="rect" coords="67,34,105,48" href="spip.php?rubrique2" alt=""
onmouseover="montre('<BOUCLE_rub2(RUBRIQUES){id_rubrique=2}>#DESCRIPTIF</BOUCLE_rub2>');" onmouseout="cache();" />
<area shape="rect" coords="110,102,171,117" href="spip.php?rubrique52" alt=""
onmouseover="montre('<BOUCLE_rub52(RUBRIQUES){id_rubrique=52}>#DESCRIPTIF</BOUCLE_rub52>');" onmouseout="cache();" />
<area shape="rect" coords="113,123,185,137" href="spip.php?rubrique9" alt=""
onmouseover="montre('<BOUCLE_rub9(RUBRIQUES){id_rubrique=9}>#DESCRIPTIF</BOUCLE_rub9>');" onmouseout="cache();" />
<area shape="rect" coords="96,163,158,177" href="spip.php?rubrique4" alt=""
onmouseover="montre('<BOUCLE_rub4(RUBRIQUES){id_rubrique=4}>#DESCRIPTIF</BOUCLE_rub4>');" onmouseout="cache();" />
<area shape="rect" coords="177,158,231,182" href="spip.php?rubrique5" alt=""
onmouseover="montre('<BOUCLE_rub5(RUBRIQUES){id_rubrique=5}>#DESCRIPTIF</BOUCLE_rub5>');" onmouseout="cache();" />
<area shape="rect" coords="188,198,238,211" href="spip.php?rubrique3" alt=""
onmouseover="montre('<BOUCLE_rub3(RUBRIQUES){id_rubrique=3}>#DESCRIPTIF</BOUCLE_rub3>');" onmouseout="cache();" />
<area shape="rect" coords="73,183,138,198" href="spip.php?rubrique8" alt=""
onmouseover="montre('<BOUCLE_rub8(RUBRIQUES){id_rubrique=8}>#DESCRIPTIF</BOUCLE_rub8>');" onmouseout="cache();" />
<area shape="rect" coords="49,250,100,264" href="spip.php?rubrique6" alt=""
onmouseover="montre('<BOUCLE_rub6(RUBRIQUES){id_rubrique=6}>#DESCRIPTIF</BOUCLE_rub6>');" onmouseout="cache();" />
<area shape="rect" coords="101,211,155,232" href="spip.php?rubrique67" alt=""
onmouseover="montre('<BOUCLE_rub67(RUBRIQUES){id_rubrique=67}>#DESCRIPTIF</BOUCLE_rub67>');" onmouseout="cache();" />
</map></div><!--fin carte-->
2- les css
#carte{
float:left;
margin-top: 100px;
margin-left: 20px;
width: 300px;
}..infobulle{
position: absolute; visibility : hidden;
border: 2px outset gray;
padding: 0 5px;
font-size: 10px;
background-color: green;
color:white;
z-index: 10;
}3- le fichier infobulle.js utilisé piqué je ne sais plus où
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou nonfunction move(e) {
if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposée par TeDeum, merci à lui
if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
} else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}function montre(text) {
if(i==false) {
GetId("curseur").style.visibility="visible"; // S'il est caché (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // on copie notre texte dans l' élément html
i=true;
}
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
i=false;
}
document.onmousemove=move; // dès que la souris bouge, on appelle la fonction move pour mettre à jour la position de la bulle.
--
Signalez vos spams d'un simple clic. www.signal-spam.fr
<https://www.signal-spam.fr/>
Jean-Christophe Villeneuve a écrit :
perdu, je suis stéphanois d'adoption, c'est le site d'un copain
Y a pas de honte à être stéphanois ;-)))
Même si, drômois comme ton ami et moi, c'est mieux.
voici les codes, à vous d'adapter, djeel et bobof
et pourquoi demander en privé ?
Parce que j'ai reçu ton message en privé ; mais j'ai bien aussi demandé sur ce forum.
ça peut intéresser d'autres, alors je mets sur la liste
Bien sûr, merci beaucoup !
1- le code intégré directement dans la page sommaire
Dans mon cas, la photo devrait être dans un article ; où dois-je mettre ce code (il s'agit bien du code obtenu dans Gimp) ?
2- les css
3- le fichier infobulle.js utilisé piqué je ne sais plus où
Ca, je ne comprends pas du tout ;-(((
Merci de ton aide...
--
Djeel
* Jean-Christophe Villeneuve tapuscrivait, le 29/11/2009 19:19:
<area shape="rect" coords="66,11,131,25" href="spip.php?rubrique7" alt=""
Si tu veux un truc portable en fonction des URLs, il faut utiliser #URL_RUBRIQUE{7}
--
RealET
djeel a écrit :
Jean-Christophe Villeneuve a écrit :
perdu, je suis stéphanois d'adoption, c'est le site d'un copain
Y a pas de honte à être stéphanois ;-)))
Même si, drômois comme ton ami et moi, c'est mieux.voici les codes, à vous d'adapter, djeel et bobof
et pourquoi demander en privé ?Parce que j'ai reçu ton message en privé ; mais j'ai bien aussi demandé sur ce forum.
ça peut intéresser d'autres, alors je mets sur la liste
Bien sûr, merci beaucoup !
1- le code intégré directement dans la page sommaire
Dans mon cas, la photo devrait être dans un article ; où dois-je mettre ce code (il s'agit bien du code obtenu dans Gimp) ?
je ne suis pas sur de moi mais j'essaierais de le mettre dans le texte de l'article (à tester)
attention à bien un nom de usemap commençant par une minuscule
exemple
usemap="#drome" ok
usemap="#Drome" pas bon
2- les css
3- le fichier infobulle.js utilisé piqué je ne sais plus oùCa, je ne comprends pas du tout ;-(((
Merci de ton aide...
le fichier javascript, c'est pour gérer les infobulles qui apparaissent au passage de la souris
à toi de voir si tu en as besoin
bien mettre
<div id="curseur" class="infobulle"></div>
avant l'appel de l'image pour que ça fonctionne
et appeler ce script dans la partie head avec
<script language="JavaScript" type="text/javaScript" src="#CHEMIN{script/infobulle.js}"></script>
si tu mets le fichier dans le dossier /squelettes/script
Jean-Christophe Villeneuve a écrit :
je ne suis pas sur de moi mais j'essaierais de le mettre dans le texte de l'article (à tester)
attention à bien un nom de usemap commençant par une minuscule
exemple
usemap="#drome" ok
usemap="#Drome" pas bon
Bon, ça ne marche pas encore.
Voici ce que j'ai fait :
utilisation de Gimp pour créer des zones cliquables sur ma photo
obtention d'un code javascript
création dans spip d'un article pour mettre l'image et le code js
(les autres articles qui doivent s'ouvrir aux clicks de la souris ont déjà été crées)
Je ne sais pas trop quelle image ajouter dans l'article de base : spip ne veut pas de l'image en .map, j'ai donc mis l'image de départ, la photo sans modif
Je mets mon code js en annexe, en espérant que tu pourras y jeter un coup d'oeil.
Je ne sais pas s'il faut remplacer le mot "map" dans le code par autre chose...
Merci de ton aide...
2- les css
3- le fichier infobulle.js utilisé piqué je ne sais plus oùCa, je ne comprends pas du tout ;-(((
Merci de ton aide...
le fichier javascript, c'est pour gérer les infobulles qui apparaissent au passage de la souris
à toi de voir si tu en as besoin
bien mettre
<div id="curseur" class="infobulle"></div>
avant l'appel de l'image pour que ça fonctionne
et appeler ce script dans la partie head avec
<script language="JavaScript" type="text/javaScript" src="#CHEMIN{script/infobulle.js}"></script>
si tu mets le fichier dans le dossier /squelettes/script
--
Djeel
equipe1b.html (1.75 KB)
audwill a écrit :
j'ai pas testé de solution "spip" mais a priori y'a une piste sur
spip-contrib : Plugin Image Cliquable - SPIP-Contrib
Merci de ton aide !
Il ne semble pas compatible avec spip 2.0.10
--
Djeel
bonjour,
je ne suis pas forcement de ton avis , as tu essayé au moins ?
dans le forum de l’article du plugin 4 ou 5ème message y a (extrait):
Bonjour,
Je serais toi, à la place de :
http://djeel.free.fr/?Jean-Luc-PAGES&var_mode=calcul
Je mettrais #URL_AUTEUR{xx} xx étant l'id de l'auteur
Ensuite où peut on voir ton image et le code associé?
Bernrd
djeel a écrit :
Jean-Christophe Villeneuve a écrit :
je ne suis pas sur de moi mais j'essaierais de le mettre dans le texte de l'article (à tester)
attention à bien un nom de usemap commençant par une minuscule
exemple
usemap="#drome" ok
usemap="#Drome" pas bonBon, ça ne marche pas encore.
Voici ce que j'ai fait :
utilisation de Gimp pour créer des zones cliquables sur ma photo
obtention d'un code javascript
création dans spip d'un article pour mettre l'image et le code js
(les autres articles qui doivent s'ouvrir aux clicks de la souris ont déjà été crées)
Je ne sais pas trop quelle image ajouter dans l'article de base : spip ne veut pas de l'image en .map, j'ai donc mis l'image de départ, la photo sans modif
Je mets mon code js en annexe, en espérant que tu pourras y jeter un coup d'oeil.
Je ne sais pas s'il faut remplacer le mot "map" dans le code par autre chose...
Merci de ton aide...2- les css
3- le fichier infobulle.js utilisé piqué je ne sais plus oùCa, je ne comprends pas du tout ;-(((
Merci de ton aide...
le fichier javascript, c'est pour gérer les infobulles qui apparaissent au passage de la souris
à toi de voir si tu en as besoin
bien mettre
<div id="curseur" class="infobulle"></div>
avant l'appel de l'image pour que ça fonctionne
et appeler ce script dans la partie head avec
<script language="JavaScript" type="text/javaScript" src="#CHEMIN{script/infobulle.js}"></script>
si tu mets le fichier dans le dossier /squelettes/script------------------------------------------------------------------------
------------------------------------------------------------------------
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.netInfos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.netDocumentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
--
Bernard Blazin - Développement Internet Ingénieur ENSAM promo 1978
Bernard Blazin Point Com
9 rue de la Rose
77320 Montolivet
Tel 01 64 20 98 49
http://www.bernardblazin.com
Bernard Blazin a écrit :
Je serais toi, à la place de :
http://djeel.free.fr/?Jean-Luc-PAGES&var_mode=calcul
Je mettrais #URL_AUTEUR{xx} xx étant l'id de l'auteur
Oui, je n'étais pas sûr de ce que je faisais !
J'ai remarqué que sous spip, l'url de l'article n'est pas le même quans on est en mode privé et en mode fréquantation du site sdur le net.
Je ne comprends pas ce que tu veux dire avec xx étant l'd de l'auteur !
C'est quoi l'id de l'auteur ?
Ensuite où peut on voir ton image et le code associé?
http://djeel.free.fr/?esssai-plugin-image-cliquable&var_mode=recalcul
le code est dans le fichier joint
Merci de ton aide...
--
Djeel
equipe1b.html (1.75 KB)
djeel a écrit :
http://djeel.free.fr/?esssai-plugin-image-cliquable&var_mode=recalcul
désolé, la bone url est
http://djeel.free.fr/?essai-photo-mappee
--
Djeel
Tes liens m'amène directement vers une erreur 404.
Quand je parle de l'ID_AUTEUR c'est son identifiant dans SPIP. A priori tu doit avoir l'#ID_AUTEUR 1 puisque tu es celui qui a installé le site.
Regarde dans la liste de tes auteurs depuis l'espace privé et tu auras leur id_auteur. Donc pour toi ce serait #URL_AUTEUR{1}, si ton but est bien de faire un lien vers la page de l'auteur concerné
Bernard
djeel a écrit :
djeel a écrit :
http://djeel.free.fr/?esssai-plugin-image-cliquable&var_mode=recalcul
désolé, la bone url est
http://djeel.free.fr/?essai-photo-mappee
--
Bernard Blazin - Développement Internet Ingénieur ENSAM promo 1978
Bernard Blazin Point Com
9 rue de la Rose
77320 Montolivet
Tel 01 64 20 98 49
http://www.bernardblazin.com
djeel a écrit :
djeel a écrit :
http://djeel.free.fr/?esssai-plugin-image-cliquable&var_mode=recalcul
désolé, la bone url est
http://djeel.free.fr/?essai-photo-mappee
erreur 404 dans les 2 cas
Où se trouve l'image equipe1b.jpg ?
Je ne suis pas certain que <img src="equipe1b.jpg" ... > soit le bon chemin
Bernard
djeel a écrit :
djeel a écrit :
http://djeel.free.fr/?esssai-plugin-image-cliquable&var_mode=recalcul
désolé, la bone url est
http://djeel.free.fr/?essai-photo-mappee
--
Bernard Blazin - Développement Internet Ingénieur ENSAM promo 1978
Bernard Blazin Point Com
9 rue de la Rose
77320 Montolivet
Tel 01 64 20 98 49
http://www.bernardblazin.com
Bernard Blazin a écrit :
Donc pour toi ce serait #URL_AUTEUR{1}, si ton but est bien de faire un lien vers la page de l'auteur concerné
Non, il s'agit d'une photo d'équipe, et chaque clic sur un des joueurs de la photo ouvre un article avec la bio du joueur
et http://djeel.free.fr/, ça ne marche pas non plus ?
--
Djeel
Jean-Christophe Villeneuve a écrit :
erreur 404 dans les 2 cas
et http://djeel.free.fr/, ça ne marche pas non plus ?
--
Djeel