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

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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 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

mariok13
****

Messages : 421
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 Mar 3 Nov 2015 - 16:02

Bonjour,

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

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 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

mariok13
****

Messages : 421
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 Invité 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 ,



Anonymous

Invité
Invité


Invité 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 Mer 4 Nov 2015 - 7:37

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

mariok13
****

Messages : 421
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 Jeu 5 Nov 2015 - 14:36

up
s'il vous plait
mariok13

mariok13
****

Messages : 421
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 Dim 8 Nov 2015 - 9:35

up 
s'il vous plait
mariok13

mariok13
****

Messages : 421
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 Invité 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 ?.
Anonymous

Invité
Invité


Invité 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 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 

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

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

mariok13
****

Messages : 421
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 Invité 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 réduire la taille d'une image posté dans un formulaire 907288 et réduire la taille d'une image posté dans un formulaire Ajouter2024


Le résultat imagé:
réduire la taille d'une image posté dans un formulaire 114




a++
Anonymous

Invité
Invité


Invité 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 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

mariok13
****

Messages : 421
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 Invité 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++

Anonymous

Invité
Invité


Invité 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 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

mariok13
****

Messages : 421
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 Invité 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++
Anonymous

Invité
Invité


Invité 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 Lun 9 Nov 2015 - 16:21

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

mariok13
****

Messages : 421
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 Invité 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++
Anonymous

Invité
Invité


Invité 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 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

mariok13
****

Messages : 421
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 Invité 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++
Anonymous

Invité
Invité


Invité 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 Mer 11 Nov 2015 - 8:28

ben oui mp
mariok13

mariok13
****

Messages : 421
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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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