Bonjour amis de l’écran ! ---- j'ai ajouté un TEST pour la clarté ---
Je suis un noob, mais un noob travailleur ! Bref, malgré beaucoup de recherche et d’essais je me heurte à un problème que je n’arrive pas à résoudre. Mais je suis sûre qu’il y a ici une personne éclairée qui aura une solution. Je pense être dans la bonne section du forum mais merci de me dire si ce n’est pas le cas
Voilà le topo :
1/ J’ai une page HTML5 avec un header contenant 2 images que je veux superposer :
- Une image de fond « Map.jpg » (1100x600)
- Une image de calque transparente « Map_CHx.png » (1100x600) avec quelques objets (en l’occurrence des post-it) qui vient se plaquée dessus.
Voilà le code HTML (2 div imbriquées l'une dans l'autre).
2/ De l’autre coté j’ai une feuille CSS3 qui vient redimensionner ces images pour qu’elle s’adaptent dynamiquement à la résolution des petits écrans type tablette et Smartphone. Voila le code CSS.
3/ Enfin, j’ai une feuille Javascript qui exécute la fonction de remplacement de l’image de calque transparente PNG en fonction d’événement utilisateur (clique sur la page Html). Cette fonction JS va donc chercher l’image courante affichée sur la page « Map_CHx.png » par un « document.getElementById » et me retourne une autre image pour la remplacer (Map_CH3.png par exemple).
Test: http://www.s418768506.onlinehome.fr/default.html
cliquez sur valider pour voir l'image Postit changer puis réduisez le cadre du browser pour voir le problème...
Conclusion:
Tout ça tourne au poil sauf les 2 problèmes suivants :
- L’image PNG réinjectée dans la page Html par le JS ne tient pas compte du redimensionnement « .img { … } ». Ce qui à pour résultat que mon image de fond JPG se redimensionne toujours bien en fonction de la résolution mais pas l’image PNG réinjectée !
- J’ai noté aussi que sans utiliser le JS –c'est-à-dire sur la page d’accueil sans action utilisateur- sur Chrome le redimensionnement des deux images JPG & PNG se fait bien de manière coordonnée si je varie la taille de la fenêtre, en revanche sur IE et Firefox seul l’image de fond JPG se redimensionne.
Merci de votre aide !
Modifié par Shoowy (08 Jul 2012 - 02:39)
Je suis un noob, mais un noob travailleur ! Bref, malgré beaucoup de recherche et d’essais je me heurte à un problème que je n’arrive pas à résoudre. Mais je suis sûre qu’il y a ici une personne éclairée qui aura une solution. Je pense être dans la bonne section du forum mais merci de me dire si ce n’est pas le cas
Voilà le topo :
1/ J’ai une page HTML5 avec un header contenant 2 images que je veux superposer :
- Une image de fond « Map.jpg » (1100x600)
- Une image de calque transparente « Map_CHx.png » (1100x600) avec quelques objets (en l’occurrence des post-it) qui vient se plaquée dessus.
Voilà le code HTML (2 div imbriquées l'une dans l'autre).
<header>
<div id="arriere"><span id="fond_map"><img src="Map.jpg" class="img" /></span>
<div id="avant"><span id="Postit_Ch0"><img src="Map_CH0.png" class="img" /></span>
</div>
</div>
</header>
2/ De l’autre coté j’ai une feuille CSS3 qui vient redimensionner ces images pour qu’elle s’adaptent dynamiquement à la résolution des petits écrans type tablette et Smartphone. Voila le code CSS.
#arriere {
position: relatif;
left: 0%;
top: 0%;
z-index: 1;
}
#avant{
position: absolute;
left: 0%;
top: 0%;
z-index: 2;
}
.img {
border: none;
max-width: 100%;
width: auto;
height: auto;
}
header /* Format des blocs de page */
{
position: relative;
left: 0%;
top: 0%;
width: 80%;
height: 600px;
margin: auto;
border: 0px solid black;
text-align: center;
padding-bottom: 0px;
margin-bottom: 0px;
background-color: None;
color: none;
}
3/ Enfin, j’ai une feuille Javascript qui exécute la fonction de remplacement de l’image de calque transparente PNG en fonction d’événement utilisateur (clique sur la page Html). Cette fonction JS va donc chercher l’image courante affichée sur la page « Map_CHx.png » par un « document.getElementById » et me retourne une autre image pour la remplacer (Map_CH3.png par exemple).
Test: http://www.s418768506.onlinehome.fr/default.html
cliquez sur valider pour voir l'image Postit changer puis réduisez le cadre du browser pour voir le problème...
Conclusion:
Tout ça tourne au poil sauf les 2 problèmes suivants :
- L’image PNG réinjectée dans la page Html par le JS ne tient pas compte du redimensionnement « .img { … } ». Ce qui à pour résultat que mon image de fond JPG se redimensionne toujours bien en fonction de la résolution mais pas l’image PNG réinjectée !
- J’ai noté aussi que sans utiliser le JS –c'est-à-dire sur la page d’accueil sans action utilisateur- sur Chrome le redimensionnement des deux images JPG & PNG se fait bien de manière coordonnée si je varie la taille de la fenêtre, en revanche sur IE et Firefox seul l’image de fond JPG se redimensionne.
Merci de votre aide !
Modifié par Shoowy (08 Jul 2012 - 02:39)