Problema para ubicar una imagen

Montes28 · #1 (**permalink**) 12/02/2014, 14:31

hola amigos necesito ubicar una imagen al lado izquiero o derecho para que mediante jquery poder realizar un comportamiendo,

asi funciona bien para dos imagenes

Código CSS:

Ver original<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="http://www.forosdelweb.com/images/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="http://www.forosdelweb.com/images/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>

yo lo estoy intendo utilizas asi para 3 pero me funciona el comportamiento:

Código CSS:

Ver original<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="consultar.png" title="Consultar" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="edit.gif" title="Modificar" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="delete3.png" title="Eliminar" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>

este es el codigo completo

Código Javascript:

Ver originaleventMouseover: function(event, domEvent) {
                var layer = '<div id="events-layer" class="fc-transparent" style="position:absolute; width:100%; height:100%; top:-1px; text-align:right; z-index:100"><a><img src="http://www.forosdelweb.com/images/editbt.png" title="edit" width="14" id="edbut'+event.id+'" border="0" style="padding-right:3px; padding-top:2px;" /></a><a><img src="http://www.forosdelweb.com/images/delete.png" title="delete" width="14" id="delbut'+event.id+'" border="0" style="padding-right:5px; padding-top:2px;" /></a></div>';
                $(this).append(layer);
                $("#delbut"+event.id).hide();
                $("#delbut"+event.id).fadeIn(300);
                $("#delbut"+event.id).click(function() {
                    $.post("delete.php", {eventId: event.id});
                    calendar.fullCalendar('refetchEvents');
                });
                $("#edbut"+event.id).hide();
                $("#edbut"+event.id).fadeIn(300);
                $("#edbut"+event.id).click(function() {
                    var title = prompt('Current Event Title: ' + event.title + '\n\nNew Event Title: ');
                    
                    if(title){
                        $.post("update_title.php", {eventId: event.id, eventTitle: title});
                        calendar.fullCalendar('refetchEvents');
                    }
                });
            },

Alexis88 · #2 (**permalink**) 13/02/2014, 16:46

Puedes colocar una imagen a la derecha o a la izquierda mediante la propiedad float:

Código CSS:

Ver original#imagenDerecha{
    float: right;
}
 
#imagenIzquierda{
    float: left;
}

Un ejemplo en ejecución: http://jsbin.com/wazex/1

Saludos

Montes28 · #3 (**permalink**) 13/02/2014, 21:31

Alexis88 gracias por responder y si necesitara una en medio?

http://imageshack.com/a/img59/4989/5zt3.png en esta imagen ubico las 3 imagenes pero necesito que cada al darle click tenga un comportamiento.

Alexis88 · #4 (**permalink**) 14/02/2014, 01:14

¿Te refieres a dejarlas así?: http://jsbin.com/wazex/2

En ese ejemplo, a las imágenes de la derecha y la izquierda, les aplico lo que te expliqué antes, mientras que a la tercera, le aplico lo siguiente:

Código CSS:

Ver original#medio{
    position: absolute;
    width: 20em;
    margin-left: -10em;
    left: 50%;
}

Le doy una posición absoluta, con la cual el elemento toma una posición inamovible dentro del documento, además, me permite aplicar un 50% de alejamiento desde su margen izquierdo con respecto al del elemento que lo contiene, que en este caso es el <body> del documento, además, le aplico un margen izquierdo equivalente a la mitad de su ancho pero en negativo, para acercar al elemento exactamente la mitad de su ancho hacia el lado izquierdo, quedando finalmente centrada la imagen.

Saludos