How to create an image hover mouseover using Fireworks Como criar uma imagem hover mouseover usando Fireworks
Posted on July 5, 2009 at 5:35 am Postado em 5 de julho de 2009 às 5:35
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 criar páginas web com HTML dinâmico capacidades a partir do zero, teríamos necessidade de dominar tradicionalmente DHTML e que inclui técnicas como imagem hotspots HTML e JavaScript. Nesse tutorial eu vou mostrar-lhe como criar automaticamente DHTML páginas com uma imagem de swap comportamento usando o Adobe Fireworks .
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. O resultado final é uma completa DHTML projeto completo com HTML, imagens e código JavaScript - e essas são feitas sem qualquer codificação manual.
1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1.) Criar uma imagem usando a ferramenta sob a forma vetorial seção (por padrão, está definida a 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 mais imagens basta clicar na pequena seta ao lado da imagem retangular, ou simplesmente pressione "U" para alternar as formas mais comumente utilizadas. Below is a screenshot of expanded shape tool. Abaixo está uma captura de tela de forma expandida ferramenta.
2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2.) A forma que vamos criar irá agir como um gatilho para a nossa imagem de swap comportamento mais tarde. For now we will use a circle but you can use any shape or object as you prefer. Por agora, vamos utilizar um círculo, mas você pode usar qualquer forma ou objeto como você preferir.
3.) After creating a shape on your canvas import a picture to be used for image swapping. 3.) Depois de criar uma forma em sua tela importar uma imagem a ser usada para trocar imagem. Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture. Clique no arquivo, em seguida, importar, ou pressione Ctrl + R em seu teclado, em seguida, navegue para a imagem pretendida.
4.) Your canvas should have a trigger button and image as discussed earlier. 4.) Sua tela deve ter um botão e acionar imagem como discutido anteriormente. Next we create a new frame used for another image. Em seguida, criar uma nova moldura utilizada por outra imagem. Click New/Duplicate frame under the Frames and History panel. Clique em Novo / Duplicar moldura Molduras e História sob o painel.
5.) Select newly created frame and import another image. 5.) Selecione recém-criado moldura e importar outra imagem. It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas. É melhor que a imagem no quadro 1 e quadro 2 tem exactamente o mesmo posicionamento absoluto em sua tela.
6.) Going back to frame 1. 6.) Voltando ao quadro 1. While the circle shape is selected, right click on it and insert a polygonal slice in it. Embora a forma circular é selecionada, clique direito sobre ele e coloque uma fatia poligonal nele.
7.) Next create a rectangular slice for image 1 and image 2 7.) Próxima criar uma fatia retangular de imagem 1 e imagem 2
Frame 1: Should look like image below Quadro 1: Deve ser semelhante a imagem abaixo
Frame 2: Quadro 2:
8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8.) Selecione a imagem na moldura 1 círculo, em seguida, clique direito sobre ela e clique em Adicionar imagem swap comportamento:
9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) Após clicar em adicionar imagem swap comportamento outra janela irá aparecer, clique sobre a fatia retangular criámos anteriormente.
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.) Pressione F12 no seu teclado para visualizá-lo em seu navegador. Veja a diferença entre as duas telas abaixo antes e após a pairar o ponteiro do mouse sobre o círculo.
Before hover: Antes hover:
During hover: Durante a pairar:
![clip_image002 [5]](http://www.online-tech-tips.com/wp-content/uploads/2009/07/clip-image0025.jpg)
Adobe Fireworks is available from this URL: Adobe Fireworks está disponível a partir deste URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/
Ben Carigtan shows you how it's done. Ben Carigtan mostra como ele é feito.
» Filed Under »Arquivado Sob Web Site Tips Web Site Dicas
 Save this page Salvar esta página |  Stir it up on Mixx Mexa-se sobre Mixx | |
 Add to Reddit Adicionar a Reddit |  Stumble this page Stumble esta página |
Related Posts Related Posts
- How to create animated menus with Adobe Fireworks Como criar menus animados com o Adobe Fireworks
- How to apply picture frame effects in Photoshop Como moldura para aplicar efeitos no Photoshop
- How to use the snipping tool in Windows Como usar a ferramenta snipping em Windows
- How to use layers as background effects in Photoshop Como usar camadas como fundo efeitos no Photoshop
- How to insert a graphic header in Excel Como inserir um cabeçalho gráfico no Excel
