Web De Prueba LifeArtz

Ami

Banners Afiliacion

Elige Ejemplo:
Ejemplo gráfico puede reducirse más arriba, pero no será colocado en su propia página.
Pegar Codigo En El Editor

<style type="text/css">

         *                         { margin: 0; padding: 0; }

         body                      { background: ; font: 12px Georgia, Serif; color: #2d2d2d; }

         #page-wrap                { width: 600px; margin: 20px auto; }

         a img                     { border: 0; }

         h3                        { font-size: 24px; font-weight: normal; margin: 0 0 25px 0; }

         fieldset                  { border: 1px solid #666; padding: 15px; }

         legend                    { border: 1px solid #666; text-transform: uppercase; padding: 2px 6px; }

        .code-selector div         { clear: both; margin: 0 0 25px 0; }

         label                     { font-size: 14px; display: block; width: 120px; float: left; text-align: right; padding: 2px 6px; }

        .code-selector select      { border: 1px solid #666; padding: 2px 2px 2px 6px; }

        .code-selector option      { padding: 0 12px; }

        .code-selector textarea    { border: 1px solid #7d7858; padding: 10px; width: 375px; height: 80px; }

        .note                      { font-size: 11px; width: 300px; margin: 0 0 0 130px; color: #666; }

        .example-area              { margin-left: 130px; width: 375px; text-align: center; border: 1px solid #7d7858; padding: 10px; }

        .example-area img          { max-width: 100%; }

    </style>

    

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

    <script type="text/javascript">

        $(function() {

           $("#type-size").change(function() {

               var graphicFileName = $("#type-size option:selected").attr("rel");

               var newCode = '<a href="URL DE TU WEB AQUI"><img src="' + graphicFileName + '" alt="Afiliate" /></a>';

               $("#code-box").text(newCode);

               $("#graphic-example-area").html(newCode);

           });

        });

    </script>



    <div id="page-wrap">



        <h3>Banners Afiliacion</h3>

       

        <fieldset>

       

            <legend>Elige</legend>

       

            <form action="#" class="code-selector">

                <div>

                    <label for="type-size">Tamaño: </label>

                    <select name="type-size" id="type-size">

                        <option selected="selected" rel="URL Imagen 125x125">125 x 125</option>

                        <option rel="URL Imagen 300x250">300 x 250</option>

                        <option rel="URL Imagen 465x55">465 x 55</option>

                        <option rel="URL Imagen 768x90">768 x 90</option>

                        <option rel="URL Imagen 120x240">120 x 240</option>

                        <option rel="URL Imagen 318x54">318 x 54</option>

                        <option rel="URL Imagen 50x50">50 x 50</option>

                    </select>

                </div>

               

                <div>

                    <label for="code-example">Code: </label>

                    <textarea rows="10" cols="25" id="code-box">&lt;a href="http://www.codeslife.es.tl"&gt;&lt;img src="http://img25.xooimage.com/files/0/4/6/125-1402460.jpg" alt="Afiliate" /&gt;&lt;/a&gt;</textarea>

                    <p class="note">Sólo tienes que copiar y pegar el texto anterior en su sitio web. Su código de afiliado ya se ha incluido!</p>

                </div>

            </form>

           

            <label>Ejemplo: </label>

            <div class="example-area" id="graphic-example-area">

       

                <a href="http://www.codeslife.es.tl"><img src="http://img25.xooimage.com/files/0/4/6/125-1402460.jpg" alt="Afiliate" /></a>

           

            </div>

            <p class="note">Ejemplo gráfico puede reducirse más arriba, pero no será colocado en su propia página.</p>

       

        </fieldset>

       

    </div>

   

    </div>