Blog d'aide de Blog4ever

Bonjour
Je sais que l'on peut insérer une div dans une autre div, Mais le faire avec deux iframes, c'est possible? 
J'aimerai superposer un gif animé sur une image qui pivote, 
Et plus tard, j'aimerai associer d'autres animations, 
Merci de ta réponse, 
Bon appétit, 
Mi Neth, 

Hello Mi Neth.
En lisant ta question, je me dis qu effectivement , j ai pas mal de chemin encore à faire. 
Je n ai compris que "GIF animé". 
J ai hate de lire la reponse de Simon.

Bonjour Vince, 

Cette demande est pour illustrer un article, Simon te le dira, j'ai plusieurs animations et donc des codes à rendre dingue, 
Rien que sur ma page d'accueil, il y en a 4...dont deux presque semblables...
-Un changement de citations, 
-Une image coulissante avec menu déroulant ...liste de 30 articles...
-Deux blocs extensibles ...dont un avec gif...

Bon après-midi, 

 Mi Neth,

Tu l'as toi-même dit: il est possible d'insérer une div dans une autre.

Si tes divers iframe sont dans des div différents, en réglant bien les paramètres de chaque div, je me dis que ça peut fonctionner. 

Le montage que tu envisages là me plaît. Je vais moi aussi faire quelques tests dès que possible.

:am:

Dernière modification le dimanche 20 Mars 2022 à 15:32:45

Salut

J'ai fait une image qui pivote avec un gif animé.





<*style type="text/css">
.cadre {
  position: relative;   /* pour servir de référent */
  width: 355px;border:3px solid white;
  height:370px;border-radius:15px;
  margin-top:30px;
  margin-left:160px;/* largeur à ajuster suivant le besoin */
  overflow: hidden;/* masque les dépassements */
  line-height: 2em;     /* pour centrage vertical */
}
.cadre img {
  z-index: 1;           /* image au dessus */
  position: relative;   /* pour prise en compte z-index */
  width: 370px;
  height:370px;
 
}
  .cadre span {
  display: block;width:370px;
    border:3px solid #fff;
    border-radius:15px;
  position: absolute;   /* positionnement hors flux */
  left: -30%;        
      
  color: #eee;         
  background: #069;     
  transition: all .5s;
}
 .cadre:hover span {
  border:0px solid #a58;
    border-radius:15px;
   top:5px;
   left:2px;
   height:800px;
   width:350px;            
   background-image:url("https://static.blog4ever.com/2010/11/451105/bunny.gif");
}
 img:hover{
  opacity:0;
  }
article:hover{
  border:10px dotted white;
   background: linear-gradient(to left, black, white, pink, black);
}
<*/style>


____________________________

<*div class="cadre"*>
  <*span>""<*/span>
  <*img src="https://www.lagrandeparade.com/images/illustration/0808_bugsbunny3.jpg">     
<*/div>

Merci 
J'ai remis mon image qui pivote dans mon brouillon test pour que tu vois, parce que je me suis aperçue que cela fait aussi pivoter mon image d'en-tête, 

Mon gif animé, pour la version test,


@Kiamgo@ 
Tu me tiendras au courant, :oe:

Dernière modification le dimanche 20 Mars 2022 à 23:58:47

@Mi Neth@


<*div class="cadre">
  <*span>""
  <*img src="https://www.lagrandeparade.com/images/illustration/0808_bugsbunny3.jpg">     

Bonjour 

Je sais bien qu'il faut deux images pour faire le code que tu me proposes, aussi pour ce que je cherche à faire, 
Il semble que je me sois male exprimée, 
Dans un premier temps, ce que je veux c'est mettre un gif animé sur une image, 
Dans un deuxième temps, j'aimerai que l'image obtenue pivote sur elle même, 
Comme l'image que j'ai laissé dans mon brouillon test et qui impacte sur mon image d'en-tête, 
Faire pivoter une image, je sais faire, 
Mettre un gif animé sur une image fixe, me manque a bien paramétrer, 
En fait, pour simplifier, je souhaite remplacer le chat de mon image, par la version animée que j'ai posté plus haut dans la conversation et que l'ensemble pivote comme dans mon brouillon, 
...Je garde ta proposition dans mes archives...
Encore merci de ton aide, 
Bonne journée, 
Mi Neth, 

re

Ce que tu demandes se fait avec un logiciel photo.

Voir exemple insertion d'image. ----> https://www.photograpix.fr/blog/photomontage/mettre-photo-dans-sa-photo/

Ici également insérer un gif dans image ---> http://www.photofiltre-studio.com/tmp/tuto-gif-anime.pdf

:b1:  Mi Neth

Je ne suis pas très sûr d'avoir compris ce que tu souhaites faire.
Il y a deux idées qui me sont venues.

Les voici:

1.
https://www.contrelecourant.com/superposition-et-rotation?token=02501ee5635a86856f8972017ec57752

2.
https://www.contrelecourant.com/article-sans-titre-10?token=24268727ae98fb334b82dfffa633301c

Bonsoir @Kiamgo@

Tes articles ne sont pas disponibles, Du coup, je ne vois pas ce que tu a fais, 

Bonsoir 

Je connais, mais passer par un logiciel demande du temps, Il faut refaire à chaque image, Alors que par code, tu as juste à changer les liens et paramétrer, 
Bien entendu, il faut conserver les fichiers, 
Mais le premier lien, m'a donné une idée d'illustration, 
Bonne nuit, 

:bd: Mi Neth

Voici les nouveaux liens des tests:

1.
https://www.contrelecourant.com/superposition-et-rotation-1


2.
https://www.contrelecourant.com/pivoter

Bonjour Kiamgo, 

Les deux sont cools, C'est possible d'avoir les codes? Merci, 
Bonne journée, 
Mi Neth, 

Voici les deux codes que j'ai utilisés :

1.
https://static.blog4ever.com/2006/04/162628/Deux-Images-dont-une-fait-rotation-en-cercle.txt

2.
https://static.blog4ever.com/2006/04/162628/Deux-Images-qui-pivotent-en-3D-automatiquement.txt

@Kiamgo@ Ce sont deux versions trop tops, En plus du lien que m'a proposé  je vais avoir de quoi illustrer mes prochains articles, 

...Là, je vais attribuer une autre class à mon image, pour tenter de régler le souci d'image d'en-tête, Si je n'y parviens pas...

J'ai réglé le souci de pivotement de mon image d'en-tête, Mais je vais devoir faire d'autres réglages, parce que ce qui est rigolo, c'est que maintenant les petit texte et gif, que j'ai ajouté à mon article test, pivotent aussi, 
Du coup, c'est possible de lire à l'envers, :ptdr:

Le Lien
pour 

Si tu veux un pivotement il faut corriger le code.

<*style .....etc..
.img-pivote{
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;whidt:600px; height:650px;
}
.img-pivote:hover{border:1px solid black;
   -webkit-transition: 500ms;
  -webkit-transform: rotate(360deg);
}

C'est plutôt ce que j'appelle une image rotative, mais je prends aussi, C'est cool, 
Et j'ai trouvé pourquoi mon texte et mo gif pivotaient aussi, Ils s'étaient inclus dans ma div, 
Me manque a placé mon gif sur mon image, 
Bonne nuit, 

Bonsoir,

Bravo à tous vous êtes trop forts.