Ejemplo gráfico. ¿Cómo puedo clicar botones y que aparezcan imágenes aquí...?

Tonimn · #1 (**permalink**) 26/05/2011, 11:49

Lo de la izquierda son botones y quiero que clicando en ellos me aparezcan imágenes en el mismo sitio donde está la grande ¿cómo se hace en Dreamweaver que no sea con marcos?

carlospc · #2 (**permalink**) 26/05/2011, 15:32

bueno, lo primero es que las imagenes son solo links, mas no botones, y al clickarlas llamas a una funcion javascript que escriba del lado derecho lo que desees, previamente al area donde va salir la imagen grande debe tener asignado un ID para el JS

Suerte

Tonimn · #3 (**permalink**) 26/05/2011, 15:43

¿Y eso cómo se hace? ¿algún enlace a un videotutorial, por favor?

JMS · #4 (**permalink**) 26/05/2011, 18:39

Esto lo puedes hacer con un jQuery, mira aqui te dejo un tuto:

http://www.1stwebdesigner.com/css/36...igation-menus/

Aqui hay otro, pero en este en lugar de usar texto como link, usa las imagenes que representan los botones que quieres y listo

http://www.grupokumiko.com/generales...siguiente.html

Tonimn · #5 (**permalink**) 27/05/2011, 04:29

No tengo ni idea de javascript y me parece muy complicado ¿alguna manera más sencilla aparte de marcos o Flash? ¿tan desaconsejable es hacerlo con Flash?

JMS · #6 (**permalink**) 27/05/2011, 08:36

Mira si quieres que se muestre simplemente los link pero sin efecto, esta algo asi
http://www.grupokumiko.com/generales...siniframe.html

Solo que este si es muy simple, te explico:

Esto tiene que ir entre el <head> y </head>

Código HTML:

<script>
function changeImage(filename)
{
   document.mainimage.src = filename;
}
</script>

Estos son los link, puedes aumentarle o quitarle según el número de imágenes que quieres manejar, en este caso es texto pero solo sustituyes dicho texto con la ruta de la imágen que deseas (<img>)

Código HTML:

<a href="javascript:changeImage('image1.jpg')">Image 1</a>
<a href="javascript:changeImage('image2.jpg')">Image 2</a>
<a href="javascript:changeImage('image3.jpg')">Image 3</a>
<a href="javascript:changeImage('image4.jpg')">Image 4</a>

Donde los Image 1-5 pueden ser sustituidos (repito) por los <img src="tu imagen">

Esto es lo que representa el "iframe" que no es iframe, solo es como quien dice el <div> donde se mostrará tus imágenes, lo puedes colocar donde tu desees

Código HTML:

<img name="mainimage" src="blank.jpg">

blank.jpg: es la primer imágen que manda a llamar.

Un ejemplo de esto, esta en la liga que te di al inicio, es lo más simple que conosco para lo que quieres hacer sin usar iframe

Tonimn · #7 (**permalink**) 07/06/2011, 05:25

Muchas gracias, sirve para poner imágenes .jpg.
Pero también quiero poner .html. Por ejemplo, quiero poner imágenes en grande que contengan también botones y eso no me ha salido bien.

JMS · #8 (**permalink**) 07/06/2011, 08:58

Si lo quieres muy simple como lo anterior no se como ayudarte pero si hay maneras con javascript y jQuery que conosco.