Maquetar imágenes de sustitución

Aunque seguro que serás muy joven;)-
De nuevo por aquí
Tengo la intención de crear un página con tres imágenes cambiantes.
Utilizo DreamweaverMX 2004.
En principio establecí unos div para incluirlas, pero el estilo que le aplico a esta etiqueta luego no me lo respeta. Le doy unas medida de ancho y un alto de 100% y no me crea los div así.
Luego lo he intentado mediante tablas, las creo con 3 columnas para esas imágenes, selecciono una de las celdas y aplico el "comando" imagen de sustitución o el de crear menú de navegación para tener más opciones a la hora de visualizarlas... Nada, me lo coloca fuera de la celda.
¿Sabrías por qué sucede esto y si hay alguna solución?

1 respuesta

Respuesta
1
Dime más o menos cómo quieres posicionar las tres imágenes y te hago un diseño basado en divs y css
Hola!
La idea es muy simple. Son tres imágenes que ocupan toda la página. Tendrían algo de margin y padding, esto ya lo iría ajustando. Quiero que al pasar el ratón cambie cada una, pero como me interesaría más de dos estados para cada imagen había pensado en un menú de navegación de los que te permite Dreamweaver -reposo, sobre, click y el último que no me acuerdo cómo se llama-. Como no me ha dejado maquetarlo, estaba pensando en Flash, tomando cada imagen como un botón. No sé, lo que me alucina es no poder usar las celdas y mucho más los div a mi antojo..., será que todavía soy un poco inexperta ;)
Un daludo y muchas gracias
No se si en otra respuesta te dije que a mi no me gustan las herramientas del tipo Dreamweaver, porque te limitan bastante. Ahora he entendido lo que quieres, y se hace así:

<html>
<head>
<style>
#contenedorImagen{
height:100%;
width:100%;
background-repeat:no-repeat;
background-position:center center;
}
.imagenOut{background-image:url('imagenes/img1.jpg');}
.imagenOver{background-image:url('imagenes/img1.jpg');}
.imagenDown{background-image:url('imagenes/img1.jpg');}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#contenedorImagen").addClass("imagenOut"); //por defecto
$("#contenedorImagen").bind("mouseover", function(){
$(this).removeClass("imagenDown");
$(this).removeClass("imagenOut");
$(this).addClass("imagenOver");
});
$("#contenedorImagen").bind("mouseout", function(){
$(this).removeClass("imagenDown");
$(this).removeClass("imagenOver");
$(this).addClass("imagenOut");
});
$("#contenedorImagen").bind("mousedown", function(){
$(this).removeClass("imagenOver");
$(this).removeClass("imagenOut");
$(this).addClass("imagenDown");
});
$("#contenedorImagen").bind("mouseup", function(){
$(this).removeClass("imagenDown");
$(this).removeClass("imagenOut");
$(this).addClass("imagenOver");
});
});
</script>
</head>
<body>
<div id="contenedorImagen">
</div>
</body>
</html>
Hola!
Lo estoy probando, no me cierres la consulta, thank you
Tranquila, no hay prisa ;-)
Hola krlosnow!
Estoy intentando que me salga algo en la página, jaja, que no es poco.
Te cuento, he pegado tu código en la cabecera, cambiando el nombre de la carpeta imágenes, en mi caso "images", colocando los nombres de las mismas -de momento tres degradados solo para probar- y como no me salían las cosas he sustituido el jquery tuyo por uno que me descargué..., poco más, el formato psd de las mismas no sé si es válido.
Supongo que el que no me aparezca nada debe ser un fallo del propio Dreamweaver -el antiguo MX 2004 de Macromedia-.
Sólo alguna pregunta. El Jquery que incluyes es una llamada a una página de Google, una api en red entiendo, ¿no? Ahí no hay necesidad de incluir tu archivo js de Jquery en tu directorio, ¿es así, no?
Por otro lado si ves algo en el código que te suena raro -encabezado de Dreamweaver más que nada-, comentámelo y ya me iré apañando.
Voy a intentar probarlo fuera del programa... -aunque qué rabia me daría descubrir que el programita que tanto llevo estudiando me va a entorpecer más que facilitar las cosas... ufff!
Este es el código y si quieres con eso cerramos, que no quiero abusar...-sino ya no te podré preguntar más, jaja-.
Saludos
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
<style>
#contenedorImagen{
height:100%;
width:100%;
background-repeat:no-repeat;
background-position:center center;
}
.imagenOut{background-image:url('images/degradadoamarillo.psd');}
.imagenOver{background-image:url('images/degradadoazul.psd');}
.imagenDown{background-image:url('images/degradadofucsia.psd');}
</style>
$(document).ready(function(){
$("#contenedorImagen").addClass("imagenOut"); //por defecto
$("#contenedorImagen").bind("mouseover", function(){
$(this).removeClass("imagenDown");
$(this).removeClass("imagenOut");
$(this).addClass("imagenOver");
});
$("#contenedorImagen").bind("mouseout", function(){
$(this).removeClass("imagenDown");
$(this).removeClass("imagenOver");
$(this).addClass("imagenOut");
});
$("#contenedorImagen").bind("mousedown", function(){
$(this).removeClass("imagenOver");
$(this).removeClass("imagenOut");
$(this).addClass("imagenDown");
});
$("#contenedorImagen").bind("mouseup", function(){
$(this).removeClass("imagenDown");
$(this).removeClass("imagenOut");
$(this).addClass("imagenOver");
});
});
</script>
</head>
<body>
<div id="contenedorImagen">
</div>
</body>
</html>
Varias cosas:
1) Saca los estilos del script, para que quede así:

<head>


<style> 
#contenedorImagen{ 
height:100%; 
width:100%; 
background-repeat:no-repeat; 
background-position:center center; 
} 
.imagenOut{background-image:url('images/degradadoamarillo.psd');} 
.imagenOver{background-image:url('images/degradadoazul.psd');} 
.imagenDown{background-image:url('images/degradadofucsia.psd');} 
</style>


<script>
$(document).ready(function(){ 
$("#contenedorImagen").addClass("imagenOut"); //por defecto 
$("#contenedorImagen").bind("mouseover", function(){ 
$(this).removeClass("imagenDown"); 
$(this).removeClass("imagenOut"); 
$(this).addClass("imagenOver"); 
}); 
$("#contenedorImagen").bind("mouseout", function(){ 
$(this).removeClass("imagenDown"); 
$(this).removeClass("imagenOver"); 
$(this).addClass("imagenOut"); 
}); 
$("#contenedorImagen").bind("mousedown", function(){ 
$(this).removeClass("imagenOver"); 
$(this).removeClass("imagenOut"); 
$(this).addClass("imagenDown"); 
}); 
$("#contenedorImagen").bind("mouseup", function(){ 
$(this).removeClass("imagenDown"); 
$(this).removeClass("imagenOut"); 
$(this).addClass("imagenOver"); 
}); 
}); 
</script>


</head>

2) Cambia el formato de imagen a uno más normal (jpg, gif, tiff, )
3) El script de jquery: puedes usar el que está en la red o descargártelo, como quieras.
Ya me contarás.
Hola krlosnow!
No pude practicar en los últimos días, pero ahora me he puesto otra vez y nada.
No quiero ser una "pesada" así que te lo mando como última aclaración.
Al final, me he salido de Dreamweaver, he creado una carpeta, dentro el index con el bloc de notas -cambiado a html, claro-, carpeta images con laa tres imágenes dentro y ya está. ¿Esto qué te digo está bien? Es que estoy tan acostumbrada al entorno de dreamweaver que no sé si he hecho alguna burrada.
Clico en la página y en el navegador no se me abre nada, permito contenido bloqueado, etc..., y se queda en blanco.
Te adjunto el código por si acaso.
Un saludo y muchas gracias -la verdad es que tendría que pagarte.-
Mónica
<html>
<head>
<style> 
#contenedorImagen{ 
height:100%; 
width:100%; 
background-repeat:no-repeat; 
background-position:center center; 
} 
.imagenOut{background-image:url('images/degradadoamarillo.jpeg');} 
.imagenOver{background-image:url('images/degradadoazul.jpeg');} 
.imagenDown{background-image:url('images/degradadofucsia.jpeg');} 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){ 
$("#contenedorImagen").addClass("imagenOut"); //por defecto 
$("#contenedorImagen").bind("mouseover", function(){ 
$(this).removeClass("imagenDown"); 
$(this).removeClass("imagenOut"); 
$(this).addClass("imagenOver"); 
}); 
$("#contenedorImagen").bind("mouseout", function(){ 
$(this).removeClass("imagenDown"); 
$(this).removeClass("imagenOver"); 
$(this).addClass("imagenOut"); 
}); 
$("#contenedorImagen").bind("mousedown", function(){ 
$(this).removeClass("imagenOver"); 
$(this).removeClass("imagenOut"); 
$(this).addClass("imagenDown"); 
}); 
$("#contenedorImagen").bind("mouseup", function(){ 
$(this).removeClass("imagenDown"); 
$(this).removeClass("imagenOut"); 
$(this).addClass("imagenOver"); 
}); 
}); 
</script>
</head>
<body>
<div id="contenedorImagen">
</div>
</body>
</html>
Enhorabuena por el valiente paso de dejar Dreamweaver. Te recomiendo que te bajes notepad++, porque darle al HTML con notepad pelado es un suplicio. La estructura creo que la tienes bien. La carpeta "images" debe estar al mismo nivel que la página "index.html", es decir, en la misma carpeta. Luego, dentro de la carpeta images deben estar tus degradados. Yo he probado el código que me pasas y funciona en Internet Explorer (activando el contenido protegido) y en Chrome.
Lo único que se me ocurre es que no tengas conexión a internet y que no te cargue bien el script de jquery. Para asegurarte, prueba a meter en tu navegador la url "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js". Si ves el script, ya no se lo que puede estar pasando.
Gracias por todo, si a ti te funciona es que estoy haciendo algo mal, pero estamos en ello.
Otra vez gracias por tu "infinita paciencia", jaja
Un saludo
Mónica

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Cambiar color a elemento menu seleccionado...

Viejo aquí estoy de nuevo con un nuevo reto, mira el caso es que necesito cambiar el color del elemento actual seleccionado en un menu, he probado con css y en unos casos me funciona asignando dos clases diferentes pero en este ahora no me funciona,...
1 respuesta

Tabs con jquery

Te pregunto de nuevo porque estoy intentando que me funcione un sistema de tabs -. El ejemplo es muy simple, pero era sólo para probarlo antes de realizar los "verdaderos"- pero no hay manera de que me funcione. Es un código que he reutilizado y he...
2 respuestas

Tablas Especiales

Quisiera crear en mi Website una tabla como la que hay en la siguiente web: - www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"... El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras...
2 respuestas

Imágenes cambiantes en página web

Estoy intentando crean una página web con imágenes cambiantes, tanto en la cabecera como en el fondo de la página, pero, de momento, no he tenido éxito. No sé si es por el código que inserto en el head o el que falla es el del body, en fin, si me...
2 respuestas

¿Cuál es el código para el fondo fijo?

Cuál es el código html para poner el fondo fijo de la foto en la página web, o sea que la foto del fondo no se repita como una especie de mosaico, ¿Quiero qué se vea como la única foto centrada en el fondo?
1 respuesta

Etiqueta div que solo se alinea a izquierda y centro

He realizado el siguiente contador cogiendo parte de codigo de un reloj animado, el problema que tengo es que la etiqueta div que pinta los digitos del contador solamente se me alinean a la izquierda y al centro, con el consiguiente problema que...
1 respuesta

Grabar desconexión de usuario logueado

Tengo una web en la que los usuarios pueden loguearse, y al hacerlo se graba en una base de datos mysql el usuario y la hora de conexión. Quisiera saber cómo hacer para que también quede grabada la hora de "desconexión". Si pulsan el botón de cerrar...
2 respuestas

¿Por que no me funciona el javascript en firefox?

Estoy haciendo una pagina web y he hecho un menu con javascript, pero no consigo que funcione en FIREFOX, en IE, en safari, chrome me funciona. Pero me tiene que funcionar en firefox ya que es uno de los que mas se usan. ¿Veis algun fallo o me falta...
1 respuesta

Rellenar Div con Jquery (AJAX) y PHP

Los expertos. Estoy intentando realizar un mapa que muestre provincias y localidades. Mi idea principal es que al pasar el mouse por encima de un área (área del mapa que tiene asignada la provincia) me rellene automáticamente un div con la...
1 respuesta

Abrir nueva ventana con imagen

En mi página, tengo una serie de imágenes que quisiera agrandar abriendo una nueva ventana. Esto lo he hecho con el siguiente código en mi html: <SCRIPT LANGUAGE="JavaScript"> function nueva() { open('popup.htm', 'Sizewindow',...
1 respuesta