Image Map + onmouseover avec 2 actions
Image Map + onmouseover avec 2 actions - HTML/CSS - Programmation
Marsh Posté le 01-02-2006 à 23:24:50
http://forum.hardware.fr/hardwaref [...] 4743-1.htm
Tiens ceci peu peut être bien t'aider... 
Message édité par xtof_83 le 01-02-2006 à 23:25:19
Marsh Posté le 01-02-2006 à 23:39:06
Humm ça semble beaucoup plus propre sans le javascript c vrai.
Mais le problème est que j'ai beaucoup de choses à faire en meme temps, au passage de la souris, c pour cela que je epnsais le javascript plus efficace.
En plus une fois que le passage de souris fais afficher un menu, j'ai besoin que ce menu reste visible tant que l'on est pas passé sur un autre bloc.
Car il faut ensuite que l'utilisateur puisse cliquer sur l'un des liens du menu.
---------------
Galerie photos
Marsh Posté le 01-02-2006 à 23:51:37
Ouais sur
Mais te permetrais déjà de pas surchargé ta page..et d'utiliser js juste pour les menus secondaires
Marsh Posté le 01-02-2006 à 23:58:57
vip c vrai !!
Faire le rollover en css et le menu en .js
Mais il me reste à placer intelligement ces menus, parce que pour le moment, j'y pense très mal 
---------------
Galerie photos
Marsh Posté le 02-02-2006 à 00:13:49
Je crois avoir réussi !!
C'est toujours assez sale, mais en mettant un position:absolute il accepte de me supperposer mes div menu 
---------------
Galerie photos
Marsh Posté le 03-02-2006 à 19:07:18
Finalement l'affichage était totalement différent sous IE et firefox.
J'ai tout refait et ça semble correct pour le moment.
(à voir ici)
Maintenant j'ai un autre problème, je dois réussir à gérer le déplacement de la souris....
Je pensais procéder de la manière suivante :
Lorsque l'utilisateur passe sur un cube le menu s'affiche pendant 2s et l'image est modifiée.
Si l'utilisateur passe sur un autre cube pendant plus de 0,1s, alors j'affiche l'autre menu et je modifie l'image, sinon je continue.
Il faut réussir à laisser à l'utilisateur le temps d'atteindre le menu, mais il doit aussi avoir la possibilité d'afficher un autre menu rapidement.
Le problème est de détecter si l'utilisateur passe juste au dessus d'un cube pour atteindre le menu ou s'il passe sur un cube pour voir afficher le menu correspondant.... ![[:urd]](https://forum-images.hardware.fr/images/perso/urd.gif "[:urd]")
Merci pour votre aide.
Message édité par Jinroh le 03-02-2006 à 19:11:12
---------------
Galerie photos
Sujets relatifs:
- probleme affichage image
- [GDI+] Image et Frames : comment ça marche ?
- [Java ]Déplacer une image
- accéder un a un pixel d'une image sous C++builder(borland)
- Encodage d'une image au format jpg
- clic sur une image en php
- Software d'édition d'image sous RedHat en ligne de commande
- [php] image et rtf
- Redimensionner une image à partir de 4 points (et non 2)
- [css] Zoom sur une image
Marsh Posté le 01-02-2006 à 23:10:00
Bonjour à tous
Je suis en train d'essayer de faire mumuse avec du CSS et du javascript pour une page d'acceuil.
J'explique rapidement :
J'ai une image composé de 5 cubes.
Je souhaite, au passage de souris sur chaque cube, que
1/ l'image change (c ok)
2/ Un menu différent pour chaque cube s'affiche sur la gauche
Pour faire cela je pensais faire mes 5 div de menu, les mettre en visibility:hidden et les passer en visible au passage de souris.
Ce qui m'embete dans mon raisonement est que les 5 menus ont exactement le même placement CSS mais uniquement un texte à l'intérieur qui change...
Et pour le moent je n'ai rien trouvé de plus intelligent que de repeter 5 fois le meme div.
Malheureusement, uniquement le premier menu (dans l'ordre du code HTML s'affiche)
Je vous montre un peu ce que ça donne :
Javascript
var ima=new Array(5); // création d'1 tableau d'objets Image
for (var i=0;i<5;i++) {
ima[i]=new Image();
ima[i].src='images/gravure_'+i+'.jpg';
}
function flip(n) //Pour changer les images {
document.images['gravure'].src='images/gravure_'+n+'.jpg';
}
function showmenu(n) {
if(document.getElementById)
document.getElementById('menu_'+n+'').style.visibility = 'visible';
}
function closemenu(n) {
if(document.getElementById)
document.getElementById('menu_'+n+'').style.visibility = 'hidden';
}
<map name="map_gravure" id="map_gravure">
<area shape="rect" coords="143,40,237,113" href="#" alt="compagnie" onMouseOver="flip(1);showmenu(1);" onMouseOut="flip(0);closemenu(1);" />
<area shape="rect" coords="106,142,216,225" href="#" alt="spectacles" onMouseOver="flip(2);showmenu(2);" onMouseOut="flip(0);closemenu(2);" />
</map>
<img src="images/gravure_0.jpg" name="gravure" alt="La compagnie du sarment" align="middle" usemap="#map_gravure" id="map_gravure" />
<div id="menu_2">
<p>spectacle 1</p>
<p>spectacle 2</p>
</div>
<div id="menu_1">
<p>la compagnie<p>
<p>sarment mag</p>
<p>parcours</p>
</div>
Et dans ce cas il n'y aura que le menu 2 qui s'affiche.
Je précise encore que les #menu_1 et "menu_2 sont (et c une bétise) strictement identique. Mais je ne sais aps comment distinguer le texte à l'intérieur autrement.
Voici ce que je suis en train de tester (il n'y a que les 2 cubes de gauche fonctionnel)
Merci beaucoup à vous
Message édité par Jinroh le 01-02-2006 à 23:10:50
---------------
Galerie photos