image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

cambiar contenido de caja dinamicamente

Volver al foro | Responder | Añadir nuevo tema


De: atoleon
Fecha: 22/06/2007
Mensaje:

Buenas a todos

Estoy tratando de lograr una cosa. Quiero crear una especie de caja cuyo contenido sea la información de un determinado producto. Yo tengo varios productos en mi web. y cada producto tiene una breve explicación. Bien, yo lo que quiero es crear una caja que contenga la descripción de cada producto. y que exista un boton para cada producto. Así, cuando el usuario pulsa el botón de un producto en la caja aparece la descripción de ese producto. Cuando pulsa otro producto, pues se carga en la misma caja la información de ese otro producto. y así con todos.

Espero sepan ayudarme diciendome si es posible hacer esto y si existe algún manual que lo explique. Un saludo y gracias


Quizás le interese
De: jbosch(vosk)
Util para: 8 personas

Fecha: 23/06/2007
Mensaje:

me temo que esto no es cuestion de css sino de javascript, y ya veras que es muy facil de implementar. supongamos que todo está en un formulario, y que la caja es un campo de texto (de momento vayamos a lo fácil) algo así

<form>
<input type="text" name="descripcion">
...aqui iran los productos
</form>

los botones de los productos seran (de momento) simples tipos button, que llevaran un manejador para el evento click que llamará a la funcion que se encargará de todo, p.ej

<input type="button" value="Producto 1" onClick="A(this.form,0);">
<input type="button" value="Producto 2" onClick="A(this.form,1);">

los argumentos de la funcion no son gratuitos, sino que son (por orden) un puntero al formulario y un indice de una lista que contendrá la descripcion (podrias enviar la descripcion como texto pero quedaria un poco cutre).

ahora la parte javascript: primero estará la lista de descripciones de productos (declarada como variable global)

var ldp=new Array;
ldp[0]="Este es el producto #1";
ldp[1]="Y el producto #2";

la idea de hacerlo de esta forma es que puedas llenar la lista de descripciones desde un script de servidor. observa la relacion que hay entre los argumentos de la llamada a la funcion y el orden de la lista de descripciones.

ahora la funcion 'A()' será tal como

function A(f,i) {/**/}

ya te imaginas que 'f' será el puntero al form e 'i' el indice de la descripcion. dentro de la funcion puedes referenciar el campo de descripciones con

f.descripcion;

y cambiaras su contenido con 'f.descripcion.value', de forma que juntandolo todo queda algo así

f.descripcion.value=ldp[i];

que traducido es: del form 'f', al elemento cuyo nombre es 'descripcion' asignale como atributo 'value' el valor del elemento #i de la lista 'ldp'. fácil no?

ahora puedes complicarlo tanto como quieras. en vez de usar un campo de texto como caja de descripcion puedes usar un div, o un span, o una celda de una tabla, y en vez de usar una descripcion textual puedes usar codigo html. de esta forma podrias tener una lista tal como

var lpd=new Array;
ldp[0]="<b>Producto 1</b><br>Este es el producto 1";
ldp[1]="<b>Producto 2</b><br>Y este es el otro";

con este nuevo planteamiento no será necesario usar formularios, los botones de los productos serán tal como

<input type="button" value="P0" onClick="A(0,'descripcion');">
<input type="button" value="P1" onClick="A(1,'descripcion');">

como ves no uso la referencia al formulario. la caja de descripciones será un simple span (pdria ser una celda, un div,...)

<span id="descripcion"></span>

observa que en este caso es importante asignar un identificador a la caja para poder acceder a ella desde la funcion. y la funcion 'A()' será tal como

function A(i,d)
{
document.getElementById(d).innerHTML=ldp[i];
}

donde 'i' será el indice de la descripcion, y 'd' será el identificador de la caja de descripciones donde quieres que se muestre (podrias tener varias cajas de descripciones). la llamada 'document.getElementById()' sirve para referenciar un elemento via su atributo id, y el 'innerHTML' es el codigo fuente que contiene.

a partir de aquí todo se basará en esto: dentro del codigo fuente de la descripcion puedes usar p.ej. imagenes, u otras etiquetas (si usas imagenes tendras que hacer una precarga de imagenes).

quedate con la idea de la linea de trabajo, lo demas será para mejorar la presentacion. puedes echar un vistazo a otras webs (solo para coger la idea, no el codigo), y veras que la caja de descripciones esta en posicion absoluta (flotante), y dinamicamente se resitua cerca del producto que seleccionas.

jbosch(vosk)



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.