PHP: Tengo una imagen y quiero ponerle formilario

Craylow

Buenas a todos,

Abro esto a ver si alguno sabe como podria hacerlo, tengo una imagen con unos dibujos concretos, en ciertas partes de dichos dibujos me interesa poner un desplegable de formulario normal. lo que no se es como hacerlo para poner los desplegables exactamente donde quiero. Alguna idea?

Gracias de antemano

B

Poner la imagen de background y situar el formulario a través de CSS encima? Sin más detalles complicado sacar algo.

1 1 respuesta
Craylow

Esque basicamente es digitalizar una pizarra que tienen, la cual tiene ya sus circulitos y columnas para listar gente en las mismas en sus "casillas", no sabria describirlo mucho mas, pero nunca he tenido que hubicar desplegables en puntos concretos asi que voy perdido con el tema

1 respuesta
B

#3 desplegables en puntos concretos???? Puedes posicionarlo poniéndole una clase al elemento y modificando sus propiedades CSS.
https://www.w3schools.com/cssref/pr_class_position.asp

taltal

yo metería la imagen como un background, deberías poner un ancho y altura fijada para poder posicionar luego los elementos clicables que irian por encima de la imagen, a esta capa de background, donde iran dentro los elementos que quieres posicionar dale una position:relative. Para posicionarlos simplemente desde css apuntas a la clase de cada elemento y le pones una position:absolute y top y left que correspondan con px.

7 días después
Craylow

Al final he optado por una opcion distinta, generar elementos dinamicamente con javascript a los que ira adjunto una imagen y un cuadro de texto, ahora bien, lo que no se es como hacer que haciendo click sobre dicho elemento este cambie el color del background, dejo aqui mi chorracodigo
Con esto genero los elementos:

    $(document).ready(function() {

    // CREAR MAS DIV, CON 'ABSOLUTE' POSICIONAMIENTO.
    $('#btClickMe').click(function()
					{
            var dynamic_div = $(document.createElement('div')).css({
            border: '1px dashed',
							position: 'absolute',
							left: element_pos,
            top: $('#divContainer').height() + 20,
            width: '250',
							height: '120',
							padding: '3',
							margin: '0',
							backgroundColor:' #28bfeb',
							id: $('iCnt'),
							class: 'trabajadores'
        });

        element_pos = element_pos + $('#divContainer').width() + 20;

        //$(dynamic_div).append('Arrastrameeeeee');
					$(dynamic_div).append('<img src="img_logo.gif" width="90" height="100"><input type="text" value="">');

        // AÑADIR LA DIV CREADA A "body" para que sea objeto independiente.
        $(dynamic_div).appendTo("body").draggable().resizable();
					$(dynamic_div).onclick = changeColor(this);

        iCnt = iCnt + 1;
    });

Con eso intento cambiar el color, pero no hay manera, algo me dejo y no se el que:

    function changeColor() {
        this.style.backgroundColor=' #ebad28';
        return false;
    }
Yumigestor

Hola, Creo que la función changeColor la tienes mal, seria:

function changeColor(e) {
        e.style.backgroundColor='#ebad28';
        return false;
}

No obstante creo que estas complicando las cosas bastantes, creo que seria mas sencillo, meter todos los input en un div, y por css, posicionar el div con la imagen como fondo, y el resto de elementos dentro...
Vamos lo que dijo #2

Craylow

El problema es que no todos los elementos son iguales y van en la misma posicion en las varias pizarras que se usan, por eso me veo obligado a que se generen y se pudan colocar donde quiera uno

Yumigestor

Eso puedes hacerlo igual con css con clases y hacerlo adaptativo etc...

Mi consejo lo que puedas hacer con css, no lo hagas con js...

Saludos

Usuarios habituales