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

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

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

11/09/2012, 10h24	#1
Charaaal38 Invité de passage Inscription : septembre 2012 Messages : 6 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2012 Messages : 6 Points : 0 Points : 0	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.
	00

11/09/2012, 15h01	#2
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 701 Détails du profil Informations personnelles : Âge : 32 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 701 Points : 5 383 Points : 5 383	non pas du tout clair. un peut de code ?? histoire de voir un peux mieux de quoi tu parles? __________________ la vie n'est pas cirrhose des foies ...
	00

12/09/2012, 12h10	#5
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 701 Détails du profil Informations personnelles : Âge : 32 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 701 Points : 5 383 Points : 5 383	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. __________________ la vie n'est pas cirrhose des foies ...
	00

14/09/2012, 12h00	#8
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 701 Détails du profil Informations personnelles : Âge : 32 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 701 Points : 5 383 Points : 5 383	ou apprendre a découper une image et structurer une page par rapport au découpage. __________________ la vie n'est pas cirrhose des foies ...
	00

17/09/2012, 10h27	#10
Vil'Coyote Modérateur Développeur Web Inscription : février 2008 Messages : 3 701 Détails du profil Informations personnelles : Âge : 32 Localisation : France, Marne (Champagne Ardenne) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : février 2008 Messages : 3 701 Points : 5 383 Points : 5 383	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. __________________ la vie n'est pas cirrhose des foies ...
	00

11/09/2012, 15h06	#4
Charaaal38 Invité de passage Inscription : septembre 2012 Messages : 6 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2012 Messages : 6 Points : 0 Points : 0	Je précise que je ne suis pas un kador
	00

12/09/2012, 19h17	#7
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 096 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 096 Points : 8 797 Points : 8 797	Bonjour, tu peux peut être regarder du coté des transformations en CSS3, mais CSS3 !!!!
	00

17/09/2012, 10h41	#11
Charaaal38 Invité de passage Inscription : septembre 2012 Messages : 6 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : septembre 2012 Messages : 6 Points : 0 Points : 0	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 ...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email