plusieurs rollovers sur une image de fondRésolu

Question

bonjour

je souhaiterais creer sur mon site l' effet dynamique suivant:

photo d'une chambre en arriere plan (avec un meuble) et lorsque la souris passe sur un tiroir du meuble celui-ci s'ouvre 
j'ai pense au rollover mais je n'arrive pas à creer le code
pouvez vous m'aider?
merci pour vos réponses

@karamel · Accepted Answer

ne fait pas de rollover positione ton image de tiroir ouvert a l'endroit desire donne lui le style document.getElementById('mon_tiroir').style.visibility=="hidden" et ensuitetu fait:
onmouseover=document.getElementById('mon_tiroir').style.visibility='visible';
puis
onmouseout=document.getElementById('mon_tiroir').style.visibility=="hidden"

sebplan · Answer

cs_bultez · Answer

Bonjour,
ça ne va pas être si simple que ça...
un lien pour commencer à dépiauter chez selfHTML
ou alors va falloir faire plusieurs images pour constituer ton "fond"
enfi, me semble-t-il... peut-être oublie-je des possibilités...
<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

@karamel · Answer

la map c'est un bonne idee et il faudra ensuite que tu positionne les autres image en position relative et que tu joue avec la visibilite (onmouseover style.visibility=)par contre si tu veut que tout cela marche integre les dan un div (map et image) et il faudra que l'image est une taille constante si l'image doit prendre tout l'ecran en se rapelant qu'il y a plusieur resolution possible il y aurra plus de boulot

sebplan · Answer

serait il possible de fractionner l'image avec gimp (les tiroirs seraient les zones  cliquables) et de creer ensuite les rollovers...
j'ai créé 4 images (une tiroirs fermé, une autre tiroir du haut ouvert une autre tiroir du milieu ouvert....)

cs_bultez · Answer

n'importe quel outil de dessin basique te permettra de séparer une image en n parties.
quelques copiés/collé et basta...
après ce sera des balises Bul         [mon Site]     [M'écrire]

sebplan · Answer

je pense que je vais decouper mon image initiales en 3...par contre comment faire pour que sur ma page internet elle n'en paraisse qu'une (les coordonées) je travaille avec gimp2
pouvez vous me donner un coup de main?

cs_bultez · Answer

connait pas gimp2.

pour positionner : le css.

regarder 
position:relative ou absolute
top:position verticale
left:position horizontale
et/ou float:left... par exemple

une doc chez selfHTML

<hr />                Cordialement             Bul         [mon Site]     [M'écrire]

@karamel · Answer

utilise les map il existe des  petits programme gratuit pour editer des image afin de cree une image map fait une recherche sinon etudie le css le dom et le javascript

sebplan · Answer

je suis désespéré!!!, j'ai finalement opté pour la "map" mais je n'arrive pas à faire de rollover sur les "arrea" que je crée 
est ce que quelqu'un peut m'aider j'ai l'impression de me noyer dans un verre d'eau...

sebplan · Answer

merci beaucoup pour ta réponse kasma, tu va trouver que j'abuse mais pourrais tu me donner un exemple de code car je débute vraiment et je n'arrive pas à intégrer le code que tu m'as donné voici le debut de ce que j'ai tapé (pour te donner une idee) Texte du titre

@karamel · Answer

pour c'ette exemple pour cree une map j'ai utilise MapThis c'est un tres vieux logiciel mais toujour aussi performant et simple http://www.abdn.ac.uk/tools/ibmpc/mapthis/ Not to far from here... j'ai utilise comme image pour cette exemple l'image de demo compris dans map this celle ou il y a un lac avec des personnage clic sur la femme pour voir le script fonctionner n'oublie pas de rajouter une petite image quelconque pour l'exemple je lui ai mis comme nom ( grilled.jpg ).

sebplan · Answer

ça y est enfin !!!!
merci beaucoup à Kasma et aux autres pour vos réponses car je n'aurais pas reussit sans votre aide...

voilà ce que ça donne: http://plantard.sebastien.neuf.fr/
 (seul hic, l'image du haut n'apparait pas sur firefox)
ça doit vous paraitre un peu basique comme site mais pour un débutant comme moi c'est compliqué à faire...
merci encore pour votre aide

@karamel · Answer

nickel

a+

Plusieurs rollovers sur une image de fond

14 réponses

Votre réponse

Discussions similaires