Estoy buscando JS/JQuery manera de hacer lo siguiente
1: presentación de una serie de fragmentos de pintura al lado a lo largo con un » no » de la imagen
2: Cuando un chip que se hace clic
R: resaltarlo con un borde para mostrar que ha sido seleccionada
B: Cambiar el valor de un campo de texto/tal vez un campo oculto con el apropiado nombre de color
(para ver las imágenes debe ser marcado índigo, solaria, etc y actualizar en consecuencia)

Me había encontrado con este post en Stackoverflow, pero no podía funcionar: jQuery selector de imagen

Y aquí está mi código actual basado en el enlace de arriba

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
  $('div#image_container img').click(function(){
    //set the img-source as value of image_from_list
    $('input#image_from_list').val( $(this).attr("src") );
});
</script>
</head>
<body>
<div id="image_container">
    <img src="images/vermillion.jpg" />
    <img src="images/riverway.jpg" />
    <img src="images/solaria.jpg" />
</div>
<form action="" method="get">
    <input id="image_from_list" name="image_from_list" type="text" value="" />
</form>
</body>
</html>

Cualquier ayuda sería muy apreciada!!!!


Bien terminé de arreglar el problema en realidad, y aquí está el código que he usado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="image_container">
    <img src="images/vermillion.jpg" col="red" border="0" />
    <img src="images/riverway.jpg" col="blue" border="0" />
    <img src="images/solaria.jpg" col="yellow" border="0" />
</div>
<form action="" method="get">
    <input id="image_from_list" name="image_from_list" type="text" value=""  />
</form>
<script>
    $("div#image_container img").click(function () {
        $("div#image_container img").attr("border","0");
        $(this).attr("border","4");
        $("input#image_from_list").val($(this).attr("col"));
    }); 
</script>
</body>
</html>
No estoy muy seguro de que tengo lo que tu pregunta es, ¿puede aclarar?
Quiero mostrar 3 imágenes – cuando una imagen se hace clic en quiero el valor de un campo de formulario actualizado para reflejar que haga clic en. Si es posible un borde alrededor de la imagen actual sería bueno también. ¿Que sentido?

OriginalEl autor dscl | 2011-07-21

3 Comentarios

  1. 3

    Tu código no funciona porque se le olvidó adjuntar tu jquery declaraciones en $(document).listo bloque. Su código actualizado funciona como movido el bloque de secuencia de comandos de la parte inferior, pero técnicamente, usted debe incluir en el documento.listo

    Aquí es una versión de trabajo

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $('#image_container img').click(function(){
        //remove border on any images that might be selected
        $('#image_container img').removeClass("img_border")
        //set the img-source as value of image_from_list
        $('#image_from_list').val( $(this).attr("src") );
          $('#data_value').val( $(this).attr("id") );
         //$('#data_value').val( $(this).data("options").color );
    
        //add border to a clicked image
        $(this).addClass("img_border")
    });
    
    })
    </script>
    <style>
        .img_border {
            border: 2px solid red;
        }
    </style>
    </head>
    <body>
    <div id="image_container">
        <img src="images/vermillion.jpg" id="vermillion"/>
        <img src="images/riverway.jpg" id="riverway"/>
        <img src="images/solaria.jpg" id="solaria"/>
    
    </div>
    
    <form action="" method="get">
        <input id="image_from_list" name="image_from_list" type="text" value="" />
         <input id="data_value"  type="text" value="" />
    </form>
    </body>
    </html>
    Muchas gracias!! Soy un newb con JS/JQuery así que estaba tratando de pieza cosas juntos, a partir de ejemplos online =)

    OriginalEl autor Michal

  2. 4

    Sé que esto ya ha sido contestado pero he desarrollado un plugin que resuelve este problema exacto y está muy bien mantenido.

    http://rvera.github.com/image-picker/

    Puede el plugin se utiliza para almacenar la url de la imagen en un campo de formulario oculto como una lista de los delimitado url? No se ha dicho de este en el docs…
    Lo sentimos, el plugin no hace eso.
    Este plugin no funciona cuando usted desea agregar html a la etiqueta de la parte..

    OriginalEl autor RVera

  3. 2

    Actualizado el código que finalmente se utiliza en la pregunta, pero aquí es así

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <div id="image_container">
        <img src="images/vermillion.jpg" col="red" border="0" />
        <img src="images/riverway.jpg" col="blue" border="0" />
        <img src="images/solaria.jpg" col="yellow" border="0" />
    </div>
    <form action="" method="get">
        <input id="image_from_list" name="image_from_list" type="text" value=""  />
    </form>
    <script>
        $("div#image_container img").click(function () {
            $("div#image_container img").attr("border","0");
            $(this).attr("border","4");
            $("input#image_from_list").val($(this).attr("col"));
        }); 
    </script>
    </body>
    </html>

    OriginalEl autor dscl

Dejar respuesta

Please enter your comment!
Please enter your name here