Comunidad de diseño web y desarrollo en internet online

Scroll para botonera de imagenes

Citar            
MensajeEscrito el 28 Ene 2008 06:51 am
Hola gente, les pido una mano, les cuento...

Tengo que hacer una sección para mostrar productos, tengo dos tablas a utilizar, en una se mostrarán los productos en un tamaña chico, cada imagen serán un botón que al hacer click el usuario, mostrarán en la otra tabla la imagen en grande... en el caso de la tabla donde irán las chicas

como son muchas necesito un espacio grande verticalmente....
como lo hago, con una capa ??? que intercambie imagenes ??? cómo le pongo el scrolla esa capa ???


Si puden darme una mano o alguna suguerencia se los agradezco
Uso Dreamweaver.
Gracias.

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

firefox
Citar            
MensajeEscrito el 29 Ene 2008 09:48 am

El Ruso Loco escribió:

Uso Dreamweaver.
No uses Dreamweaver.
No al menos, hasta que no domines HTML y CSS.
Mientras, te aconsejo que uses un editor de texto plano (tipo "notepad"), y un buen libro o manual online como guía.
Es un consejo.

Sobre lo que preguntas:
se me ocurre:
<script>
function pon_imagen()
{for(j=0;j<document.images.length;j++)
______{if(document.images[j].parentNode.tagName=='LI')
____________{document.images[j].onclick=function()
_________________{document.getElementById('vista').innerHTML='<img src="'+this.src.replace('icon','real')+'" />';}
____________}
______}
}
window.onload=function(){pon_imagen()};
</script>
<style>
.menu {float:left;}
.vista {float:left; }
</style>
<body>
<div class="menu">
<ul>
<li><img src="icon_razz.gif" /></li>
<li><img src="icon_rolleyes.gif" /></li>
<li>[...]</li>
</ul>
</div>
<div class="vista" id="vista" ></div>
</body>
Para ello, debes cumplir:
    - Los nombre de las imágenes "botón", han de empezar: "icon_"
    - Los nombres de las imágenes "grandes", han de empezar: "real_"
    - Las imágenes "botón", y las "grandes", han de estar en la misma carpeta


A tí te queda hacer el script compatible y accesible para todos los navegadores, aunque esta base, bien vale para los principales, y con las configuraciones más usuales.


PD: Rogaría a algún mod, que moviera este hilo a donde corresponda. A mí se me ocurre, a:
XHTML, CSS, Javascript y AJAX
Expertos y novatos en el diseño web de la manera correcta con estándares web.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 29 Ene 2008 01:38 pm
Gracias Rizome, por la data y las sugerencias !!! Muy amable

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

firefox
Citar            
MensajeEscrito el 29 Ene 2008 02:25 pm

El Ruso Loco escribió:

Gracias Rizome, por la data y las sugerencias !!! Muy amable

siempre es un placer

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 01 Feb 2008 10:00 pm

rizome escribió:

PD: Rogaría a algún mod, que moviera este hilo a donde corresponda. A mí se me ocurre, a:
XHTML, CSS, Javascript y AJAX
Expertos y novatos en el diseño web de la manera correcta con estándares web.


Es que me parece un tema recurrente, y aquí, es difícil de encontrar.
:(

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 02 Feb 2008 06:41 am

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 02 Feb 2008 10:44 am

El Ruso Loco escribió:

[...] quiero poner fotos chicas de 60X60px que sean botones, que cuando el usuario haga click, en la otra tabla aparezcan las fotos grandes.[...]

Inyaka escribió:

[...] sigue este link que te ayudar muchisimo
http://www.cssplay.co.uk/menu/
Lo cierto, es que acabo de agregar esa página a mis marcadores, pues está llena de tesoros.
Gracias Inyaka.

Pero al tajo.
El Ruso Loco busca que las imágenes cambien "al hacer click".
Este hecho, puede parecer banal, pero puede tener su cierta importancia.
La cuestión, es que los CSS sólo pueden trabajar con ":hover".
Eso hace, que la imagen desaparezca tan pronto como "salga el ratón", y puede que lo que se busque, es mantenerla fija (se me ocurren varios motivos para ello)

Resumiendo:
    - Si se quiere mantener la imagen fija tras click > javascript
    - Si la imagen no tiene porqué mantenerse > CSS (pseudoclase ":hover")



Y efectivamente, lo que nunca, nunca, nunca, nunca debes hacer, es usar tablas para esto.



Por favor.
Se requiere la presencia de algún MOD:
PD: Rogaría a algún mod, que moviera este hilo a donde corresponda. A mí se me ocurre, a:
XHTML, CSS, Javascript y AJAX
Expertos y novatos en el diseño web de la manera correcta con estándares web.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 02 Feb 2008 02:23 pm

rizome escribió:

Resumiendo:
    - Si se quiere mantener la imagen fija tras click > javascript
    - Si la imagen no tiene porqué mantenerse > CSS (pseudoclase ":hover")
He podido ver, que también con CSS, se pueden controlar unas especies de "onclick", con el ":focus", y ":active".
Así que se podría hacer...
Pero... el nivel de complicación, me parece notablemente mayor que si se hiciera con javascript.
(además que la usabilidad del resultado, es dependiente del navegador, y se hace algo "compleja" en algunos casos)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 02 Feb 2008 02:38 pm
Gente, están al palo con la data !!! buenísimo

... y sí, tengo que ponerme a estudiar, pero lo copado es que cada día hay algo nuevo en mi cocuza

Voy a ver si le saco la ficha a todo esto, después les cuento cómo me fué !!!
MUY AGRADECIDO !!!

Por El Ruso Loco

85 de clabLevel



Genero:Masculino  

Avellaneda. Bs As.

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.