11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Pan and zoom d'une image et problème de superposision de div

Bonjour,

sur mon site, j'ai un import file pour importer une image dans une div. Je peux redimensionner cette image dans une div (qui me sert de cadre 16/9) grâce à un pan & zoom en javascript.

Je voudrais pouvoir superposer d'autres div dessus pour ajouter du texte ou une autre image, un logo sur cette image. Mais cela ne fonctionne pas. Le "draggable" devient inopérant. J'ai tenté de modifier le css avec position absolute, relative ou encore avec z-index. En vain. Avez vous une piste ? Merci de votre aide. 


    <div class="content">
          <div class="logo">
        <img src="image/photo2.png">   
      </div>
          <div class="visuel">
        <img id="upload" src="image/photo1.jpg">    
      </div>
   </div>

      <script src="js/draggable.js"></script>




 .content {
    width:100%;
    height:920px;
    justify-content: center;
    align-items: center;   
    display: flex;
    background-color:#dfe1e6;
}
.visuel {
    width:1000px;
    height:563px;
    overflow: hidden;
    position: absolute;
}
#upload {
    width:1020px;
    position:relative;
 }
.logo {
    width:1000px;
    height:563px;
    position:absolute;
}
.logo img {
    float: right;
    margin-right:20px;
    margin-top:20px;
    width:90px;
}

Modifié par daggoon (05 Dec 2020 - 13:22)
Modérateur
Bonjour,

Il manque un position:relative sur le conteneur parent.
.content
{
	position:relative;
	width:100%;
	height:960px;
}
.content>div
{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

Amicalement,
Merci pour cette réponse mais cela ne fonctionne pas. Ma photo 2 est toujours cachée par la photo 1.
Bonjour,

j'ai enfin résolu mon problème. J'ai inversé la position des photos 1 et 2 dans mon code.

    

<div class="content">

 <div id="blocPhoto">
        <div class="visuel">
        <img id="upload" src="image/photo1.jpg">    
        </div>

        <img src="image/photo2.png" id="logo">   
   </div>

</div>

      <script src="js/draggable.js"></script>


Le CSS est aussi modifié 


.content {
    width:100%;
    height:920px;
    justify-content: center;
    align-items: center;   
    display: flex;
    background-color:#dfe1e6;
}

.blocPhoto {
    width:1000px;
    height:700px;
    position:relative;
}

.visuel {
    width:1000px;
    height:563px;
    overflow: hidden;
    background-color:grey;
    position: absolute;
}

#upload {
    width:1020px;
    position: relative;
}

#logo {
    position: absolute;
    width:250px;
    left:820px;
    top: 220px;
}


J'obtiens ce que je voulais. La photo 1 peut être déplacée. Je peux superposer une image ou/et du texte par dessus. Le résultat est ici : https://jsfiddle.net/daggoon/nsm97txq/15/
Modifié par daggoon (16 Dec 2020 - 09:56)
Sujet clos
Aller à