Las imágenes en Instructables tienen una función en la que aparecen texto cuando mueves el mouse

sobre las regiones delineadas de las imágenes. Esto se utiliza para etiquetar partes particularmente interesantes de la

imagen. Es una característica bastante agradable, y alguien preguntó exactamente cómo se hace tal cosa.

Así que aquí hay un instructable.:-)

Desafortunadamente, este Instructable es en su mayoría obsoleto

Suministros:

Paso 1: Punto de partida

Aquí estamos en una página de "exploración" típica instructable. Estoy conectado debajo de mi

Nombre de usuario de instructables, por supuesto.

Haga clic en el enlace "Cargar imágenes" para acceder a su biblioteca de imágenes.

Paso 2: ir a la biblioteca de imágenes

Es de suponer que ya has cargado algunas imágenes, basadas en el otro instructivo por "algo".

Haga clic en el enlace "biblioteca de imágenes" para acceder a la página que muestra los archivos que ya ha cargado.

Paso 3: Elige una foto

Seleccione y haga clic en la imagen a la que desea agregar texto emergente.

Esto cambiará a Instructables al modo de "edición de imagen" con la resolución predeterminada.

Estará en el mismo tipo de modo de "edición de imagen" cuando agregue una imagen a un Instructable que está creando o editando, por lo que no tiene que agregar las ventanas emergentes justo después de cargarlas, aparte de ingresar un instructivo. De hecho, probablemente tenga más sentido hacerlo como parte de la creación instructable (los pasos restantes son todos iguales), donde tiene el contexto de su … texto.

Paso 4: Crear el área de mouse-over

Haga clic en un punto y arrástrelo a la otra esquina de un rectángulo que contiene la parte de la imagen donde desea tener un texto emergente.

Paso 5: Añadir el texto

Cuando suelte el botón del mouse, el editor de Instructables abrirá un cuadro para que lo llene con texto.

Paso 6: ¿Hecho?

Haga clic en "guardar" cuando haya terminado de introducir texto. O haga clic en cancelar si decide que la casilla está en el lugar equivocado y desea volver a intentarlo.

Una sola imagen puede tener más de un área de mouse-over; No sé si hay un límite real. La legibilidad requiere un número relativamente pequeño.

Me parece útil hacer que los cuadros sean mucho más grandes que el elemento que resaltan, los hace más obvios y más fáciles de seleccionar. Las áreas pueden superponerse, aunque es casi necesario seleccionar una de una parte no superpuesta. Y no puedes tener un área totalmente dentro de otra; solo la caja exterior funcionará. (Algunas de las imágenes en este instructivo pueden parecer que tienen una caja dentro de otra, pero en realidad son solo una caja fuera de una la captura de pantalla que incluye la imagen de una caja más pequeña.)

Paso 7: ¿No es eso ordenado?

El texto emergente de mouseover debería estar funcionando en este punto.

Tenga en cuenta que el texto emergente está asociado con la IMAGEN, no con un instructable en particular.

Si tiene varias tablas de instrucción que contienen la misma imagen, las áreas emergentes aparecerán en todas ellas, ya sea que sea apropiado o no. Si desea tener la misma imagen en diferentes lugares con diferente texto emergente, debe cargar la imagen varias veces. (La imagen en este paso es un ejemplo; también se usa en el paso de "introducción", donde la ventana emergente no es muy apropiada).