Plusieurs rollovers sur une image de fond [Résolu]

Signaler
Messages postés
9
Date d'inscription
mardi 12 décembre 2000
Statut
Membre
Dernière intervention
10 juillet 2008
-
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
-
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

14 réponses

Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
129
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"
Messages postés
9
Date d'inscription
mardi 12 décembre 2000
Statut
Membre
Dernière intervention
10 juillet 2008

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
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]
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
129
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
Messages postés
9
Date d'inscription
mardi 12 décembre 2000
Statut
Membre
Dernière intervention
10 juillet 2008

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....)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
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]
Messages postés
9
Date d'inscription
mardi 12 décembre 2000
Statut
Membre
Dernière intervention
10 juillet 2008

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?
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
34
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]
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
129
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
Messages postés
9
Date d'inscription
mardi 12 décembre 2000
Statut
Membre
Dernière intervention
10 juillet 2008

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...
Messages postés
9
Date d'inscription
mardi 12 décembre 2000
Statut
Membre
Dernière intervention
10 juillet 2008

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)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>

</head>




<map name="carte">


</map>





</html>
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
129
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/

<HTML>
<HEAD>
<TITLE>Not to far from here...</TITLE>
<script>
function image_visible(image_visible) {
document.getElementById(image_visible).style.visibility='visible'
 }
 function image_invisible(image_invisible) {
document.getElementById(image_invisible).style.visibility='hidden'
 }
</script>
</HEAD>

<center>

</center>
<MAP NAME="CountryLake">
<!-- #$-:Image Map file created by Map THIS! -->

</MAP>

</HTML>

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 ).
Messages postés
9
Date d'inscription
mardi 12 décembre 2000
Statut
Membre
Dernière intervention
10 juillet 2008

ç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
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
129
nickel

a+