Discussion :

[fazpedro]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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" />

[NoSmoking]

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

[fazpedro]

en mettant l'image dans un div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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"><!-- DEBUT image_fond -->
<img src="image.jpg" border="0" usemap="#map" name="nouvelle_image" />
<img style="display:none"src="image2.jpg" />
.....
</div><!-- FIN image_fond -->

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

[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.

[fazpedro]

Bonjour,

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

html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 -->

[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