IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Image réactive ajustée à la résolution


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut Image réactive ajustée à la résolution
    Bonjour,
    je cherche à adapter une image à la résolution de l'écran, ce qui fonctionne avec ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    img.image_fond {position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}
    mais par contre je n'ai plus l'image réactive au passage de la souris (si j'enlève le CSS, l'image réactive fonctionne bien...)
    Merci de votre aide !

    html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <map name="map">
    <area shape="rect" coords="1124,506,1158,904" 
    alt="image1" href="#"  title="image1"
    onmouseover="nouvelle_image.src='image3.jpg'" onmouseout="nouvelle_image.src='image1.jpg';" />
    <area shape="rect" coords="822,636,1006,736" 
    alt="image2" href="#" title="image2"
    onmouseover="nouvelle_image.src='image4.jpg'" onmouseout="nouvelle_image.src='image1.jpg';" />
    </map>
    <img src="image1.jpg" border="0" usemap="#map" name="nouvelle_image" class="image_fond" />
    <img style="display:none"src="image3.jpg"  class="image_fond" />
    <img style="display:none"src="image4.jpg" class="image_fond" />

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Bonjour,
    et en supprimant le z-index:-1;?

  3. #3
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut
    en mettant l'image dans un div :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    #image_fond {position:relative;top:0;left:0;width:auto;height:auto;}
    #image_fond  img{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;}
    </style>
    <div id="image_fond"><!-- DEBUT image_fond -->
    <img src="image.jpg" border="0" usemap="#map" name="nouvelle_image" />
    <img style="display:none"src="image2.jpg" />
    .....
    </div><!-- FIN image_fond -->
    cela fonctionne ( ajustement de l'image + zone réactive )

    MAIS...
    le problème est que la zone réactive se déplace sur l'écran et donc n'est plus au bon endroit sur l'image...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <area shape="rect" coords="1124,506,1158,904"...
    j'ai essayé des % sur les coordonnées."coords"...sans succès...
    j'ai lu que c'était impossible d'indiquer des pourcentage...?
    il n'y a pas d'autres solutions pour adapter la zone réactive à la résolution ?
    Merci

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    Si ton image s'adapte à a largeur/hauteur de la DIV conteneur tu ne peux pas utiliser de MAP.

    Comme ta zone réactive est un rectangle, une solution consisterait à mettre une DIV par dessus, positionnée en %, et de lui affecter la réaction.

  5. #5
    Membre éclairé Avatar de fazpedro
    Homme Profil pro
    Inscrit en
    Août 2009
    Messages
    506
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Août 2009
    Messages : 506
    Par défaut
    Bonjour,

    j'ai trouvé.. mais avec Jquery & ImageMapster
    http://www.outsharked.com/imagemapster/

    html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="contenu"><!-- DEBUT contenu de l'image -->
    <map name="mon_map">
    	<area shape="rect" data-name="numero1" coords="1124,506,1158,904" href="#" alt="image1" href="#"  title="image1">
    	....
    </map>
    <div id="image_reactive" ><!-- DEBUT image_reactive -->
    <script>$(window).bind('resize');</script><!-- Appel au script pour adapter l'image -->
    <div><img id="mon_image" src="image1.jpg" usemap="#mon_map" alt="" /></div>
    </div><!-- FIN image_reactive -->
    </div><!-- FIN contenu de l'image -->
    et le Jquery qui va bien :
    Code : 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
    <script type="text/javascript" src="jquery_min_182.js"></script><!-- jquery_min_1 8 2 -->
    <script type="text/javascript" src="jquery_imagemapster.js"></script><!--  ImageMapster 1.2.6 -->
     
    <script type="text/javascript" ><!-- DEBUT redimensionne l'image -->
    $(document).ready(function () {
    var resizeTime = 100;    // total duration of the resize effect, 0 is instant
    var resizeDelay = 100;	// time to wait before checking the window size again  the shorter the time, the more reactive it will be
    						// short or 0 times could cause problems with old browsers.
    // Redimensionner la carte pour s'adapter à l'interieur des limites prevues
    function resize(maxWidth,maxHeight) {
         var image =  $('#mon_image'),
            imgWidth = image.width(),
            imgHeight = image.height(),
            newWidth=0,
            newHeight=0;
     
        if (imgWidth/maxWidth>imgHeight/maxHeight) {
            newWidth = maxWidth;
        } else {
            newHeight = maxHeight;
        }
        image.mapster('resize',newWidth,newHeight,resizeTime);   
    }
    // Sur les evenements de redimensionnement des fenetres : appel du redimensionnement de la carte quand la fenetre n'est plus redimensionnee
    function onWindowResize() 
    {
        var curWidth = $(window).width(),
            curHeight = $(window).height(),
            checking=false;
        if (checking) {return;}
        checking = true;
        window.setTimeout(function()
    	{
            var newWidth = $(window).width(),
               newHeight = $(window).height();
            if (newWidth === curWidth &&
                newHeight === curHeight) 
    			{
    				resize(newWidth,newHeight);
    			}
    			checking=false;
        },resizeDelay );
    }
    $(window).bind('resize',onWindowResize);
    });
    </script><!-- FIN redimensionne l'image -->

  6. #6
    Membre confirmé
    Homme Profil pro
    Analyste d'exploitation
    Inscrit en
    Avril 2011
    Messages
    108
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val d'Oise (Île de France)

    Informations professionnelles :
    Activité : Analyste d'exploitation
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2011
    Messages : 108
    Par défaut
    Je suis en train d'essayer de faire un truc équivalent sur le fil http://www.developpez.net/forums/d12...onnees-mapping

    Serait-il possible d'avoir une page d'exemple HTML entière (+ le CSS s'il est utilisé) afin que je puisse comparer les deux méthodes et essayer de générer un modèle générique qui puisse combiner les avantages de ces 2 méthodes ?

    PS : j'aime bien le principe du resizeTime et resizeDelay
    (ça devrait hyper utile pour générer le timing d'une animation)

    @+
    Yannoo

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. affichage d'une image réactive en css sous un menu
    Par criscaro dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 02/12/2006, 12h21
  2. Ajustement de résolution
    Par toddy_101 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 01/07/2006, 14h22
  3. CSS: image s'ajustant a la hauteur de l'écran
    Par Sylvain245 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 10/02/2006, 16h53
  4. [DW2] image réactive qui change de couleur
    Par gysou dans le forum Dreamweaver
    Réponses: 2
    Dernier message: 07/01/2006, 10h49
  5. Image réactive (map) vrsus tableau
    Par francis m dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/05/2005, 19h28

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