réduire la taille d'une image posté dans un formulaire

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Mar 3 Nov 2015 - 9:50

bonjour

pour un forum en phpbb2

voila j'ai un formulaire dans lequel je permet de telecharger une photo puis de la posté
j'aimerais reduire cete phtot dans le post en miniature et que les gens et la possibilité en cliquant dessus de l'agrandir

je vous met mon formulaire

page html


Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>formulaire d'aide</title>
<style type="text/css">
  < style>
   

}
     
p {
  margin-top: 0px;
  align: center;
 
}
   
   
fieldset {
  margin-bottom: 15px;
  padding: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  -moz-box-shadow: 5px 5px 5px 2px #3166ff;
  -webkit-box-shadow: 5px 5px 5px 2px #3166ff;
  -o-box-shadow: 5px 5px 5px 2px #3166ff;
  box-shadow: 5px 5px 5px 2px #3166ff;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px ;
   
}
 
legend {
  padding: 0px 3px;
  font-weight: bold;
  font-variant: small-caps;

}
 
label {
  width: 35%;
  display: inline-block;
  vertical-align: top;
  margin: 6px;
}
 
 
input:focus {
  background: #eaeaea;
}
 
input, textarea {
  width: 249px;
}
 
textarea {
  height: 100px;
}
 
select {
  width: 254px;
}
 
input[type=checkbox] {
  width: 10px;
}
 
input[type=submit] {
  width: 100px;
  padding: 10px;
  margin-left:25%; 
  -moz-box-shadow: 5px 5px 5px 2px #3166ff;
  -webkit-box-shadow: 5px 5px 5px 2px #3166ff;
  -o-box-shadow: 5px 5px 5px 2px #3166ff;
  box-shadow: 5px 5px 5px 2px #3166ff;
  filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px ; 
   
   
}
   
   
   
 
</style>
  </head>
<body>
 
 
 <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
  <input type="hidden" name="lt" value="0" />
  <input type="hidden" name="mode" value="newtopic" />
  <input type="hidden" name="topictype" value="0" checked="checked" />
  <input type="hidden" name="message" value="" />
  <input type="hidden" name="f" value="78" /> <!--  ID du forum dans lequel le message sera posté -->
 
  <p><strong><i><center>Formulaire de dépot de vente de matériel de puériculture</center></i></strong></p><b>
 
  <strong><i><center>AMARID n'est pas responsable des annonces déposées et transactions</center></i></strong><br>
 
  <fieldset>
  <center><trong><font size=32>VENTE</font></center></strong>
 
  </fieldset>
 
 
 
 
  <fieldset>
      <legend align="center">Titre de votre annonces & vos coordonnées</legend>
            <label for="Titre du sujet">Titre de votre annonce : </label><input type="text" name="subject" id="sujet" value="" required size="110" maxlength="100" /><br />
            <label for="Pseudo">Pseudo : </label><input id="pseudo" ><br>
            <label for="tel">Numéro de téléphone :</label><input id="téléphone"><br>
            <label for="email">Email : </label><input id="email"  ><br> 
  </fieldset>
 
 
  <fieldset>
      <legend align="center">Matériel & prix</legend>
        <label for="neufoccasion">Type de matériel :</label>
        <select id="matos" name="" required >
                <option value="">Type de matériel</option>
                <option value="Neuf (jouets, jeux) :">Neuf (jouets, jeux)</option>
                <option value="Neuf (poussette, meuble) :">Neuf (poussette, meuble)</option>
                <option value="Occasion (jouets, jeux) :">occasion (jouets, jeux) </option>
                <option value="Occasion (poussette, meuble) :">occasion (poussette, meuble) </option>
                </select> <br>
      <label for="tranche">Tranche d'âge concernée : </label>
        <select id="tranche" name="">
          <option value="">Tranches d'âge concernée</option>
          <option value="0-3 mois :">de 0 à 3 mois</option>
          <option value="3-6 mois :">de 3 à 6 mois</option>
          <option value="6-12 mois :">de 6 à 12 mois</option>
          <option value="12-24 mois : ">de 12 à 24 mois</option>
          <option value="24 mois et plus :">24 mois et +</option>
            </select> <br>
      <label for="Matériel">Déscription du matériel : </label><textarea id="materiel"></textarea><br><br>
      <label for="Photo du matériel">Photo du matériel :</label>  <button onclick="window.open('http://www.zupimages.net/'); return false;">Télécharger</button><br /><br />
        <label for="Mettez le lien BBCODE votre image ici">Mettez le lien BBCODE votre image ici :</label> <input type="text" name="image" size="110" maxlength="200" /><br /><br /> 
       
      <label for="prix">Prix du matériel : </label><input id="prix">€<br>
  </fieldset>
 
  <fieldset>
    <legend align="center" >Date de disponnibilité & récupération du matériel</legend>
    <label for="Date">Date de disponibilité :</label><input id="Date"><br>
    <label for="Livré">Type de livraison :</label>
        <select id="livre" name="">
                <option value="">Type de livraison</option>
                <option value="livré">Envoyé par la poste</option>
                <option value="poste">Prendre à mon domicile</option>
                <option value="Autre">Autres à définir dans le message</option>
      </select> <br> 
        <label for="autre1">Si autre veuillez préciser :</label><input id="autre1"  ><br> 
 </fieldset>
   
    <input value="validez" name="post" type="submit" /> 
     
 
</form>
   
  <script type="text/javascript">
          function envoiMessage(form)
          {
    // Créer un message à partir des informations fournies
 
    var txt_message = "<div class=formulairevente><center><strong> Titre de l'annonce :" + form.sujet.value + '\n</center>'
          + "Pseudo :" + form.pseudo.value + '\n'
          + "Numéro de téléphone :" + form.téléphone.value + '\n'
          + "Email :" + form.email.value + '\n'
          + "Type de matériel :" + form.matos.value + '\n'
          + "Tranche d'âge concernée :" + form.tranche.value + '\n'
          + "Déscription du matériel :" + form.materiel.value + '\n' + '\n'
          + "Mettez votre image ici :" + form.image.value + '\n'
          + "Prix du matériel : <i><mark>" + form.prix.value +  '  €' + '</i></mark>\n'+ '\n'
          + "Date de disponibilité :" + form.Date.value + '\n'
          + "Type de livraison :"+ form.livre.value +'\n'
          + "Si autre veuillez préciser :"+ form.autre1.value +'\n </strong>' + '</div>  \n' ;
               
    // Insère le texte construit dans le champ caché "message" du formulaire
 
        form.message.value = txt_message;
        }
</script> 
   
   
 </body>
</html>

la base du CSS qui apparait une fois le message posté


Code:

/*--formuaire mariok----*/

.formulairevente{
  margin-bottom: 40px;
  margin-top: 40px;
  padding: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
 box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),
            -1px 2px 20px rgba(255, 255, 255, 0.6) inset; 
background-image:url(http://i21.servimg.com/u/f21/18/51/82/95/test12.png);
background-repeat:no-repeat;
background-position: center; 
 
}
 
.formulaireannonce {
  margin-bottom: 10px;
  margin-top: 40px;
  padding: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
 box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),
            -1px 2px 20px rgba(255, 255, 255, 0.6) inset;
background-image:url(http://i21.servimg.com/u/f21/18/51/82/95/test_b11.png);
background-repeat:no-repeat;
background-position: center; 
 
}
 
.formulairrecherche{
  margin-bottom: 10px;
  margin-top: 40px;
  padding: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
 box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7),
            -1px 2px 20px rgba(255, 255, 255, 0.6) inset;
background-image:url(http://i21.servimg.com/u/f21/18/51/82/95/test_b14.png);
background-repeat:no-repeat;
background-position: center; 
 
}



Dernière édition par mariok13 le Mer 11 Nov 2015 - 12:09, édité 1 fois

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par Scoubifitz le Mar 3 Nov 2015 - 16:02

Bonjour,

c'est une des fonctionnalités de Forumactif ...

Tuto http://forum.forumactif.com/t253423-redimensionnement-automatique-des-images

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Mar 3 Nov 2015 - 20:58

oui mais cela redimenssionne automatiquement toutes les image du forum j'aurais souhaité que pour ce post qui vient d'un formulaire on puisse avoir une image style thumbnail miniature en francais

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par R-max le Mar 3 Nov 2015 - 23:38

slt mariok , une idée ! tu peut utilisé
ceci ,
Code:
 -ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
  transition:1s;



Code:
.formulairrecherche img:hover {-ms-transform: scale(1.2,1.2);
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
  transition:1s;}

tu peut faire varier l'effet de zoom scale(!!!);
bonne soirée ,




R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Mer 4 Nov 2015 - 7:37

merci je le met ou dans la page html ou dans le CSS

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Jeu 5 Nov 2015 - 14:36

up
s'il vous plait

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Dim 8 Nov 2015 - 9:35

up 
s'il vous plait

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par R-max le Dim 8 Nov 2015 - 10:11

Bonjour je viens de voir que tu a une image de fond dedans .mon code donner ne fonctionnera pas du coup.il va agir sur toutes les images du formulaire...
Peut tu poster ce formulaire avec l'image ,donner un visuel une fois poster ?.

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Dim 8 Nov 2015 - 11:45

bonjour

tout d'abord j'ai mis ceci que j'ai laissé 

Rendez vous dans votre PA > Général > Messages et Emails > Configuration

taille mise : 300 par 300

mais ceci redimensionne toutes les images postés du forum 

ensuite l'image de fond est donné dans le CSS principal et non le CSS de la page HTML

voila le visuel 



le but ultime serait que l'image posté soit une miniature et que quand les gens clique dessus elle s'agrandisse si possible sur une page à part 

le formulaire est dans le premier post il n'as pas changé depuis pareil pour la partie dans le CSS de base

merci

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par Milouze14 le Dim 8 Nov 2015 - 20:20

Salut Mariok13 Wink ,

on peut tricher et reprendre le script que propose le fofo
sur le redimensionnement des images sur les messages.
Le redimensionnement se fera uniquement sur ce formulaire par contre

Ton formulaire modifié:
Code:
<br
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>formulaire d'aide</title>
    <style type="text/css">
      < style>
     

    }
       
    p {
      margin-top: 0px;
      align: center;
   
    }
     
     
    fieldset {
      margin-bottom: 15px;
      padding: 10px;
      width: 50%;
      margin-left: auto;
      margin-right: auto;
      -moz-box-shadow: 5px 5px 5px 2px #3166ff;
      -webkit-box-shadow: 5px 5px 5px 2px #3166ff;
      -o-box-shadow: 5px 5px 5px 2px #3166ff;
      box-shadow: 5px 5px 5px 2px #3166ff;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px ;
     
    }
   
    legend {
      padding: 0px 3px;
      font-weight: bold;
      font-variant: small-caps;

    }
   
    label {
      width: 35%;
      display: inline-block;
      vertical-align: top;
      margin: 6px;
    }
   
   
    input:focus {
      background: #eaeaea;
    }
   
    input, textarea {
      width: 249px;
    }
   
    textarea {
      height: 100px;
    }
   
    select {
      width: 254px;
    }
   
    input[type=checkbox] {
      width: 10px;
    }
   
    input[type=submit] {
      width: 100px;
      padding: 10px;
      margin-left:25%;
      -moz-box-shadow: 5px 5px 5px 2px #3166ff;
      -webkit-box-shadow: 5px 5px 5px 2px #3166ff;
      -o-box-shadow: 5px 5px 5px 2px #3166ff;
      box-shadow: 5px 5px 5px 2px #3166ff;
      filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=134, Strength=5);
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px ;
     
     
    }
     
     
     
   
    </style>
      </head>
    <body>
   
   
    <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)">
      <input type="hidden" name="lt" value="0" />
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="2" /> <!--  ID du forum dans lequel le message sera posté -->
   
      <p><strong><i><center>Formulaire de dépot de vente de matériel de puériculture</center></i></strong></p><b>
   
      <strong><i><center>AMARID n'est pas responsable des annonces déposées et transactions</center></i></strong><br>
   
      <fieldset>
      <center><trong><font size=32>VENTE</font></center></strong>
   
      </fieldset>
   
   
   
   
      <fieldset>
          <legend align="center">Titre de votre annonces & vos coordonnées</legend>
                <label for="Titre du sujet">Titre de votre annonce : </label><input type="text" name="subject" id="sujet" value="" required size="110" maxlength="100" /><br />
                <label for="Pseudo">Pseudo : </label><input id="pseudo" ><br>
                <label for="tel">Numéro de téléphone :</label><input id="téléphone"><br>
                <label for="email">Email : </label><input id="email"  ><br>
      </fieldset>
   
   
      <fieldset>
          <legend align="center">Matériel & prix</legend>
            <label for="neufoccasion">Type de matériel :</label>
            <select id="matos" name="" required >
                    <option value="">Type de matériel</option>
                    <option value="Neuf (jouets, jeux) :">Neuf (jouets, jeux)</option>
                    <option value="Neuf (poussette, meuble) :">Neuf (poussette, meuble)</option>
                    <option value="Occasion (jouets, jeux) :">occasion (jouets, jeux) </option>
                    <option value="Occasion (poussette, meuble) :">occasion (poussette, meuble) </option>
                    </select> <br>
          <label for="tranche">Tranche d'âge concernée : </label>
            <select id="tranche" name="">
              <option value="">Tranches d'âge concernée</option>
              <option value="0-3 mois :">de 0 à 3 mois</option>
              <option value="3-6 mois :">de 3 à 6 mois</option>
              <option value="6-12 mois :">de 6 à 12 mois</option>
              <option value="12-24 mois : ">de 12 à 24 mois</option>
              <option value="24 mois et plus :">24 mois et +</option>
                </select> <br>
          <label for="Matériel">Déscription du matériel : </label><textarea id="materiel"></textarea><br><br>
          <label for="Photo du matériel">Photo du matériel :</label>  <button onclick="window.open('http://www.zupimages.net/'); return false;">Télécharger</button><br /><br />
            <label for="Mettez le lien BBCODE votre image ici">Mettez le lien BBCODE votre image ici :</label> <input type="text" name="image" size="110" maxlength="200" /><br /><br />
         
          <label for="prix">Prix du matériel : </label><input id="prix">€<br>
      </fieldset>
   
      <fieldset>
        <legend align="center" >Date de disponnibilité & récupération du matériel</legend>
        <label for="Date">Date de disponibilité :</label><input id="Date"><br>
        <label for="Livré">Type de livraison :</label>
            <select id="livre" name="">
                    <option value="">Type de livraison</option>
                    <option value="livré">Envoyé par la poste</option>
                    <option value="poste">Prendre à mon domicile</option>
                    <option value="Autre">Autres à définir dans le message</option>
          </select> <br>
            <label for="autre1">Si autre veuillez préciser :</label><input id="autre1"  ><br>
    </fieldset>
     
        <input value="validez" name="post" type="submit" />
       
   
    </form>
     
      <script type="text/javascript">
              function envoiMessage(form)
              {
        // Créer un message à partir des informations fournies
   
        var txt_message = "<div class=formulairevente><center><strong> Titre de l'annonce :" + form.sujet.value + '\n</center>'
              + "Pseudo :" + form.pseudo.value + '\n'
              + "Numéro de téléphone :" + form.téléphone.value + '\n'
              + "Email :" + form.email.value + '\n'
              + "Type de matériel :" + form.matos.value + '\n'
              + "Tranche d'âge concernée :" + form.tranche.value + '\n'
              + "Déscription du matériel :" + form.materiel.value + '\n' + '\n'
        + "Mettez votre image ici :<span class=formu_img>" + form.image.value + '\n</span>'
              + "Prix du matériel : <i><mark>" + form.prix.value +  '  €' + '</i></mark>\n'+ '\n'
              + "Date de disponibilité :" + form.Date.value + '\n'
              + "Type de livraison :"+ form.livre.value +'\n'
              + "Si autre veuillez préciser :"+ form.autre1.value +'\n </strong>' + '</div>  \n' ;
                 
        // Insère le texte construit dans le champ caché "message" du formulaire
   
            form.message.value = txt_message;
            }
    </script>
     
     
    </body>
    </html>

La partie modifiée:
Code:
    + "Mettez votre image ici :<span class=formu_img>" + form.image.value + '\n</span>'


Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body

Juste après ceci:
Code:
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

Déposes ceci:
Code:

<!-- BEGIN switch_image_resizeFormulaire -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.formu_img', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resizeFormulaire -->


Penses a enregistrer les modifications en cliquant respectivement sur et


Le résultat imagé:





a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4564
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Dim 8 Nov 2015 - 20:52

si je comprend bien (et dieu sait que je suis un boulet) mais je m'accroche
tu crée une class supplémentaire  jusque la je suis
cette class ne sert que pour l'image posté dans l'annonce jusque la je suis 

trois questions :

- Comment je défini la taille de l'image posté en mettant 200 par 200 ?
- Je peut remettre ma taille d'origine sur les image posté sur le reste du forum ? 
- Quelle taille prendra l'agrandissement de l'image en cliquant sur agrandie l'image ?

merci de regardé mon souci je rappel qui n'est que de présentation

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par Milouze14 le Lun 9 Nov 2015 - 4:22

Salut mariock13,



- Comment je défini la taille de l'image posté en mettant 200 par 200 ?
- Je peut remettre ma taille d'origine sur les images postées sur le reste du forum ?
- Quelle taille prendra l'agrandissement de l'image en cliquant sur agrandie l'image ?

Ah tu ne veux plus du script alors ?
Je pensais que voulais te servir du script présent sur les forumactifs .


a++


Milouze14
+ Hyperactif +

Masculin
Messages : 4564
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Lun 9 Nov 2015 - 7:32

si c'est celui dont je me sers 

ma question est dans ce que tu m'as posté comment je donne une taille imposé dans le forum une fois la page html remplis 
pour l'image uand je reduit la taille dans mon pabbeau de configuration cela marche mais cela reduit pour tout le forum 

en clair je veux juste réduire la taille de l'image dans la reponse posté sur un forum precis

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par Milouze14 le Lun 9 Nov 2015 - 15:27

Re,

en fait tu veux avoir un code spécifique rien que pour ce formulaire Mariok13 ?
Est ce que cela irait:
si au clic sur l'image du formulaire l'image s'ouvrait dans une autre fenêtre?
a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4564
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Lun 9 Nov 2015 - 16:21

oui si possible sino l'agrandissement dans le message posté suffirais

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par Milouze14 le Mar 10 Nov 2015 - 19:46

Salut Mariok13,

essayes d'ajouter ce ci dans ta feuille de style:
Code:

.formulairevente .resizebox{display:none;}
.formulairevente img
{
  width:200px;
  height:200px;
  cursor:pointer;
margin:10px 0px 10px -180px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
  -moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.formulairevente img:hover
{
width:auto;
height:auto;
position:absolute;
left:25%;
margin-top:-200px;
border:2px solid #666;
padding:10px;
z-index:999;
cursor:pointer;
background:white;
-moz-box-shadow: -3px -10px 20px 10px #000;
-webkit-box-shadow: -3px -10px 20px 10px #000;
-o-box-shadow: -3px -10px 20px 10px #000;
box-shadow: -3px -10px 20px 10px #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
 
}



a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4564
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Mar 10 Nov 2015 - 20:41

teste cela reduit l'image ok mais pas à la taille demandé par contre l'agrandissement ce fait sur une page à part bien

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par Milouze14 le Mer 11 Nov 2015 - 5:37

Salut Mariok13,
teste cela reduit l'image ok mais pas à la taille demandé

L'image est bien dimensionnée par 200 x 200px ?

par contre l'agrandissement ce fait sur une page à part bien

Hummm tu es certain ?

a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4564
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: réduire la taille d'une image posté dans un formulaire

Message par mariok13 le Mer 11 Nov 2015 - 8:28

ben oui mp

mariok13
****

Messages : 410
Inscrit(e) le : 06/06/2015

http://graphcode.forumactif.org/
mariok13 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum