How to create an image hover mouseover using Fireworks Hoe maak je een afbeelding Beweeg de cursor op het gebruik van vuurwerk

Posted on July 5, 2009 at 5:35 am Geplaatst op 5 juli 2009 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. Voor het maken van webpagina's met dynamische HTML-vermogens van de grond af, dan zouden we van oudsher moeten kapitein DHTML en met technieken als HTML-en JavaScript image hotspots. In deze tutorial zal ik laten zien hoe je automatisch DHTML-pagina's met een swap imago probleem met 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. De uiteindelijke output is een complete DHTML project compleet met HTML-, beeld-bestanden en JavaScript-code - en die zijn gedaan zonder codering met de hand.

1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1.) Maak een afbeelding met behulp van de vorm instrument in het kader van de vector afdeling (standaard, de vorm is ingesteld op rechthoek). 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. Als u meer afbeeldingen klikt u op het kleine pijltje naast de rechthoekige afbeelding, of gewoon op "U" om te schakelen tussen de meest gangbare vormen. Below is a screenshot of expanded shape tool. Hieronder is een screenshot van de uitgebreide vorm tool.

2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2.) De vorm we gaan maken zal fungeren als een trigger voor onze swap beeld gedrag later. For now we will use a circle but you can use any shape or object as you prefer. Voor nu zullen we gebruik maken van een cirkel, maar je kunt elke vorm of voorwerp als u wenst.

3.) After creating a shape on your canvas import a picture to be used for image swapping. 3.) Na het aanmaken van een vorm van uw doek invoer van een foto kunnen worden gebruikt voor het imago wisselen. Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture. Klik op bestand vervolgens importeren, of druk op Ctrl + R op het toetsenbord dan blader naar het gewenste beeld.

4.) Your canvas should have a trigger button and image as discussed earlier. 4.) Uw doek moet een trigger knop en beeld als eerder besproken. Next we create a new frame used for another image. Vervolgens maken we een nieuw frame gebruikt voor een ander beeld. Click New/Duplicate frame under the Frames and History panel. Klik op Nieuw / Dupliceren frame onder de Frames en Geschiedenis paneel.

5.) Select newly created frame and import another image. 5.) Selecteer de zojuist gemaakte frame en de invoer een ander beeld. It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas. Het is het beste dat beeld op frame 1 en frame 2 heeft precies dezelfde absolute positionering van uw doek.

6.) Going back to frame 1. 6.) Gaan terug naar frame 1. While the circle shape is selected, right click on it and insert a polygonal slice in it. Terwijl de cirkel shape is geselecteerd, klik met de rechtermuisknop op en plaatst u een polygonale sneetje in.

7.) Next create a rectangular slice for image 1 and image 2 7.) Volgende creëren een rechthoekig stuk voor afbeelding 1 en afbeelding 2

Frame 1: Should look like image below Frame 1: Moet eruit afbeelding hieronder

Frame 2: Frame 2:

8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8.) Selecteer de cirkel beeld op frame 1 en klik rechts op en klik op Toevoegen swap image gedrag:

9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) Na het klikken op toevoegen swap image gedrag een ander venster verschijnt, klikt u op de rechthoekige slice we eerder.

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.) Druk op F12 op je toetsenbord om een voorbeeld van het op uw browser. Zie het verschil tussen de twee screenshots hieronder voor en na de muis aanwijzer op de cirkel.

Before hover: Voordat zweven:

During hover: Tijdens het zweven:

Adobe Fireworks is available from this URL: Adobe Fireworks is beschikbaar via de volgende URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/

Ben Carigtan shows you how it's done. Ben Carigtan toont je hoe het is gebeurd.

Enjoyed this post? Enjoyed this post? Subscribe to Online Tech Tips via Subscribe to Online Tech Tips via RSS Feed RSS Feed or via of via Email E-mailadres and receive free daily productivity tips. en ontvang gratis dagelijkse productiviteit tips.

» Filed Under »Filed Under Web Site Tips Web Site Tips