Index con jpg y html a pantalla completa.

matutanos · #1 (**permalink**) 18/11/2010, 10:53

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.

fabriii · #2 (**permalink**) 18/11/2010, 11:11

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

matutanos · #3 (**permalink**) 18/11/2010, 11:55

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

TMeister · #4 (**permalink**) 18/11/2010, 18:03

Moviendo a CSS

matutanos · #5 (**permalink**) 19/11/2010, 06:41

Alguien puede darme una respuesta, gracias.

jomaruro · #6 (**permalink**) 20/11/2010, 04:14

Hola:

¿Sería posible que indicaras tu URL?

Saludos.

kseso? · #7 (**permalink**) 20/11/2010, 08:51

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<body>
  <img id="fondo" src="imagen.jpg" alt="una imagen" />

y en el css:

Código CSS:

Ver originalimg#fondo {
width:100&#37;;/*el valor es 100/100*/
position: fixed;
left:0;
top: 0;
}

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

Dalvenjha · #8 (**permalink**) 20/11/2010, 11:37

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.

matutanos · #9 (**permalink**) 22/11/2010, 10:52

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.

Rafael · #10 (**permalink**) 22/11/2010, 11:07

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)

kseso? · #11 (**permalink**) 22/11/2010, 13:25

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.

matutanos · #12 (**permalink**) 23/11/2010, 05:16

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.

Dalvenjha · #13 (**permalink**) 23/11/2010, 05:46

Si, no uses mapas interactivos...

matutanos · #14 (**permalink**) 23/11/2010, 11:59

y que uso en su lugar???

Dalvenjha · #15 (**permalink**) 23/11/2010, 12:25

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.