How to create an image hover mouseover using Fireworks Come creare un'immagine hover mouseover utilizzando fuochi d'artificio
Posted on July 5, 2009 at 5:35 am Posted on July 5, 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. Per creare pagine web con HTML dinamico capacità da zero, avremmo bisogno di master tradizionalmente DHTML e che comprende tecniche come HTML e JavaScript immagine hotspot. In questo tutorial vi mostrerò come creare automaticamente pagine DHTML con un comportamento di swap immagine utilizzando 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. Il risultato finale è un progetto completo di DHTML HTML, file di immagine e il codice JavaScript - e quelli sono fatti senza alcuna codifica a mano.
1.) Create an image using the shape tool under the vector section (by default, the shape is set to rectangle). 1.) Creazione di un'immagine utilizzando la forma strumento sotto la sezione vettoriale (per impostazione predefinita, la forma è impostato su rettangolo). 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. Per visualizzare le immagini più semplicemente cliccare sulla piccola freccia accanto al rettangolare immagine, o semplicemente premere "U" per passare il più comunemente utilizzato forme. Below is a screenshot of expanded shape tool. Di seguito è riportato uno screenshot della forma estesa strumento.
2.) The shape we are going to create will act as a trigger for our swap image behavior later on. 2.) La forma ci accingiamo a creare agirà come un limite per la nostra immagine di swap comportamento più tardi. For now we will use a circle but you can use any shape or object as you prefer. Per ora ci si avvarrà di un cerchio, ma è possibile utilizzare qualsiasi forma o l'oggetto, come si preferisce.
3.) After creating a shape on your canvas import a picture to be used for image swapping. 3.) Dopo aver creato una forma sulla tela importare una foto da utilizzare per l'immagine di swapping. Click on file then import, or press ctrl + r on your keyboard then browse for the desired picture. Fare clic sul file, l'importazione, oppure premere Ctrl + R sulla tastiera, quindi selezionare l'immagine desiderata.
4.) Your canvas should have a trigger button and image as discussed earlier. 4.) Il tuo tela dovrebbe avere un limite pulsante e l'immagine, come discusso in precedenza. Next we create a new frame used for another image. Poi si crea un nuovo telaio usato per un'altra immagine. Click New/Duplicate frame under the Frames and History panel. Fare clic su Nuovo / Duplica fotogramma sotto le cornici e Storia del pannello.
5.) Select newly created frame and import another image. 5.) Seleziona cornice appena creata e importazione un'altra immagine. It is best that image on frame 1 and frame 2 has exactly the same absolute positioning on your canvas. E 'meglio che l'immagine sul fotogramma 1 e frame 2 è esattamente lo stesso posizionamento assoluto sul tela.
6.) Going back to frame 1. 6.) Tornando al telaio 1. While the circle shape is selected, right click on it and insert a polygonal slice in it. Mentre il cerchio è la forma selezionata, fate clic destro su di esso e inserire una fetta poligonale in essa.
7.) Next create a rectangular slice for image 1 and image 2 7.) Avanti creare una fetta rettangolare per immagine 1 immagine 2 e
Frame 1: Should look like image below Frame 1: l'immagine dovrebbe essere simile al di sotto
Frame 2: Frame 2:
8.) Select the circle image on frame 1 then right click on it and click Add swap image behavior: 8.) Selezionare il cerchio immagine sul fotogramma 1 poi fate clic destro su di esso e fare clic su Aggiungi immagine comportamento di swap:
9.) Upon clicking on add swap image behavior another window will appear, click on the rectangular slice we created earlier. 9.) Su clic su Aggiungi un altro problema di swap immagine Verrà visualizzata la finestra, fare clic sul rettangolare fetta abbiamo creato in precedenza.
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.) Premere il tasto F12 sulla tastiera per visualizzare in anteprima sul tuo browser. Vedi la differenza tra le due immagini qui sotto riportate, prima e dopo in bilico il puntatore del mouse sul cerchio.
Before hover: Prima hover:
During hover: Durante il volo stazionario:
![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 sono disponibili da questo URL: http://www.adobe.com/products/fireworks/ http://www.adobe.com/products/fireworks/
Ben Carigtan shows you how it's done. Ben Carigtan vi mostra come è fatto.
» Filed Under »Archiviato in Web Site Tips Sito Web Suggerimenti
 Save this page Salva questa pagina |  Stir it up on Mixx Mescolare fino a Mixx | |
 Add to Reddit Aggiungi ai Reddit |  Stumble this page Stumble questa pagina |
Related Posts Related Posts
- How to create animated menus with Adobe Fireworks Come creare menu animati con Adobe Fireworks
- How to apply picture frame effects in Photoshop Come cornice di applicare effetti in Photoshop
- How to use the snipping tool in Windows Come utilizzare il snipping strumento in Windows
- How to use layers as background effects in Photoshop Come usare come sfondo strati effetti in Photoshop
- How to insert a graphic header in Excel Come inserire un grafico in Excel intestazione
