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
Poner la imagen de background y situar el formulario a través de CSS encima? Sin más detalles complicado sacar algo.
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
#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
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.
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;
}
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