How to create an image hover mouseover using Fireworks Cómo crear una imagen de Fireworks utilizando hover mouseover
Posted on July 5, 2009 at 5:35 am Publicado el 5 de julio de 2009 a 5:35 am
To create web pages with dynamic HTML capabilities from scratch, we would traditionally need to master DHTML and that includes HTML techniques like image hotspots and JavaScript. In this tutorial I will show you how to automatically create DHTML pages with a swap image behavior using Adobe Fireworks. Para crear páginas web HTML dinámico con capacidad de cero, que tradicionalmente se necesita para dominar DHTML, y que incluye técnicas como HTML y JavaScript imagen focos. En este tutorial te mostraré cómo crear automáticamente páginas DHTML con un comportamiento de intercambio de imágenes con Adobe Fuegos artificiales .
The final output is a complete DHTML project complete with HTML, image files and JavaScript code – and those are done without any coding by hand. El resultado final es un completo proyecto de DHTML con HTML, archivos de imagen y el código JavaScript - y los que se realizan sin ningún tipo de codificación a mano.
1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1.) Crear una imagen utilizando la herramienta de forma en virtud de la sección de vectores (por defecto, se establece la forma de rectángulo). To view more images simply click on the small arrow beside the rectangular image, or simply press “U” to toggle the most commonly used shapes. Para ver más imágenes haga clic en la flecha al lado de la imagen rectangular, o simplemente pulse en "U" para cambiar el método más comúnmente utilizado formas. Below is a screenshot of expanded shape tool. A continuación se muestra una captura de pantalla de la herramienta de forma ampliada.
2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2.) La forma que vamos a crear actuará como un disparador para cambiar nuestra imagen de comportamiento más adelante. For now we will use a circle but you can use any shape or object as you prefer. Por ahora vamos a utilizar un círculo, pero puede utilizar cualquier forma u objeto como usted prefiera.
3.) After creating a shape on your canvas import a picture to be used for image swapping. 3.) Después de crear una forma en su lienzo de importar una imagen que se utilizará para el intercambio de imágenes. Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture. A continuación, haga clic en el archivo de importación, o pulse Ctrl + R en el teclado para navegar por entonces la imagen deseada.
4.) Your canvas should have a trigger button and image as discussed earlier. 4.) Tu lienzo debería tener un botón de activación y de la imagen como se ha discutido anteriormente. Next we create a new frame used for another image. A continuación se crea un nuevo marco utilizado para otra imagen. Click New/Duplicate frame under the Frames and History panel. Haga clic en Nuevo / Duplicar marco Marcos y en el marco del panel de Historia.
5.) Select newly created frame and import another image. 5.) Seleccione el marco de nueva creación y de importación otra imagen. It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas. Es mejor que sobre la base de la imagen 1 y cuadro 2 tiene exactamente la misma posición absoluta en el lienzo.
6.) Going back to frame 1. 6.) Volviendo al cuadro 1. While the circle shape is selected, right click on it and insert a polygonal slice in it. Mientras que el círculo es la forma seleccionada, haga clic derecho en él e inserta un trozo poligonales en ella.
7.) Next create a rectangular slice for image 1 and image 2 7.) Siguiente crear un trozo rectangular de la imagen 1 y la imagen 2
Frame 1: Should look like image below Cuadro 1: En caso de que la imagen parezca más adelante
Frame 2: Cuadro 2:
8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8.) Seleccione la imagen en círculo cuadro 1 a continuación, haga clic derecho sobre él y haga clic en Agregar imagen de intercambio comportamiento:
9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) Al hacer clic en añadir el comportamiento de intercambio de imagen aparecerá otra ventana, haga clic en el tramo rectangular que creamos antes.
10.) Press F12 on your keyboard to preview it on your browser. See the difference between the two screenshots below before and after hovering the mouse pointer on the circle. 10.) Pulse F12 en su teclado para obtener una vista previa en su explorador. Vea la diferencia entre las dos capturas de pantalla por debajo de antes y después de suspendido el puntero del ratón sobre el círculo.
Before hover: Antes de flotar:
During hover: Durante hover:
![clip_image002 [5]](http://www.online-tech-tips.com/wp-content/uploads/2009/07/clip-image0025.jpg)
Adobe Fireworks is available from this URL: Fuegos artificiales de Adobe está disponible en esta URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/
Ben Carigtan shows you how it's done. Carigtan Ben le muestra cómo se hace.
» Filed Under »Filed under Web Site Tips Sugerencias del sitio web
 Save this page Guardar esta página |  Stir it up on Mixx Revuelva hasta que en Mixx | |
 Add to Reddit Agregar a Reddit |  Stumble this page Stumble esta página |
Related Posts Relacionado Puestos
- How to create animated menus with Adobe Fireworks Cómo crear menús animados con Adobe Fuegos artificiales
- How to apply picture frame effects in Photoshop Cómo aplicar efectos de imagen en Photoshop marco
- How to use the snipping tool in Windows Cómo utilizar la herramienta en Windows snipping
- How to use layers as background effects in Photoshop Cómo usar capas de fondo como efectos en Photoshop
- How to insert a graphic header in Excel ¿Cómo insertar un gráfico en Excel cabecera
