Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 11 sur 11
  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
    3 895
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 3 895
    Points : 5 690
    Points
    5 690

    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 :
    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
    3 895
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 3 895
    Points : 5 690
    Points
    5 690

    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
    6 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 6 986
    Points : 12 571
    Points
    12 571

    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
    3 895
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 3 895
    Points : 5 690
    Points
    5 690

    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
    3 895
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2008
    Messages : 3 895
    Points : 5 690
    Points
    5 690

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

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •