PHPBoost
Support
Téléchargements
Développement
Communauté
Accueil
Forum PHPBoost
Développement
Développement du noyau
Faire apparaître une image avec un passage de souris
Forum PHPBoost
Développement
Développement du noyau
Faire apparaître une image avec un passage de souris
Forum PHPBoost
Bonjour,
Sur une page j'ai une carte avec des noms de lieux.
En dessous de la carte j'ai des boutons.
Je voudrais créer l'application suivante :
Le fait de passer la souris sur un bouton permet de faire apparaître des images sur des lieux définis sur la carte (une image par lieu).
Si quelqu'un a une solution, je l'en remercie.
kouedic
Sur une page j'ai une carte avec des noms de lieux.
En dessous de la carte j'ai des boutons.
Je voudrais créer l'application suivante :
Le fait de passer la souris sur un bouton permet de faire apparaître des images sur des lieux définis sur la carte (une image par lieu).
Si quelqu'un a une solution, je l'en remercie.
kouedic
Si c'est l'évenement :hover que tu veux c'est très simple.
http://innovablog.com/design/design-css-rollover-css-image/
http://css.mammouthland.net/rollover_css.php
http://innovablog.com/design/design-css-rollover-css-image/
http://css.mammouthland.net/rollover_css.php
____________________
Comtois, rends toi! Neni ma foi!
Comtois, rends toi! Neni ma foi!
Il faut utiliser du Javascript. L'événement onClick de chaque bouton doit activer l'affichage des images correspondantes.
Comment est la carte ?
Comment est la carte ?
____________________
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
"There are two ways to write error-free programs; only the third works."
Je joins une maquette de la carte en question.
Pour l'application il y a par exemple un bouton "Arts et traditions"
En passant dessus avec la souris il s'affiche une image à chaque emplacement 1, 11, 3 et 6 ce qui correspond aux musées qui traitent de ce sujet.
Edité par kouedic Le 19/06/09 à 09h17
Pour l'application il y a par exemple un bouton "Arts et traditions"
En passant dessus avec la souris il s'affiche une image à chaque emplacement 1, 11, 3 et 6 ce qui correspond aux musées qui traitent de ce sujet.
Edité par kouedic Le 19/06/09 à 09h17
Comment est conçue la carte ?
Une image de fond avec des images qui sont positionnées par dessus ?
Une image de fond avec des images qui sont positionnées par dessus ?
____________________
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
"There are two ways to write error-free programs; only the third works."
C'est cela une image de fond avec des images positionnées dessus
Il faudrais soit utilisé la balise <map> , ou alors essayé de faire des cellules, et de découper ta carte en fonction de ça.
____________________
Comtois, rends toi! Neni ma foi!
Comtois, rends toi! Neni ma foi!
Non pas du tout.
Tu identifies tes images avec un id, par exemple image_3.
Sur l'événement onClick de chaque bouton, tu caches toutes les images puis tu affiches uniquement celles qui sont liées au bouton.
Pour cela, tu fais un
Tu n'as qu'à faire une boucle sur les numéros des images à afficher et tu les affiches.
J'ai été suffisamment clair ?
Tu identifies tes images avec un id, par exemple image_3.
Sur l'événement onClick de chaque bouton, tu caches toutes les images puis tu affiches uniquement celles qui sont liées au bouton.
Pour cela, tu fais un
document.getElementById("image_" + numero).style.display = "none";pour cacher l'image numero et
document.getElementById("image_" + numero).style.display = "block";pour l'afficher.
Tu n'as qu'à faire une boucle sur les numéros des images à afficher et tu les affiches.
J'ai été suffisamment clair ?
____________________
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
"There are two ways to write error-free programs; only the third works."
J'ai compris le principe mais, ne connaissant la programmation, l'application m'est plus difficile.
OK pour l'identification des images.
Mes questions :
comment lier le document au bouton
je n'ai pas les compétences pour écrire du code
Si ce n'est pas trop demandé merci d'écrire le code
OK pour l'identification des images.
Mes questions :
comment lier le document au bouton
je n'ai pas les compétences pour écrire du code
Si ce n'est pas trop demandé merci d'écrire le code
Petit détail il veut que ça se produise lors du survol de la souris ça n'est donc pas onclick, mais onmouseover (pas de majuscule au passage => erreur xhtml sinon).
Moi je ferai une image map avec des onmouseover sur les différentes images, c'est le plus simple
Moi je ferai une image map avec des onmouseover sur les différentes images, c'est le plus simple
____________________
Pas de support par messages privés! Pensez à mettre vos messages en réglé en cliquant sur le bouton réglé!
Pas de support par messages privés! Pensez à mettre vos messages en réglé en cliquant sur le bouton réglé!
Oups, j'avais mal lu pour le onclick.
Par contre, une map ça suffira pas puisqu'il veut que lorsque tu passes sur un bouton ça affiche sur la carte toutes les images ayant un lien avec le bouton alors que ce que tu proposes, si j'ai bien compris, c'est d'afficher l'image quand on passe dessus.
Par contre, une map ça suffira pas puisqu'il veut que lorsque tu passes sur un bouton ça affiche sur la carte toutes les images ayant un lien avec le bouton alors que ce que tu proposes, si j'ai bien compris, c'est d'afficher l'image quand on passe dessus.
____________________
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
Un problème, une question ? Cherchez dans la FAQ ou la documentation. Si vous ne trouvez pas la réponse, demandez du support sur le forum.
Bjarne Stroustrup, inventeur du C++:
"There are two ways to write error-free programs; only the third works."
C'est bien en survolant avec la souris
Effectivement j'ai mal lu aussi, il ne faut pas utiliser une imagemap.
Il faut utiliser une image de fond, plusieurs images bien placée et cachée par défaut (style="display:none), et sur les boutons faire un onmouseover qui appel une fonction qui change le style des images concernée en display:block.
Il faut mettre également un onmouseout qui appel une fonction qui cache toutes les images affichées.
Il faut utiliser une image de fond, plusieurs images bien placée et cachée par défaut (style="display:none), et sur les boutons faire un onmouseover qui appel une fonction qui change le style des images concernée en display:block.
Il faut mettre également un onmouseout qui appel une fonction qui cache toutes les images affichées.
____________________
Pas de support par messages privés! Pensez à mettre vos messages en réglé en cliquant sur le bouton réglé!
Pas de support par messages privés! Pensez à mettre vos messages en réglé en cliquant sur le bouton réglé!
J'ai réalisé une maquette avec
2 images : maison des bouquetins et hydrelec
un bouton : Arts et traditions
avec le code suivant :
Code BBCODE :
Cela facilitera peut être la réalisation du code
Edité par kouedic Le 21/06/09 à 23h18
2 images : maison des bouquetins et hydrelec
un bouton : Arts et traditions
avec le code suivant :
Code BBCODE :
[table style="width:100%; border:white"][row][col style="width:100%; border:white;background : url(http://localhost/PHPBoost_2.0/templates/main_sperstar/images/rco.jpg) no-repeat"] [color=white].............................[/color] [img]http://localhost/phpboost_2.0/templates/main_sperstar/images/image01.jpg[/img] [color=white]..............................[/color][img]http://localhost/phpboost_2.0/templates/main_sperstar/images/image02.jpg[/img] [/col][/row][row][col style="width:48%; border:white"][img]http://localhost/phpboost_2.0/templates/main_sperstar/images/bouton.jpg[/img] [/col][/row][/table]
Cela facilitera peut être la réalisation du code
Edité par kouedic Le 21/06/09 à 23h18
Tu n'y arrivera pas à le faire en bbcode, il faut le faire en html et l'inclure dans la balise [html]
____________________
Pas de support par messages privés! Pensez à mettre vos messages en réglé en cliquant sur le bouton réglé!
Pas de support par messages privés! Pensez à mettre vos messages en réglé en cliquant sur le bouton réglé!
1 Utilisateur en ligne :: 0 Administrateur, 0 Modérateur, 0 Membre et 1 Visiteur
Utilisateur en ligne: Aucun membre connecté
Utilisateur en ligne: Aucun membre connecté
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie