HTML - alternar imágenes sobre fondo

 
Vista:
sin imagen de perfil
Val: 4
Ha aumentado su posición en 38 puestos en HTML (en relación al último mes)
Gráfica de HTML

alternar imágenes sobre fondo

Publicado por Jose (3 intervenciones) el 28/12/2019 13:11:17
Hola, hace muchos años hice un curso de html y javascript pero no trabajé nunca de ello. No obstante recuerdo algunas cosas.
Ahora estoy necesitando crear una especie de configurador de producto con html, es decir, al fondo aparecería una imagen fija de una habitación medio vacía, y también se verían algunos muebles, pero estos muebles serían png recortados y puestos sobre la imagen de fondo, de tal manera que cuando yo hago click sobre cualquiera de ellos, éste se sustituye por otro mueble en el mismo sitio.

Esa es la idea principal, pero como estoy muy despegado de la programación, tengo que empezar a estudiar como hacerlo por algún lado, y no lo tengo claro.

Todas las academias me quieren vender el curso entero de javascript, y no necesito eso, sólo necesito hacer este producto de manera puntual.

Si álguien ha visto algún tutorial donde se explique algo parecido desde cero o me puede indicar por dónde empezar a investigar, le quedaría agradecido.

Un saludo y gracias de antemano.
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 ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

alternar imágenes sobre fondo

Publicado por ScriptShow (409 intervenciones) el 28/12/2019 19:55:57
Saludos Jose,

Cuando ajustamos el tamaño de la pantalla / dispositivo, la imagen de fondo cambia de tamaño y aspecto... Es decir: todas las imágenes han de guardar una proporción y posición con respecto a las otras. Esta es la parte más complicada. Por capas tampoco es fácil de conseguir. Por último, haciendo todas las imágenes del mismo tamaño y variando sólo el objeto, resultaría viable para empezar. El inconveniente sería acceder a la imagen en concreto (todas ocupan la pantalla) sin un orden de indexado. El resto del Script, es más "sencillo" de adaptar, según las necesidades.

La idea simple (ajustando la posición de la imagen-objeto) que NO guarda las proporciones:

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
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta id="viewport" name="viewport" content="width=device-width" initial-scale=1, maximum-scale=1, minimum-scale=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-touch-fullscreen" content="yes" />
<title>Img Bkg</title>
<style type="text/css">
html, body {
background: #000000 url('habitaculo.jpg') center fixed no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='habitaculo.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='habitaculo.jpg', sizingMethod='scale')";
}
 
.imgs {
position: fixed;
top: 240px;
left: 240px;
width: 240px;
height: auto;
border: 0px;
}
</style>
</head>
<body>
<img class="imgs" src="objeto.jpg" onclick="this.src='elotro.jpg'">
</body>
</html>

Espero sea útil.
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
sin imagen de perfil
Val: 4
Ha aumentado su posición en 38 puestos en HTML (en relación al último mes)
Gráfica de HTML

alternar imágenes sobre fondo

Publicado por Jose (3 intervenciones) el 29/12/2019 11:41:36
Muchísimas gracias ScriptShow. Esto me ayuda bastante.

Muy agradecido.
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