p
u
b
l
i
c
i
t
é
publicité
  1. #1
    Invité de passage
    Homme Profil pro
    Inscrit en
    septembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : septembre 2012
    Messages : 6
    Points : 0
    Points
    0

    Par défaut 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.

  2. #2
    Modérateur
    Avatar de Vil'Coyote
    Profil pro
    Développeur Web
    Inscrit en
    février 2008
    Messages
    4 015
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 4 015
    Points : 5 898
    Points
    5 898

    Par défaut

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

  3. #3
    Invité de passage
    Homme Profil pro
    Inscrit en
    septembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : septembre 2012
    Messages : 6
    Points : 0
    Points
    0

    Par défaut

    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>

  4. #4
    Invité de passage
    Homme Profil pro
    Inscrit en
    septembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : septembre 2012
    Messages : 6
    Points : 0
    Points
    0

    Par défaut

    Je précise que je ne suis pas un kador

  5. #5
    Modérateur
    Avatar de Vil'Coyote
    Profil pro
    Développeur Web
    Inscrit en
    février 2008
    Messages
    4 015
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 4 015
    Points : 5 898
    Points
    5 898

    Par défaut

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

  6. #6
    Invité de passage
    Homme Profil pro
    Inscrit en
    septembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : septembre 2012
    Messages : 6
    Points : 0
    Points
    0

    Par défaut

    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.
    Images attachées Images attachées  

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    8 993
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 8 993
    Points : 18 009
    Points
    18 009

    Par défaut

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

  8. #8
    Modérateur
    Avatar de Vil'Coyote
    Profil pro
    Développeur Web
    Inscrit en
    février 2008
    Messages
    4 015
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 4 015
    Points : 5 898
    Points
    5 898

    Par défaut

    ou apprendre a découper une image et structurer une page par rapport au découpage.
    la vie n'est pas cirrhose des foies ...

  9. #9
    Invité de passage
    Homme Profil pro
    Inscrit en
    septembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : septembre 2012
    Messages : 6
    Points : 0
    Points
    0

    Par défaut

    Citation Envoyé par Vil'Coyote Voir le message
    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...

  10. #10
    Modérateur
    Avatar de Vil'Coyote
    Profil pro
    Développeur Web
    Inscrit en
    février 2008
    Messages
    4 015
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 4 015
    Points : 5 898
    Points
    5 898

    Par défaut

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

  11. #11
    Invité de passage
    Homme Profil pro
    Inscrit en
    septembre 2012
    Messages
    6
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : septembre 2012
    Messages : 6
    Points : 0
    Points
    0

    Par défaut

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

Discussions similaires

  1. modifier couleur zone réactive
    Par totoranky dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 01/07/2010, 23h18
  2. [HTML][USEMAP] Précision sur les zones réactives
    Par cladsam dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 08/02/2006, 08h20
  3. Créer des zone réactives avec un éditeur visuel
    Par sami_c dans le forum Outils
    Réponses: 12
    Dernier message: 16/11/2005, 10h50
  4. [C#] Redimensionnement auto pop up avec datagrid
    Par kalan dans le forum ASP.NET
    Réponses: 2
    Dernier message: 04/08/2005, 08h51
  5. [JLabel] Redimensionnement auto non désiré
    Par SamRay1024 dans le forum Fenêtres/Dialogues
    Réponses: 11
    Dernier message: 21/05/2004, 18h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo