Foros del Web » Creando para Internet » CSS »

Index con jpg y html a pantalla completa.

Estas en el tema de Index con jpg y html a pantalla completa. en el foro de CSS en Foros del Web. Hola, tengo una dudita, me explico: tengo una foto que necesito que se vea ocupando toda la pantalla independientemente de la resolución del monitor y ...
  #1 (permalink)  
Antiguo 18/11/2010, 10:53
 
Fecha de Ingreso: enero-2010
Mensajes: 66
Antigüedad: 7 años, 10 meses
Puntos: 0
Index con jpg y html a pantalla completa.

Hola, tengo una dudita, me explico:
tengo una foto que necesito que se vea ocupando toda la pantalla independientemente de la resolución del monitor y lo necesito en html con una foto en jpj o png, no lo puedo hacer en flash ya que google no me cachea el index con flash, si alguin me puede dar un consejito, tengo que decir que no tengo mucha idea de html..., gracias.
  #2 (permalink)  
Antiguo 18/11/2010, 11:11
 
Fecha de Ingreso: mayo-2009
Mensajes: 19
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Index con jpg y html a pantalla completa.

Usas dreamweaver?
En propiedades de página te da la posibilidad de ponerle una imagen como fondo, la cual siempre se va a ajustar a la resolución.

Date una vuelta por aca:
http://www.w3.org/TR/css3-background/#the-background-size

Última edición por fabriii; 18/11/2010 a las 11:29
  #3 (permalink)  
Antiguo 18/11/2010, 11:55
 
Fecha de Ingreso: enero-2010
Mensajes: 66
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Index con jpg y html a pantalla completa.

Hola, lo que pasa es que no quiero que se distorsione, lo que quiero es que se ajuste por lo menos en el alto, lo que pasa que en el ancho entonces no se ve la imagen y se ve de fondo otro color, no se si se puede hacer lo que quiero o lo se puede hacer en flash con diagramacion líquida, lo tenia hecho en flash pero google no me cachea el index (seguro que lo habre hecho mal o regular por que lo normal es que lo hubiera cacheado bien).

Ahora mismo lo que tengo es la imagen proporcionada en el alto al 100% y le he metido por detras una imagen para que disimule el fondo de detras, ¿si puedes ayudarme a hacerlo en flash correctamente con diagramacion?.

Por otro lado y ya se que son muchas preguntas.., en la que tengo hecha con el alto al 100% le he creado un mapa (zona interactiva) sobre el texto español para ir a la web en español pero este mapa se me mueve cuando lo habre en el explorador y aparece en otro lado.., sabes como puedo fijarlo a donde quiero u otra manera de hacerlo??

Gracias
  #4 (permalink)  
Antiguo 18/11/2010, 18:03
Avatar de TMeister
Crazy Coder
 
Fecha de Ingreso: enero-2002
Ubicación: En la Oficina
Mensajes: 2.880
Antigüedad: 15 años, 11 meses
Puntos: 193
Respuesta: Index con jpg y html a pantalla completa.

Moviendo a CSS
  #5 (permalink)  
Antiguo 19/11/2010, 06:41
 
Fecha de Ingreso: enero-2010
Mensajes: 66
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Index con jpg y html a pantalla completa.

Alguien puede darme una respuesta, gracias.
  #6 (permalink)  
Antiguo 20/11/2010, 04:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Index con jpg y html a pantalla completa.

Hola:

¿Sería posible que indicaras tu URL?

Saludos.

  #7 (permalink)  
Antiguo 20/11/2010, 08:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Index con jpg y html a pantalla completa.

Con css se podría lograr. Pero creo que no es el lenguaje más apropiado para la totalidad de situaciones posibles. Más aun desconociendo el resto de información.
Siempre habrá un tamaño de ventana, una situación del contenido, una relación ancho*alto de la imagen, etc, donde ocurra algún "pero ahora..."

Se necesitaría un estudio a fondo de su caso concreto con sus particularidades para poder actuar no sólo sobre la imagen sino también en la estructura de la página o layout.

Sin más información, el camino inicial sería colocar la imagen como hija directa y primera del body:
Código CSS:
Ver original
  1. <body>
  2.   <img id="fondo" src="imagen.jpg" alt="una imagen" />
y en el css:
Código CSS:
Ver original
  1. img#fondo {
  2. width:100&#37;;/*el valor es 100/100*/
  3. position: fixed;
  4. left:0;
  5. top: 0;
  6. }
En función de las premisas primeras que hice, podrá definir el alto en vez del ancho (en función de la relación de tamaño de imagen)
Declarar absoluta en vez de fija su posición.
Y obligatorio, como el tamaño en el css está en "%", debe definirlo también para el html, body
  #8 (permalink)  
Antiguo 20/11/2010, 11:37
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Index con jpg y html a pantalla completa.

Lo que debes hacer es una combinación de javascript con css, posible hacerlo en php también, pero mi idea es que:

saques la proporción de la imagen, por ejemplo si fuera de una proporción de 1:2 sería lo sgte:

- Con javascript (jquery) capturas el tamaño de la ventana del navegador, esto lo haces con la función .height();
- Luego aplicas el número que te da a la propiedad css height,
- Luego al ser la proporción 1:2 multiplicas el número que para eso almacenarías en una variable, por 2
- este resultado lo aplicas a la propiedad css width.

Las funciones necesarias de jquery para tu proposito serían:

height() / css()

Saludos.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #9 (permalink)  
Antiguo 22/11/2010, 10:52
 
Fecha de Ingreso: enero-2010
Mensajes: 66
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Index con jpg y html a pantalla completa.

Hola a todos, no he podido contestar antes, la verdad que lo que me explicais me parece ineresante, pero no tengo mucha idea de CSS ni de Javascrip, he subido el fichero a http://www.megaupload.com/?d=JUM788RC y se que es mucho pedir pero veo mejor las cosas cuando las puedo ver insitu y mas aun si estan explicado, realmente es muy sencillo ya que es solo una imagen con una seleccion de idiomas, lo que hay es lo que quiero pero bien hecho y que el ejemplo este pueda servirme para otros proyectos, si alguien lo puede hacer de las dos formas seria genial, en flash con diagramacion liquida y de la forma que me comentais, ya que tendria un base a seguir para las dos metodos, con diagramacion lo he intentado mil veces pero es algo que no me entra en la cabeza, bueno muchas gracias por vuestras respuestas.
  #10 (permalink)  
Antiguo 22/11/2010, 11:07
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Index con jpg y html a pantalla completa.

Cita:
realmente es muy sencillo
En realidad no es tan sencillo si no sabes programar en JavaScript.

Busca en google sitios con "javascript free scripts", en sitios como hotscripts.com y ve buscando un script que se ajuste a lo que necesitas.

Más en específico en esta sección: http://www.hotscripts.com/category/javascript/
y ya sea en frameworks o en scripts.

P.D. Lo que te menciona Dalvenjha
Cita:
Las funciones necesarias de jquery para tu proposito serían:
es un framework.

Edito. Si lo que sabes usar es flash, usa flash y trata de hacer lo posible para que si lo indexe google. Google sí indexa cosas dentro de flash. Pero es mejor que resuelvas el problema real que tienes y lo de la indexada tendrás otras maneras de hacerlo. (en mi humilde opinión)
  #11 (permalink)  
Antiguo 22/11/2010, 13:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Index con jpg y html a pantalla completa.

Como mi ejemplo en #7 fue muy a la carrera y demasiado sencillo como para cubrir un número suficiente de situaciones retomé el tema.

Aquí puedes ver dos realizaciones distintas: http://bit.ly/bAOaUW
No están testadas a fondo, así que no se que problemas podrán presentarse. Hay una de las dos que no va en ie7, la otra sí (en ietester, así que dicho con las precaución debida)

Creo que los códigos, tanto css como html son demasiado sencillos como para que necesiten una explicación detallada, pero si hay algo que no comprende, lo comenta.
  #12 (permalink)  
Antiguo 23/11/2010, 05:16
 
Fecha de Ingreso: enero-2010
Mensajes: 66
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Index con jpg y html a pantalla completa.

Hola, intentare meterle mano como me comentais, ya os comentare si tengo alguna duda..., por cierto me ha surgido una dudita, en dreamweaber cuando creo un mapa interactivo en un sitio en concreto este se me mueve al verlo en el explorador..., supongo que es porque tengo la imagen al 100% de alto y el mapa corresponde a una zona concreta de la imagen del 100% con lo que este variara en diferentes resoluciones, ¿hay alguna forma de corregir esto?, gracias.
  #13 (permalink)  
Antiguo 23/11/2010, 05:46
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Index con jpg y html a pantalla completa.

Si, no uses mapas interactivos...
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #14 (permalink)  
Antiguo 23/11/2010, 11:59
 
Fecha de Ingreso: enero-2010
Mensajes: 66
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Index con jpg y html a pantalla completa.

y que uso en su lugar???
  #15 (permalink)  
Antiguo 23/11/2010, 12:25
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Index con jpg y html a pantalla completa.

Estoy pensando en algo, pero es pucha complicadísimo -.- no sé como lo tomes, pero podrías trabajar todo con medidas en 'em' osea maquetación elástica, luego cno javascript aumentar o disminuir el tamaño del font principal dependiendo de la resoluicón, así tus medidas quedarían siempre correctas, pero es solo una sugerencia.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.

Etiquetas: completa, html, index, jpg, pantalla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:45.