CSS - Posicionar de forma dinámica elementos sobre una imagen y guardar sus coordenadas en BD

   
Vista:

Posicionar de forma dinámica elementos sobre una imagen y guardar sus coordenadas en BD

Publicado por Lisandro (6 intervenciones) el 06/09/2017 17:51:16
Buenas días a todos, espero puedan ayudarme con este problema, resulta que tengo la imagen de un plano y sobre el quiero posicionar elementos como bombillas de luz, el problema esta en que mi sistema es dinámico y el usuario tiene la capacidad de crear tantas bombillas quiera, al hacer esto quiero tener una opcion de posicionar la imagen de la bombilla en el plano y guardar sus coordenadas en la BD.
Como lo podria hacer?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device−width, initial−scale=1.0" />
	<title>Menú Vertical Multinivel con HTML5 y CSS 3</title>
	<link rel="stylesheet" href="https://cdn.rawgit.com/olton/Metro-UI-CSS/master/build/css/metro-icons.min.css">
	<link rel="stylesheet" href="css/main.css">
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<style type="text/css">
	*{
		margin: 0;
		padding:0;
	}
.contenedor-principal{
 	width: 100%;
 
}
.contenedor-izquierdo{
	width: 15%;
	height: 660px;
	background-color: black;
	float: left;
}
.contenedor-derecho{
	width: 85%;
	float: right;
 
}
.titulo-inicio{
	background-color: #00BFFF;
	color: white;
	text-align: center;
}
.contenedor-imagen{
 
		width: 85%;
		margin: 0 auto;
 
	}
#plano{
	width: 100%;
	margin: 0 auto;
	position: relative;
 
}
 
	</style>
 
</head>
<body>
 
	<div id="idInicio" class="contenedor-principal">
		<div class="contenedor-izquierdo">
		    Menú lateral derecho
		</div>
		<div class="contenedor-derecho">
			<h1 class="titulo-inicio">Plano</h1>
			<div class="contenedor-imagen">
				<img  id="plano" src="plano.png" >
				<!-- Estas bombillas se llaman automaticamente desde la BD-->
				<img  id="1" class="bombilla" src="on.png" width="60px" height="100px"/>
				<img  id="2" class="bombilla" src="on.png" width="60px" height="100px"/>
				<img  id="3" class="bombilla" src="on.png" width="60px" height="100px"/>
				<img  id="4" class="bombilla" src="on.png" width="60px" height="100px"/>
				<img  id="5" class="bombilla" src="on.png" width="60px" height="100px"/>
 
 
			</div>
 
		</div>
 
	</div>
 
</body>
</html>

En estos momentos lo tengo como en la primera imagen pero quiero que se vea como en la segunda

1
2
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique

Posicionar de forma dinámica elementos sobre una imagen y guardar sus coordenadas en BD

Publicado por Enrique (43 intervenciones) el 12/09/2017 00:13:45
Con jquery ui puedes hacer drag de cualquier elemento y puede darte las posiciones del elemento respecto al contenedor
aquí encontraras la documentación.
https://jqueryui.com/draggable/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

Posicionar de forma dinámica elementos sobre una imagen y guardar sus coordenadas en BD

Publicado por Lisandro (6 intervenciones) el 20/09/2017 05:31:18
Muchas gracias Enrique, me funcionó de maravilla
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Revisar política de publicidad