Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 6 de 6

Tema: Imagenes en miniatura, como crearles el clik y ampliarlas??

  1. #1
    Recien Llegado! Habitante
    Fecha de Ingreso
    25 oct, 10
    Mensajes
    25
    Poder de Reputación
    14

    Imagenes en miniatura, como crearles el clik y ampliarlas??

    Hola.. estoy haciendo una web con muchas galerias de imagenes... resulta q tengo lo siguiente:

    [img]../objetos/02.jpg[/img]
    [img]../objetos/03.jpg[/img]
    [img]../objetos/04.jpg[/img]
    [img]../objetos/05.jpg[/img]
    [img]../objetos/06.jpg[/img]
    [img]../objetos/07.JPG[/img]

    Estas imagenes, las he creado en el html kit, como ven las fotos tienen un tamaño pequeño para que ocupe menos espacio. La pregunta es..
    como hacer para que se active la foto en el momento que le pongo el mouse y que se amplie la foto? Comento que las imagenes no estan dentro de ninguna capa ni nada.. simplemente las coloque donde creia conveniente hacerlo. Les agradezco la ayuda prestada.

  2. #2
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,599
    Poder de Reputación
    71
    yo tengo dos imagenes

    una en pekeño, y otra en grande

    http://www.reparacionderines.com/ubicanos.html

    mira en los crokis

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    25 oct, 10
    Mensajes
    25
    Poder de Reputación
    14

    Imagenes en miniatura, como dar margen?

    Hola Yaneth.. gracias x la respuesta... Te comento .. he intentado sacar provecho del codigo fuente de la web q me enviaste.. pero si te soy sincero.. como soy novato en esto.. y aun asi habiendo hecho el curso paso a paso me cuesta crear la web.. pues en base a eso y a codigos q tenia en la hoja de estilos.. pues no me salia bien las imagenes.. de resultado pues tengo un orden en las fotos que me gusta como va quedando.. el proble mas q estan muy pegadas unas de otras.. y por mas que le aplico margin padin border y tanto en el html y en la hoja de estilos no logro separarlas.. que debo hacer???

    HTML

    <div id="fotos"
    [img]../objetos/m01.jpg[/img]
    [img]../objetos/m02.jpg[/img]
    [img]../objetos/m03.jpg[/img]
    [img]../objetos/m04.jpg[/img]
    [img]../objetos/m05.jpg[/img]
    [img]../objetos/m06.jpg[/img]
    [img]../objetos/m07.jpg[/img]
    [img]../objetos/m08.jpg[/img]
    [img]../objetos/m09.jpg[/img]
    [img]../objetos/m10.jpg[/img]
    </div>


    Y Pues para cuadrarlo un poco en la hoja de estilos le he agregado esto

    #fotos {margin: 50px 150px 50px 150px } aqui lo que me hace es q me separa del borde de la web mas no entre fotos.. solucion??

    gracias x la atencion prestada

    psd- recuerda que son imagenes en miniatura que al darle clic se amplian (esto ya lo tengo hecho)

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de gjulian
    Fecha de Ingreso
    29 ene, 09
    Ubicación
    Sevilla
    Mensajes
    558
    Poder de Reputación
    19

    Re: Imagenes en miniatura, como dar margen?

    Cita Iniciado por jovanotti
    <div id="fotos"
    Para empezar la etiqueta debe quedar completa <div id="fotos">.
    Luego los margin se los haz dado al div no al las img.
    En estilos crea: a img {margin:50px 150px;} y se te separaran las imagenes.
    Lo mejor de caerse al tropezar, es volverse a levantar.

  5. #5
    Moderador CCTW Habitante Avatar de Yaneth
    Fecha de Ingreso
    27 abr, 07
    Ubicación
    Mèxico
    Mensajes
    10,599
    Poder de Reputación
    71
    exacto
    le diste el margen al div que los contiene

    puedes utilizar la solucion que te dieron, o bien
    algo asi

    .separar {margenxxxxx}

    y en html

    [img]../objetos/m01.jpg[/img]

    saludos
    ______________________________________

    reparacion de rines


    _____________________________________

  6. #6
    Recien Llegado! Habitante
    Fecha de Ingreso
    25 oct, 10
    Mensajes
    25
    Poder de Reputación
    14

    bordes a las fotos, como hacerlas?

    Hola gjulian.. gracias x el aporte enviado.. pero en este caso no me valio, xq tambien me afecta a la foto que tengo puesta arriba en la zona dond va el logo.
    Yaneth respuesta exacta.. por fin pude separar las imagenes..pero el problema que tengo ahora es que quiero darle borde a las fotos, pero lo mismo que antes.. cada vez que retoco la hoja de estilos o el html tratando de meterle el borde.. o unas veces no me funciona u otras veces me retoca la imagen que tengo puesta x logo. (una foto al ancho de la pagina).. como debo hacer para solo retocar las fotos de este codigo??? de hecho me paso algo muy curioso con una tabla que inserte y habiendole dado bordes.. no me aparecieron.. creo q hay algo en la hoja de estilos que no me deja q aparezcan en el html... aunque viendo como me quedo la tabla.. sin los bordes pero espaciado entre renglon y renglon.. pues me guste y asi lo deje.

    como aplico el borde a estas fotos, y colocarle algun color al borde?

    <div id="fotos">
    [img]../objetos/m01.jpg[/img]
    [img]../objetos/m02.jpg[/img]
    [img]../objetos/m03.jpg[/img]
    [img]../objetos/m04.jpg[/img]
    [img]../objetos/m05.jpg[/img]
    [img]../objetos/m06.jpg[/img]
    [img]../objetos/m07.jpg[/img]
    [img]../objetos/m08.jpg[/img]
    [img]../objetos/m09.jpg[/img]
    [img]../objetos/m10.jpg[/img]
    </div>


    mi hoja de estilos ahora esta asi..

    * {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center }
    h2 {font.size: 1.1em; color:red ; font-weight: bold ; text-decoration: none ; text-align: center }
    body {text-align: center}
    #global {width:800px ; margin:4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
    #cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #logotipo {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: black ; border: black 1px solid ; height:30px }
    #navegacion li {float:left ; list-style:none ; margin: 10px 15px 0px 15px ; padding: 0px 0px 13px 0px ; font-size: 0.9em }
    #navegacion ul {margin-left: 21px }
    #contenido {background-color: #EED2EE ; border-left: black 1px solid ; border-right: black 1px solid ; padding: 40px 20px 30px 20px }
    #contenido p {margin: 15px 5px 0px 10px ; text-indent: 15px }
    #menu {width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px }
    #menu li {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
    #pie {border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px }
    #pie li {list-style: none ; font-size: 12px }
    #pieuno {float:left ; width:150px }
    #piedos {float:left ; width:498px }
    #pietres {float:left ; width:150px }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
    a {}
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}
    #pie a {color: blue; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}
    #copyright {font-size:0.7em; text-align:center; color:white ; background-color:black ; width: 800px ; font-weight:bold}
    .lista {list-style-type: none ; margin:0 ; padding:0 }
    #fotos {margin: 50px 50px 50px 50px }
    .separar {margin: 30px 20px 30px 20px}

    Muchas gracias a la atencion prestada. Salu2

Temas Similares

  1. Imagenes en miniatura en sidebar.
    Por straN en el foro Foro General
    Respuestas: 8
    Último Mensaje: 30/11/2009, 19:58
  2. Como insertar fotos en miniatura
    Por duaso en el foro Foro General
    Respuestas: 1
    Último Mensaje: 14/06/2008, 09:37

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •