Redimensionnement auto de la zone réactive

**Charaaal38** · 11/09/2012, 10h24

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.

**Vil'Coyote** · 11/09/2012, 15h01

non pas du tout clair.

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

**Charaaal38** · 11/09/2012, 15h05

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

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

**Charaaal38** · 11/09/2012, 15h06

Je précise que je ne suis pas un kador

**Vil'Coyote** · 12/09/2012, 12h10

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.

**Charaaal38** · 12/09/2012, 13h59

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.

**NoSmoking** · 12/09/2012, 19h17

Bonjour,
tu peux peut être regarder du coté des transformations en CSS3, mais CSS3 !!!!

**Vil'Coyote** · 14/09/2012, 12h00

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

**Charaaal38** · 14/09/2012, 12h07

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

**Vil'Coyote** · 17/09/2012, 10h27

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.

**Charaaal38** · 17/09/2012, 10h41

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

Redimensionnement auto de la zone réactive

Dreamweaver

Discussions similaires

Partager

Partager