Redimensionnement auto de la zone réactive

Version imprimable

11/09/2012, 10h24
Charaaal38

Redimensionnement auto de la zone réactive

Bonjour,

je suis en trains de faire un site et le fond est une image. Il se redimentionne automatiquement pour s'adapter à la résolution. Le soucis est que j'ai des zones actives qui servent à naviguer et je ne sais pas comment redimentionner celles-ci avec le fond ... J'espère que je suis clair ;)

Si quelqu'un peut m'aider ....

Merci et bonne journée.
11/09/2012, 15h01
Vil'Coyote

non pas du tout clair.

un peut de code ?? histoire de voir un peux mieux de quoi tu parles?

Alors voilà :

Pour être plus précis, j'ai une page d'accueil avec un fond qui est une image. Sur cette image, j'ai mis des zones actives qui renvoient sur les autres pages (lien). Je voudrais que ces zones actives se redimensionnent avec la page quand on réduit le site pour qu'elles ne soient pas décalées ...

Voici la page :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>Miss Spicy - Accueil</title>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script src="jquery.easing.1.3.js" type="text/javascript"></script>  
 
	<script type="text/javascript">
                $(document).ready(function() {
                
                        $curtainopen = false;
                
                        $(".rope").click(function(){
                                $(this).blur();
                                if ($curtainopen == false){ 
                                        $(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                                        $(".leftcurtain").stop().animate({width:'60px'}, 2000 );
                                        $(".rightcurtain").stop().animate({width:'60px'},2000 );
                                        $curtainopen = true;
                                }else{
                                        $(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
                                        $(".leftcurtain").stop().animate({width:'50%'}, 2000 );
                                        $(".rightcurtain").stop().animate({width:'51%'}, 2000 );
                                        $curtainopen = false;
                                }
                                return false;
                        });
                        
                });     
        </script>
	<style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            /*body {
                        width: 90%;
                        height: 100%;
                        text-align: center;
                background: #4f3722 url('images/darkcurtain.jpg') no-repeat;
            }
                html { 
                        background: url(images/darkcurtain.jpg) no-repeat center center fixed; 
                        -webkit-background-size: cover;
                        -moz-background-size: cover;
                        -o-background-size: cover;
                        background-size: cover;
                }*/
            img{
                        border: none;
                }
            .leftcurtain{
                        width: 50%;
                        height: 100%;
                        top: 0px;
                        left: 0px;
                        position: absolute;
                        z-index: 2;
                }
                 .rightcurtain{
                        width: 50%;
                        height: 100%;
                        right: 0px;
                        top: 0px;
                        position: absolute;
                        z-index: 3;
                }
                .rightcurtain img, .leftcurtain img{
                        width: 100%;
                        height: 100%;
                }
                .rope{
                        position: absolute;
                        top: -40px;
                        left: 80%;
                        z-index: 4;
                }
           
        body {
        background-color: #fad5a8;
}
    </style>
</head>
 
<body>
	<div>
	  <div align="center"><a class="rope" href="#"><img src="images/rope.png"/></a><img src="images/fond-accueil.jpg" alt="fond"/ width="1280px" usemap="#Map" border="0">
	    <map name="Map" id="Map">
	      <area shape="poly" coords="938,541,1024,254,1191,302,1115,593" href="Actu.html" target="_parent" alt="" />
	      <area shape="poly" coords="159,597,84,311,232,270,344,547" href="Portfolio.html" target="_parent" alt="" />
	      <area shape="poly" coords="289,345,228,59,453,19,508,299" href="Contact.html" target="_parent" alt="" />
	      <area shape="poly" coords="754,301,830,11,1018,53,969,360" href="Biographie.html" target="_parent" alt="" />
        </map>
      </div>
	</div>
	<div class="leftcurtain"><img src="images/frontcurtain.png"/></div>
	<div class="rightcurtain"><img src="images/frontcurtain.png"/></div>
	<p>&nbsp;</p>
</body>
</html>

11/09/2012, 15h06
Charaaal38

Je précise que je ne suis pas un kador ;)
12/09/2012, 12h10
Vil'Coyote

pas jouable. le positionnement est statique en px et pas en % ce qui fait que même en javascript si tu avait un fonction de positionnement le redimensionnement n'étant pas une action prise en compte pour les appel il te serait pas possible de rafaîchir la zone et redimensionner le tous.

bref. pas possible.
12/09/2012, 13h59
Charaaal38

1 pièce(s) jointe(s)

Ok merci, alors comment faire pour que sur une image de fond, je puisse insérer des zones invisibles qui serviraient de lien vers les autres pages ...

Je met en pj le fond, chaque cadre et texte renvoie à une page, il faudrait que tout se redimentionne .....

Merci encore.
12/09/2012, 19h17
NoSmoking

Bonjour,
tu peux peut être regarder du coté des transformations en CSS3, mais CSS3 !!!!
14/09/2012, 12h00
Vil'Coyote

ou apprendre a découper une image et structurer une page par rapport au découpage.
14/09/2012, 12h07
Charaaal38

Citation:

Envoyé par Vil'Coyote

ou apprendre a découper une image et structurer une page par rapport au découpage.

Je l'ai découpée en tranches sous photoshop mais le soucis est le redimentionnement ensuite sous dw, je n'y arrive pas...
17/09/2012, 10h27
Vil'Coyote

enfin, bon. si tu a effectivement fait un découpage correcte alors les map area ne serve a rien il te suffit d'ajouter des balise de lien <a href ....> sur les images concernées évitant ainsi de penser à redimensionner des zone qui de toutes façons sont impossible a redimensionner.
17/09/2012, 10h41
Charaaal38

Merci, ça m'a l'air trop compliqué car il faut que tout soit redimentionnable ... je vais plutot repenser le site pour utiliser une taille fixe ...