Joomla vs Dreamweaver

**MooDiE** · 27-01-2011

a todo esto, Pit. Jomla o Dreamweaver?
sin más.

Ciertamente, empezaste con una pregunta y poco a poco te has ido metiendo en un follón de cuidado eh.

**Pit [reloaded]** · 27-01-2011

Bueno, vamos. Lo que he hecho es buscar scripts similares y adaptarlos a las fotografías del ejercicio, tamaños, número de fotografías.

Entiendo que no hace falta esta cortina, sino que basta con que cambien a corte cada 3 segundos.

Eso es lo que he de intentar conseguir modificando el script, e intentando entenderlo.

El enunciado del primer ejercicio era:
ejercicio 1:
crear una página web con una imagen que cambie cada 3 segundos a modo de pase
de diapositivas. En la carpeta del ejercicio se han incluido 10 ficheros del mismo
tamaño, 770 por 130 píxeles, que son los que hay ir mostrando de forma cíclica.
.

-- IMÁGENES ADJUNTAS --

**Pit [reloaded]** · 27-01-2011

No es un follón me cerebro estaba algo anquilasado en el 3d y el diseño gráfico, esto me da vidilla.

**MooDiE** · 27-01-2011

Bueno vamos con ese ejercicio javascript, te hago un planteamiento con una solución más fácil y tu intentas programarla para practicar.

Fichero html:
El código html lo que tiene que hacer es crear una capa y que dentro contengan las imágenes que quieras introducir.

Fichero CS:
La capa (div):

centrar la capa en la página.
colocarle la anchura y altura de las imágenes.
definir el posicionamiento como relativo.

Las imágenes (img):

el posicionamiento debe ser absoluto para que las imágenes se solapen unas sobre otras.
los parámetros left y top tienen que estar a 0 ya que se trata de que los bordes de la imagen izquierdo y superior estén en pegados a la capa padre.
el ancho y el alto debe ser heredado de la capa padre.
el display estará por defecto en none.

Fichero de javascript:

.
cargar las imágenes en una variable de tipo array.
cada cierto tiempo recorrer el array para que cambie el parámetro display none a inline únicamente en la imagen siguiente a la que está en inline y que está se ponga en none.

Nota: si no sabes cómo coger las imágenes puedes ponerle un id a las img y luego cargar el array manualmente cogiendo las imágenes con getelementbyid().

La idea es esa, ahora te toca investigar un poco para coger soltura. Si tienes alguna duda preguntanosla por aquí. Puede que el parámetro inline lo tengas que cambiar por block si te hace algún extraño de esto no estoy seguro, pero es algo que vamos viendo sobre la marcha.

**Pit [reloaded]** · 27-01-2011

Ok entiendo que es una div que contiene todas esas imágenes. ¿Tengo que asignarles un z-index? Bueno, me pongo con ello voy preparando una buena cafetera.

**Pit [reloaded]** · 27-01-2011

Bueno, si no hay contraorden, arranco intentando programar el java script los.css serían:
/*estilos trabajo-2 uned
-*/
/*básicos
-*/
body {background:#ccc, font: 12px verdana, helvética, sans-serif;}
/*diapositivas
-*/
#contenedordiapues {
background-color:#ccc;
width:770px;
height:135;
Margin:0 auto;
overflow: hidden;
}
#diapues {
position:relative;
width:770px;
height:130px;
}
#diapues img {
position:absolute;
top:0px;
left:0px;
width:Inherit;
height:Inherit;
display:none;
}.
y el xhtml sería:.
<.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>
html>
head>
meta http-equiv=content-type content=text/html, charset=utf-8>
title>trabajo-2 ejercicio-1</title>
<link href=, estilosdiapos, css type=text/css reel=styleshet />
</head>
<body>
<.- Contenedor diapues ->
div id=contenedordiapos>
<.- Diapues ->
div id=diapositivas>
img src=assets/fotociencias.jpg width=770 height=130 alt=uned id=c1 z-index=1 />
img src=assets/fotoderecho.jpg width=770 height=130 alt=uned id=c2 z-index=2 />
img src=assets/fotoeconomicas.jpg width=770 height=130 alt=uned id=c3 z-index=3 />
img src=assets/fotoeducacion.jpg width=770 height=130 alt=uned id=c4 z-index=4 />
img src=assets/fotofilologia.jpg width=770 height=130 alt=uned id=c5 z-index=5 />
img src=assets/fotofilosofia.jpg width=770 height=130 alt=uned id=c6 z-index=6 />
img src=assets/fotogeografiahistoria.jpg width=770 height=130 alt=uned id=c7 z-index=7 />
img src=assets/fotoindustriales130.jpg width=770 height=130 alt=uned id=c8 z-index=8 />
img src=assets/fotoinformática.jpg width=770 height=130 alt=uned id=c9 z-index=9 />
img src=assets/fotopsicologia.jpg width=770 height=130 alt=uned id=c10 z-index=10 />
/div>
.- Fin diapues ->
</div>
.- Fin contenedor diapues ->
</body>
/html>
.

-- IMÁGENES ADJUNTAS --

**MooDiE** · 27-01-2011

Has mejorado mucho en la escritura del código. Ahora con javascript a ver qué tal.

**Pit [reloaded]** · 27-01-2011

El array podría ser éste?:
// arrary que almacena las fotografías de las diapositivas VAR fotografías = [fotociencias.jpg, fotoderecho.jpg, fotoeconomicas.jpg, fotoeducacion.jpg, fotofilologia.jpg,
Fotofilosofia.jpg, fotogeografiahistoria.jpg, fotoindustriales130.jpg, fotoinformática.jpg, fotopsicologia.jpg"].

**MooDiE** · 27-01-2011

El array podría ser éste?:
// arrary que almacena las fotografías de las diapositivas. VAR fotografías = [fotociencias.jpg, fotoderecho.jpg, fotoeconomicas.jpg, fotoeducacion.jpg, fotofilologia.jpg fotofilosofia.jpg, fotogeografiahistoria.jpg, fotoindustriales130.jpg, fotoinformática.jpg, fotopsicologia.jpg"].

Guarda en el array las ID, para luego usar dichas id con getelementbyid() y poder cambiar las propiedades de las imágenes.

**Pit [reloaded]** · 27-01-2011

Y cómo guardo en el array las ID, no veo en la documentación cómo hacerlo se me habrá pasado, voy a buscarlo.

**MooDiE** · 27-01-2011

<.doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/lose, dtd>.

Html>.

Head>.
meta http-equiv=content-type content=text/html, charset=utf-8>.
title>trabajo-2 ejercicio-1</title>.
link href=, estilosdiapos, css type=text/css reel=styleshet />.
/head>.
body>.
.- Contenedor diapues ->.

Div id=contenedordiapos>.
.- Diapues ->.

Div id=diapositivas>.
img src=assets/fotociencias.jpg width=770 height=130 alt=uned id=c1 z-index=1 />.
img src=assets/fotoderecho.jpg width=770 height=130 alt=uned id=c2 z-index=2 />.
img src=assets/fotoeconomicas.jpg width=770 height=130 alt=uned id=c3 z-index=3 />.
img src=assets/fotoeducacion.jpg width=770 height=130 alt=uned id=c4 z-index=4 />.
img src=assets/fotofilologia.jpg width=770 height=130 alt=uned id=c5 z-index=5 />.
/div>.
.- Fin diapues ->.
/div>.
.- Fin contenedor diapues ->.
/body>.
/html>.

Los id son los que has puesto en el html.

VAR fotografías = [fotociencias.jpg, fotoderecho.jpg, fotoeconomicas.jpg, fotoeducacion.jpg, fotofilologia.jpg fotofilosofia.jpg, fotogeografiahistoria.jpg, fotoindustriales130.jpg, fotoinformática.jpg, fotopsicologia.jpg"].

Quedaría algo así:
Var photo_id = [ c1, c2, c10 ].

**Pit [reloaded]** · 27-01-2011

Salvo que me digas que se puede hacer un array directamente con los ids:
// arrary que almacena las fotografías de las diapositivas.

Var fotografías = [c1, c2, c3, c4, c5,
C6, c7, c8, c9, c10"].

**Pit [reloaded]** · 27-01-2011

Te me adelantaste. Bueno, estoy leyéndome despacio la documentación buscando cómo cargar las fotografías y pasarlas de ono a inline, o block ya veremos.
// arrary que almacena las fotografías de las diapositivas.
// uso el id para cargarlas más adelante con getelementbyid()
Var photo_id = [c1, c2, c3, c4, c5,
C6, c7, c8, c9, c10"].

**MooDiE** · 27-01-2011

Salvo que me digas que se puede hacer un array directamente con los ids:
// arrary que almacena las fotografías de las diapositivas.

Var fotografías = [c1, c2, c3, c4, c5 c6, c7, c8, c9, c10"].

Pues sí, eso te he dicho.

**Pit [reloaded]** · 28-01-2011

A ver, saco la primera imagen con: En head cargo:
script type=text/javascript src=js/ejerdiapos.js></script> donde he escrito:
// array que almacena las fotografías de las diapositivas.
// uso el id para cargarlas más adelante con getelementbyid() VAR photo_id = [c1, c2, c3, c4, c5, c6, c7, c8, c9, c10"].
// entiendo que necesito que se cargue la primera fotografía function muestra () {
Var photo_id = document, getelementbyid(c1),
C1.style, display=inline;
}
En el body llamo a la función:
body onload=muestra ()> y abro la primera imagen mi problema es cómo decirle que se esté quieta 3 segundos antes de ocultarla y sacar la siguiente.

Tema: Joomla vs Dreamweaver

Herramientas

Buscar tema

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Joomla vs dreamweaver

Temas similares

Dreamweaver

Adobe Dreamweaver CS 6

Dreamweaver fondo degradado

Sugerencias con Dreamweaver

Redimensionar capas con Dreamweaver