Step 15 : Now for the thumbnail image “p2a.jpg”, I have clicked “p2.jpg” image to be displayed. Here while I click on the thumbnail image “p1a.jpg”, I need “p1.jpg” image to be displayed. Make sure to uncheck the Restore images onMouseOut (i.e, original images will be replaced) Always check the Preload images (i.e, to load the images when the page is loaded)Ĥ. Set source to – Select the image name, what you need to replace with the “gallery_main” image on clicking the thumbnail.ģ. Images – Here select the image id, which you need to swap.Ģ. Please ensure whether the below 4 points has been done before clicking “Ok” on the “Swap Image” dialog box.ġ. Immediately there appears a “Swap Image” dialog box. Select the first thumbnail image and go to the “ Tag Inspector” on the Right side of the work space and choose the Swap Image action from the list of Behaviors. Let’s create the swap image effect to the thumbnail images.
DREAMWEAVER CS6 TUT CODE
Step 14 : When you apply a behavior to an image, Adobe Dreamweaver CS6 inserts the HTML source code into the area tag automatically. Step 13 : Repeat this process for rest of the thumbnail images and name their ID as “ g2, g3 to g8“. Repeat the “Step 11” and name the ID as “ g1“. Step 12 : Now select the thumbnail image. Type the ID as “ gallery_main” in the properties field. Let’s create an Image ID on the “Bottom-Left” on the Adobe Dreamweaver CS6. Step 11 : Select the image “p1.jpg” (i.e, bigger image). Step 10 : Now the structure of the gallery has formed as below Step 9 : Repeat the process of “ Step 8” for each thumbnail image to place them in their appropriate places. The Select Image Source dialog box appears.
Also I have named all the bigger images as p1.jpg, p2.jpg to p8.jpg and all the thumbnail images as p1a.jpg, p2a.jpg to p8a.jpg. Step 8 : Load the first big image (i.e, p1.jpg), where you want to insert it. Step 7 : Then code the CSS properties in “style.css” style sheets to retrieve the below structure. Step 6 : Using DIV tag, I have created the areas for the title, gallery big image and thumbnail image on the “ gallery.html” page.
Step 5 : First I need to create the DIV tag and then to create its corresponding style like its position, margin, color, appearance, padding & size for the photo gallery layout page. In this tutorial, I need a layout structure as shown below: Hence it will help you to specify exactly how page elements will be arranged. Step 4 : Just make a rough sketch of the gallery structure that you are planning to create. You can crop & set the bigger images size as : width – 640px, height – 500px and the thumbnail image size : width – 76px, height – 57px. Step 3 : In this gallery, I have used 8 big images and 8 thumbnail images (i.e, small image). Here we will start by setting the page properties as below Step 2 : Using DIV tag and CSS style we can create a basic layout for the photo gallery. Step 1 : Open Adobe Dreamweaver CS6 and load your “ gallery.html” page. This tutorial is designed to help you create a Photo Gallery using Swap Image Behavior & Appear/Fade effects in Adobe Dreamweaver CS6. You can swap more than one image at a time with a single Swap Image behavior. The Swap Image behavior swaps one image for another image, this technique is normally used in button rollovers and Photo Gallery. Adobe Dreamweaver CS6 includes some inbuilt facilities like Swap Image behavior.
0 kommentar(er)
