Autor Tema: HTML y CSS cursor efecto hover puntero mouse cambia al pasar imagen CU01054D  (Leído 6847 veces)

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Hola! a todos. Dejo el ejercicio CU01054D del curso CSS desde cero aunque antes un par de dudas:

1) en el enunciado dice que las cajas contenedoras deben tener ancho de 200 píxeles, altura de 300 píxeles, y luego El div 2 debe contener una imagen con anchura 300 píxeles; es evidente que no coje.

2) al final del ejercicio dice; Antes de crear el código tendrás que preparar las imágenes: partir de una imagen con un tamaño más amplio, y con la ayuda de cualquier programa de edición de imágenes crear su gemela con menores dimensiones. Por lo que las imagenes son locales (no se donde colocarlas el la red para que podais comprobar el ejercicio.

Dicho esto, va el código.


HTML

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejercicio 1055">
<meta name="keywords" content="palabras clave">
<title>Portal web - aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="1055.css">
</head>
<body>
<div id="div1">
El div 1 debe contener un texto con varios links (etiqueta
<a href="div1"> de html)</a>. Al pasar el cursor sobre cualquiera de
los <a href="div1">links</a> dentro del div1 el cursor deberá ponerse en modo
help (es decir, se verá un <a href="div1">pequeño</a> interrogante junto al
cursor).
</div>
<div id="div2">
<a href="documento2.html" target="blank"><img src="(insulto)Sucia21.jpg" alt="(insulto)Sucia21.jpg"/></a>
</div>
</body>
</html>


HTML (documento2)

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejercicio 1055">
<meta name="keywords" content="palabras clave">
<title>Portal web - aprenderaprogramar.com</title>
<link rel="stylesheet" type="text/css" href="1055.css">
</head>
<body>
<img src="(insulto)Sucia22.jpg"/>
</body>
</html>


CSS

Código: [Seleccionar]
/*Cursor 1055*/

body{font-family:Arial, Helvetica;}
div{float:left; margin:25px; width:200px; height:300px;
border:5px solid violet;}
#div1 a:hover{cursor:help;}
#div2 img{width:300px; min-height:200px;}
#div2 img:hover{cursor:zoom-in;}


Un saludo! Y gracias!
« Última modificación: 05 de Marzo 2016, 17:56 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2078
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola!

Tienes razón con las dimensiones, corregido es de la siguiente manera:

Dice: El div 2 debe contener una imagen con anchura 300 píxeles y altura igual o superior a 200 píxeles.

Debe decir: El div 2 debe contener una imagen con anchura 200 píxeles y altura igual o superior a 300 píxeles.


Para colocar imágenes en la red puedes abrirte una cuenta en imgur.com, photobucket.com, google photos ó similar, ahí subes la imagen y obtienes la ruta. Puedes leer algo más completo en https://www.aprenderaprogramar.com/foros/index.php?topic=1474.0

En el ejercicio has escrito <a href="div1"> pero esto no parece un link válido, ¿a lo mejor querías escribir <a href="#div1"> ?


Saludos!
Responsable de departamento de producción aprenderaprogramar.com

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Hola Boletos,
te rogaría que cuando subas los ejercicios pongas el codigo html y el css juntos, para que sea más rápido ver los resultados.
Exceptuando lo que comenta César de "<a href="#div1">" , se vé el código bien.
Te comento además otra página para imagenes que está muy chula:
http://lorempixel.com/
Saludos.

Boletos

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 57
    • Ver Perfil
Gracias a ambos por las recomendaciones.
Lo del link en efecto es error.
En adelante intentaré unir css y html.
Un saludo!

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".