Unha imaxe de rollover é unha imaxe que cambia a outra imaxe cando vostede ou o seu cliente rolen o rato sobre ela. Estes son comunmente usados para crear unha sensación interactiva como botóns ou pestanas. Pero podes crear imaxes rollover de case calquera cousa.
Este tutorial está deseñado para axudarche a crear unha imaxe de rollover en Dreamweaver . Está destinado a ser usado por persoas que utilizan as seguintes versións de Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Requisitos para este tutorial
- Dreamweaver
Unha das versións listadas arriba. - Unha imaxe orixinal
Asegúrese de optimizar esta imaxe. Isto axudará ás páxinas a cargar máis rápido. - A imaxe de rollover
Esta imaxe debería ser a mesma que a imaxe orixinal. E, como a imaxe orixinal, debería optimizarse para axudar ás horas de carga da páxina. - Unha páxina web
Esta é a páxina HTML onde poñerás a túa imaxe de rollover.
01 de 06
Comezar
- Comezar Dreamweaver
- Abre a páxina web onde desexa o seu rollover
02 de 06
Inserir un obxecto de imaxe de imaxe
Dreamweaver facilita a creación dunha imaxe de rollover.
- Vaia ao menú Inserir e abaixo ao submenú "Obxectos de imaxe".
- Seleccione "Imaxe de rollover" ou "Imaxe de rolagem"
Algunhas versións máis antigas de Dreamweaver chaman aos obxectos de imaxe "imaxes interactivas" no seu lugar.
03 de 06
Diga a Dreamweaver que imaxes usar
Dreamweaver mostra un cadro de diálogo cos campos que debes cubrir para crear a túa imaxe de rollover.
Nome da imaxe
Escolla un nome de imaxe único para a páxina. Debe ser toda unha palabra, pero pode usar números, guións baixos (_) e guións (-). Isto servirase para identificar a imaxe para cambiar.
Imaxe orixinal
Esta é a URL ou a localización da imaxe que comezará na páxina. Podes usar URLs de camiño relativas ou absolutas neste campo. Esta debería ser unha imaxe que existe no seu servidor web ou que cargará coa páxina.
Rollover Image
Esta é a imaxe que aparecerá ao mouse sobre a imaxe. Do mesmo xeito que a imaxe orixinal, isto pode ser un camiño absoluto ou relativo á imaxe, e debería existir ou cargarse ao cargar a páxina.
Preload Image Rollover
Esta opción está seleccionada de xeito predeterminado porque axuda a que o rollover apareza con máis rapidez. Ao optar por precargar a imaxe de rollover, o navegador web almacenao nunha caché ata que o rato rolo.
Texto alternativo
Un bo texto alternativo fai que as túas imaxes sexan máis accesibles. Sempre debería empregar algún tipo de texto alternativo cando engada imaxes.
Cando faga clic, vai a URL
A maioría da xente fai clic nunha imaxe cando ven unha nunha páxina. Polo tanto, ten que ter o costume de facelos clicables. Esta opción permítelle especificar a páxina ou a URL para que o visite cando faga clic na imaxe. Pero esta opción non é necesaria para crear un rollover.
Cando completes todos os campos, fai clic en Aceptar para que Dreamweaver cre a túa imaxe de rollover.
A seguinte páxina mostra o script que Dreamweaver escribe.
04 de 06
Dreamweaver escribe o JavaScript para ti
Se abre a páxina na visualización de código, verá que Dreamweaver insire un bloque de JavaScript no
do documento HTML. Este bloque inclúe as 3 funcións que precisa para que as imaxes se intercambien cando o rato rolo sobre eles e a función de precarga se optou por iso.función MM_swapImgRestore ()
función MM_findObj (n, d)
función MM_swapImage ()
función MM_preloadImages ()
05 de 06
Dreamweaver engade o HTML para o Rollover
Se escolleu que Dreamweaver preloade as imaxes de rollover, verá o código HTML no corpo do documento para chamar ao script de precarga para que as imaxes carguen máis rápido.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver tamén engade todo o código da túa imaxe e enlázalo (se incluíu un URL). A porción de rollover engádese á etiqueta de ancoraxe como atributos onmouseover e onmouseout.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 de 06
Probar a rolda
Vexa a imaxe de rollo completamente funcional e aprenda sobre a mente de Shasta.