Image réactive ajustée à la résolution

Version imprimable

Bonjour,
je cherche à adapter une image à la résolution de l'écran, ce qui fonctionne avec ceci :

Code:

img.image_fond {position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}

mais par contre je n'ai plus l'image réactive au passage de la souris (si j'enlève le CSS, l'image réactive fonctionne bien...)
Merci de votre aide !

html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <map name="map"> <area shape="rect" coords="1124,506,1158,904" alt="image1" href="#" title="image1" onmouseover="nouvelle_image.src='image3.jpg'" onmouseout="nouvelle_image.src='image1.jpg';" /> <area shape="rect" coords="822,636,1006,736" alt="image2" href="#" title="image2" onmouseover="nouvelle_image.src='image4.jpg'" onmouseout="nouvelle_image.src='image1.jpg';" /> </map> <img src="image1.jpg" border="0" usemap="#map" name="nouvelle_image" class="image_fond" /> <img style="display:none"src="image3.jpg" class="image_fond" /> <img style="display:none"src="image4.jpg" class="image_fond" />

26/09/2012, 18h26
NoSmoking

Bonjour,
et en supprimant le z-index:-1;?

en mettant l'image dans un div :
Code:

1 2 3 4 5 6 7 8 9 <style> #image_fond {position:relative;top:0;left:0;width:auto;height:auto;} #image_fond img{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;} </style> <div id="image_fond"> <img src="image.jpg" border="0" usemap="#map" name="nouvelle_image" /> <img style="display:none"src="image2.jpg" /> ..... </div>
cela fonctionne ( ajustement de l'image + zone réactive )

MAIS...
le problème est que la zone réactive se déplace sur l'écran et donc n'est plus au bon endroit sur l'image...

Code:

<area shape="rect" coords="1124,506,1158,904"...

j'ai essayé des % sur les coordonnées."coords"...sans succès...
j'ai lu que c'était impossible d'indiquer des pourcentage...?
il n'y a pas d'autres solutions pour adapter la zone réactive à la résolution ?
Merci :roll:

27/09/2012, 19h37
NoSmoking

Si ton image s'adapte à a largeur/hauteur de la DIV conteneur tu ne peux pas utiliser de MAP.

Comme ta zone réactive est un rectangle, une solution consisterait à mettre une DIV par dessus, positionnée en %, et de lui affecter la réaction.

Bonjour,

j'ai trouvé.. mais avec Jquery & ImageMapster
http://www.outsharked.com/imagemapster/

html :

Code:

1
2
3
4
5
6
7
8
9
10
<div id="contenu"><!-- DEBUT contenu de l'image -->
<map name="mon_map">
	<area shape="rect" data-name="numero1" coords="1124,506,1158,904" href="#" alt="image1" href="#"  title="image1">
	....
</map>
<div id="image_reactive" ><!-- DEBUT image_reactive -->
<script>$(window).bind('resize');</script><!-- Appel au script pour adapter l'image -->
<div><img id="mon_image" src="image1.jpg" usemap="#mon_map" alt="" /></div>
</div><!-- FIN image_reactive -->
</div><!-- FIN contenu de l'image -->

et le Jquery qui va bien :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script type="text/javascript" src="jquery_min_182.js"></script><!-- jquery_min_1 8 2 -->
<script type="text/javascript" src="jquery_imagemapster.js"></script><!--  ImageMapster 1.2.6 -->
 
<script type="text/javascript" ><!-- DEBUT redimensionne l'image -->
$(document).ready(function () {
var resizeTime = 100;    // total duration of the resize effect, 0 is instant
var resizeDelay = 100;	// time to wait before checking the window size again  the shorter the time, the more reactive it will be
						// short or 0 times could cause problems with old browsers.
// Redimensionner la carte pour s'adapter à l'interieur des limites prevues
function resize(maxWidth,maxHeight) {
     var image =  $('#mon_image'),
        imgWidth = image.width(),
        imgHeight = image.height(),
        newWidth=0,
        newHeight=0;
 
    if (imgWidth/maxWidth>imgHeight/maxHeight) {
        newWidth = maxWidth;
    } else {
        newHeight = maxHeight;
    }
    image.mapster('resize',newWidth,newHeight,resizeTime);   
}
// Sur les evenements de redimensionnement des fenetres : appel du redimensionnement de la carte quand la fenetre n'est plus redimensionnee
function onWindowResize() 
{
    var curWidth = $(window).width(),
        curHeight = $(window).height(),
        checking=false;
    if (checking) {return;}
    checking = true;
    window.setTimeout(function()
	{
        var newWidth = $(window).width(),
           newHeight = $(window).height();
        if (newWidth === curWidth &&
            newHeight === curHeight) 
			{
				resize(newWidth,newHeight);
			}
			checking=false;
    },resizeDelay );
}
$(window).bind('resize',onWindowResize);
});
</script><!-- FIN redimensionne l'image -->

13/10/2012, 18h15
yannoo95170

Je suis en train d'essayer de faire un truc équivalent sur le fil http://www.developpez.net/forums/d12...onnees-mapping

Serait-il possible d'avoir une page d'exemple HTML entière (+ le CSS s'il est utilisé) afin que je puisse comparer les deux méthodes et essayer de générer un modèle générique qui puisse combiner les avantages de ces 2 méthodes ?

PS : j'aime bien le principe du resizeTime et resizeDelay :)
(ça devrait hyper utile pour générer le timing d'une animation)

@+
Yannoo
14/10/2012, 00h16
yannoo95170

5 pièce(s) jointe(s)

Pourrais-je avoir une page HTML d'exemple complête avec la méthode des "<DIV> + <IMG> cachées" de ce thread pour que je puisse analyser comment ça marche dans une vue plus globale ?

Je viens de commencer de tester le support de code SVG dans une des parties réactives de mon exemple HTML
=> ce n'est pas encore trop au point car les figures SVG s'affichent juste après l'image :(
(le mapping est quand à lui bien automatiquement adapté à la taille de cette image, donc pas de pb de ce côté là)

A noter que je viens de trouver ce lien http://www.developpez.net/forums/d96...-larea-survol/ où est utilisée une méthode de tranparence pour gérer les supperpositions d'images
=> ça devrait être utile pour certaines réactions possibles lors du survol/click/entrée/sortie d'une map ...
[+ je pense que ça pourrait être hyper utile pour pouvoir y gérer des animations]

PS : il faut créer un réperoire Areas et y mettre les images pour que superpose.html puisse fonctionner

@+
Yannoo
14/10/2012, 03h27
yannoo95170

1 pièce(s) jointe(s)

Ca commence à devenir fonctionnel :)

=> la couleur des bords change dynamiquement quand on passe sur les "triangles arrondis" au centre + change en noir quand on passe par les disques noirs qui sont présents au milieu de ces triangles ou sur les lignes noirzs qui séparent ces mêmes triangles.

Pour l'instant, je passe par une méthode "bourrin" cad que je remplace carrément l'image par une autre avec les modifications voulues qui y sont
(je pense assez rapidement passer par une méthode bien plus propre en modifiant simplement la couleur de fond ...
[et si je pouvait même mettre des couleurs différentes pour chaque coin, ce serait encore mieux :)]

Une idée de la méthode que je pourrais utiliser si je veux faire tourner la "roue" et/ou gérer un gif animé ?
(histoire d'essayer d'implementer une image réactive **dynamique** ajustée à la résolution, cf. une animation réactive ajustée à la résolution + d'autres trucs du style)

Mais j'en reste tout de même sur l'idée que ce serait mieux que l'on puisse directement mettre des % dans les coordonnées de mapping :) :)
=> je vais regarder comment c'est géré par le javascript utilisé par Firefox et/ou Chrome
[vu que les codes sources doivent être à dispo, je vais essayer d'y voir si je ne peux pas y ajouter ça ...)

@+
Yannoo