gif de lupa dentro de una imagen AYUDA!!!!

Citar

Escrito el 09 Sep 2011 12:20 am

Estoy trabajando en un proyecto en moodle 2.3 el cual lleva una infinidad de paginas html (es como un elearnin y yo maquetizo y subo las lecciones). la cuestion es q tengo una cantidad infinita de imagenes las cuales al darle clic se hacen grandes, pero ahora mi jefe quiere que coloque un gif o png de referencia en la imagen para q los usuarios sepan q se hace grande, lo malo es q no puedo insertar divs porq son mas de 100 imgs, tampoco retocarlas en photoshop, ni hacer 2 imagenes (peq y grande) todo eso me quita tiempo. SI ALGUIEN PUEDE AYUDARME SE LO AGRADECERIA MUCHISISISISIMO.

PDT: tengo un css del cual tengo el control de todo y las imagenes unas estan alineadas a la izq y otras a la derecha

Por farana

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 09 Sep 2011 05:17 pm

Esto es un ejemplo

Código :

<style type="text/css">
   #floating-box{
   width:51px;
   height:51px;
   position:absolute;
   z-index:2;
   left: 50%;
   top: 50%;
   }
</style>
<body style="margin:0; padding:0; width:100% !important;">
<div id="container" style="width:900px; height:auto; margin:0 auto;">
   <div id="header" style="width:900px; height:509px; position:relative; z-index:1;">
    <img src="publicidad.jpg"  />
    </div>
    <div id="floating-box">
       <img src="faceboock.png"  />
    </div>
    
</div>
</body>

Es un ejemplo rapido, claro prueba con tus imagenes, nos comentas

saludos cordiales

Por joshuavw

Claber

306 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Juego, aprendo y programo

Citar

Escrito el 09 Sep 2011 05:34 pm

Muchas Gracias por tu ayuda Joshua, fijate q estube haciendo algunas pruebas y me funciona a la perfeccion, lo malo es que son aproximadamente 100 fotos, las cuales ya estan ingresadas en los htmls, entonces el colocar divs dentro de las imagenes, me atrasaria bastante por lo que necesito que dentro de mi codigo css pueda montar la imagen de la lupa en las propiedades del codigo. te envio un ejemplo:

Código:
.img_right_small
{
width: 177px;
height: 128px;
float:right;
margin-left:20px;
margin-bottom:5px;
margin-top:auto;
margin-right:20px;
border:1px solid #abb5c1;
display: inline-block;
border: solid 1px #000;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 3px 6px rgba(0, 0, 0, .4);
}

Este codigo se lo aplicas a la imagen y la alinea la pagina ya sea derecha o izquierda, ademas le da propiedades para hacer las esquinas de las imagenes redondas.

ADEMAS LA IMAGEN ESTA DENTRO DE LOS DIVS QUE ME AGRANDA LA IMAGEN (MODAL IMAGE), ESTA ES LA ESTRUCTURA DENTRO DEL HTML>

Código:

<div id="content">
<div id="basic-modal-ImgH1">
<a class="basicImgH1" href="#">
<img class="img_right_small" src="images/curso1/modulo1/mod01_lec01_img1.png" />
</a>
</div>


<div style="display: none; aling: center;" id="basic-modal-content-ImgH1">
<img src="images/curso1/modulo1/mod01_lec01_img1.png" width="800" height="600"/>
</div>
</div>

MUCHAS GRACIAS

Por farana

1 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 09 Sep 2011 05:42 pm

Mm si no quieres hacer la talacha crear una funcion de javascritpt en donde esta se ejecuta al cargar dicha pagina y escriba dicho div, claro los estilos ya estan declarados en tu hoja de estilos sin afectar la programacion, si es un curso en linea deberias ponerlo en el template principal es decir en el index donde vas jalando cada una de las paginas html involucradas claro creas un archivo .js y haces la llamada a dicha funcion

Saludos cordiales

Por joshuavw

Claber

306 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Juego, aprendo y programo

Citar

Escrito el 09 Sep 2011 05:46 pm

Sos grande, esa opcion creo q es la indicada, voy a hacerlo y te tengo los comentarios y si me sale, publico el resultado!!!

MUCHAS GRACIAS

Por farana

1 de clabLevel

Envíale un mensaje privado

gif de lupa dentro de una imagen AYUDA!!!!

Escribe una respuesta rapida