How to create an image hover mouseover using Fireworks Comment faire pour créer une image en utilisant la souris hover Fireworks
Posted on July 5, 2009 at 5:35 am Posté le 5 Juillet, 2009 à 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. Pour créer des pages web avec HTML dynamique, les capacités à partir de zéro, nous aurions toujours besoin de maîtriser DHTML et qui comprend des techniques telles que HTML et JavaScript hotspots image. Dans ce tutoriel, je vais vous montrer comment créer automatiquement des pages DHTML avec un comportement swap image avec 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. Le résultat final est un projet complet avec DHTML HTML, des fichiers image et du code JavaScript - et ceux qui sont effectués sans aucun codage à la main.
1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1.) Créer une image à l'aide de l'outil sous la forme du vecteur section (par défaut, la forme est mis à rectangle). 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. Pour voir d'autres images, cliquez simplement sur la petite flèche à côté de l'image rectangulaire, ou appuyez simplement sur "U" pour basculer les formes les plus couramment utilisés. Below is a screenshot of expanded shape tool. Vous trouverez ci-dessous une capture d'écran de l'outil de forme élargie.
2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2.) La forme que nous allons créer va agir comme un déclencheur de notre comportement swap image plus tard. For now we will use a circle but you can use any shape or object as you prefer. Pour l'instant, nous allons utiliser un cercle, mais vous pouvez utiliser n'importe quelle forme ou de l'objet que vous préférez.
3.) After creating a shape on your canvas import a picture to be used for image swapping. 3.) Après avoir créé une forme sur votre toile importer une image à utiliser pour l'échange de l'image. Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture. Cliquez sur le fichier puis de l'importer, ou appuyez sur ctrl + r sur votre clavier, puis accédez à l'image souhaitée.
4.) Your canvas should have a trigger button and image as discussed earlier. 4.) Votre toile doit avoir un bouton de déclenchement et de l'image comme indiqué plus haut. Next we create a new frame used for another image. Ensuite nous créons un nouveau cadre utilisé pour une autre image. Click New/Duplicate frame under the Frames and History panel. Cliquez sur Nouveau / Dupliquer cadre dans le cadre du comité de cadres et d'histoire.
5.) Select newly created frame and import another image. 5.) Sélectionnez cadre nouvellement créé et à l'importation une autre image. It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas. Il est préférable que l'image sur l'image 1 et image 2 a exactement le même positionnement absolu sur votre toile.
6.) Going back to frame 1. 6.) Pour en revenir à l'image 1. While the circle shape is selected, right click on it and insert a polygonal slice in it. Alors que le cercle est la forme sélectionnée, cliquez avec le bouton droit sur lui et insérer une tranche polygonal en elle.
7.) Next create a rectangular slice for image 1 and image 2 7.) Suivant une tranche rectangulaire de l'image 1 et image 2
Frame 1: Should look like image below Frame 1: Faut-il ressembler à l'image ci-dessous
Frame 2: Frame 2:
8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8.) Sélectionnez le cercle d'image sur l'image 1 puis clic droit sur celui-ci et cliquez sur Ajouter une image swap comportement:
9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) À ajouter en cliquant sur le comportement swap image une autre fenêtre apparaît, cliquez sur le rectangle tranche, nous avons créé plus tôt.
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.) Appuyez sur la touche F12 de votre clavier pour visualiser sur votre navigateur. Voyez la différence entre les deux captures d'écran ci-dessous avant et après le vol stationnaire le pointeur de la souris sur le cercle.
Before hover: Avant le vol stationnaire:
During hover: Pendant le vol stationnaire:
![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 disponible à cette URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/
Ben Carigtan shows you how it's done. Ben Carigtan vous montre comment faire.
» Filed Under »Classé dans Web Site Tips Web Site Tips
 Save this page Enregistrer cette page |  Stir it up on Mixx Stir it up sur Mixx | |
 Add to Reddit Ajouter à Reddit |  Stumble this page Stumble cette page |
Related Posts Related Posts
- How to create animated menus with Adobe Fireworks Comment faire pour créer des menus animés avec Adobe Fireworks
- How to apply picture frame effects in Photoshop Comment faire pour appliquer des effets de cadre photo Photoshop
- How to use the snipping tool in Windows Comment utiliser les outils de Windows snipping
- How to use layers as background effects in Photoshop Comment utiliser les couches de fond des effets dans Photoshop
- How to insert a graphic header in Excel Comment insérer un graphique dans Excel tête
