 |
|
| FORUMS | TUTORIALS | MAGAZINE | DVDs | BOOKS | PODCASTS | EVENTS | SERVICES | NEWSLETTER | NEWS | BLOGS |
|
Rollovers in Adobe Dreamweaver CS3
This tutorial is designed to give the user more control and flexibility using the Dreamweaver CS3 interface to create image mouseovers. It also will teach how to assign the mouseover image target to somewhere else on the web page and then assign a mouseover CSS style to the original mouseover button.
A few images of the same size are needed for this tutorial so I've included a few that you can download here. Open the html document provided in Dreamweaver CS3 and let's get started. 1) First we will create a few basic mouseover images. Go to the Insert Menu > Image Objects > Rollover Image. The Image name is what the javascript that will be created will use to find that image. Image1 is a fine name. Use 1.jpg for the Original image and 1-over.gif as the Rollover image. Keep the Preload rollover image box checked. The alternate text and URL arn't important as we arn't going to be putting this on the web or taking you to another page location so press OK. 2) Click beside the newly inserted rollover image and repeat step 1 to insert more / all of the rollover images. Just replace the 1s in step one with 2s etc. You now have a few rollover images. Save and preview your html file and you will see that they rollover nicely. But what if you wanted to actually have the image that you are rolling over appear as a larger image above? Let's make the rollover image appear in a different location on the page. First we need a placeholder image that loads when the page loads before any rollovers occur. 3) Put placeholder.gif above our rollover images by pressing return with your cursor in front of the images and then going to Insert > Image, choose placeholder.gif and press OK.  4) Now we need to name this image so that the script can find it. Select the placeholder image, in the properties window to the left of the width and height parameters type in "target" for the image name. 5) Assigning the target for the rollover images is fairly simple. Open the behaviors window by going to the Window menu > Behaviors. 6) Click on the first image (Image1) and you should see two behaviors assigned to it. <A> onMouseOut | Swap Image Restore <A> onMouseOver | Swap Image We want to adjust the Swap Image behavior to point to the other image so double click on "Swap Image". In the Swap Image window select the Set source to text which should be "1-over.gif" and cut it so it removes it. Select image "target" and paste "1-over.gif" into the Set source to field and press OK. 7) Repeat step 6 for all the rollover images you inserted so that the target for all them is set to the image named "target". Save and then preview your work to see what you've done. Now what if we didn't want the image to change after we rolled over and then came off? 8) Click on "Image1", in the Behaviors window click on Swap Image Restore and press the Delete key. (You can repeat this step again for all your rollover images) Now that the rollover image is going to another location the rollover buttons are looking a little bit drab. Let's assign some CSS styling so make them look more interesting. 9) In the CSS window let's create and new CSS Rule. Selector Type will be Class, Name will be "buttons" and Define in: This document only. Let's set a small padding and invisible border of 1 pixel. The padding is under the Box Category - set it to 10 for all sides. Set the border with Same for all "solid : 1 pixel : color #FFFFFF". Press OK. (The reason we set an invisible border is so when we create a rule that will later create a border we don't want to distort the positioning of our elements.) 11) For each rollover button choose buttons as the "Class" in the Properties window. 
12) Create a New CSS Rule to be assigned when the rollover buttons or moused over. Create it just the same as step 9 only call it "buttonsover", padding of 10 pixels, and a border of "solid : 1 pixel : color #990000". 13) Select "Image1" again and in the Behaviors window right click on "Swap Image" and choose "Add New List Item". Left click in the new <A> onMouseOver space and type "Image1.className='buttonsover'". (This also can be repeated for all the other rollover images.) 14) In the behaviors window in the <A> onMouseOut field assign "Image1.className='buttons'". This will make the class revert when you mouse out. Do this for all rollover images.  This should give you the basic idea of some things you can do with the rollover functions in Dreamweaver CS3. Part 2The next portion of this tutorial is a bit of a Dreamweaver hack to display a swf video / videos when you mouse over another element. Used in combination with some other simple functions you can get some pretty cool effects for your website. You can use this effect to showcase your videos in a gallery like istockvideo does.First you will need to download the project files here. Content for class "movinvis" Goes Here
The object of this tutorial is to display a video when you rollover an element. We're going to start by creating the CSS classes that we will assign to the placeholder div throughout this tutorial. 1) In the CSS window click the "New CSS Rule" icon. Selector type will be "Class", call the name of the class "movinvis" and it should be created for this document only. 2) In the CSS rule definition window select the "Positioning" category and set the position type to absolute, visibility to hidden, and the z-index to 999. (Absolute positioning makes the class not push other elements around it, and a higher z-index will put the class on top of other elements.) Press OK. 3) Again create a new CSS rule the same as in steps 1 and 2 only set the name of the class "movvis" and set the visibility to visible. 4) Insert a new div by going to the Insert menu > Layout Objects > Div Tag. Don't set any properties for the div yet and press OK. 5) Select the newly created div and in the properties window set the Div ID to "movtarget" and the class to "movinvis". Now that the placeholder div is setup to receive our movies let's create the buttons that will be used for the rollovers. This time for simplicity we will just use text. 6) Place your cursor above the invisible div and type "Movie 1" select the text, and make it a hyperlink. Put "#" as the file name or url. (You can repeat this step to setup the rollovers for "Movie 2" and "Movie 3" Next we will insert the movies that we want to assign to the div using the rollover links. Then we will assign them to the div onMouseOver of our links. Finally we will assign the classes onMouseOver and onMouseOut so the div is only visible when a movie is being displayed. 7) Go to the Insert menu > Media > Flash and choose rollover1.swf. Press OK. 8) Select the newly inserted flash video and go to the View menu > Code. Select the code between the <noscript> and </noscript> tags and copy it to your clipboard to be pasted later. 9) Go back to design view by going to View > Design. Select the flash video and delete it. 10) Select the "Movie 1" link and in the behaviors window press the (+) Add behavior button. Choose Set Text > Set Text of Container. Select the Container div "movtarget" and paste the copied code into the New HTML field. 11) Make sure the behavior was set to the onMouseOver event to create this effect. If it wasn't you can change it by clicking on the event and choosing onMouseOver from the dropdown. 12) With the "Movie 1" link still selected (+) Add another behavior called "Change Property". Make sure the Type of element is "DIV", and Element ID is div "movtarget". Select the "Enter:" radio for the Property and enter "className". Enter "movvis" for the New value and press OK. Make sure this behavior is assigned to the onMouseOver event, if not change it. 13) Repeat step 12 only assign the New value as "movinvis" and assign the action to the onMouseOut event. 14) Repeat steps 7-13 to "Movie 2" and "Movie 3". Now we will perform a hack on the javascript that DW uses for the Change Property behavior to make it work in the way that we are using it to change classes. 15) Go to the Edit menu > Find and Replace. Find in "Current Document", Search "Source Code", find "obj.style.", replace "obj.", and replace the two instances of this in the javascript code. You should be able to save and preview your work now to see what you've done. This technique can be used in conjunction with a positioning script to get the swf positioned exactly where you want it. Or setup different divs where you want the specific movies and target the event to go there. There are other ways to get this same effect but this is a slightly hacked way to get it with simple features built right into Dreamweaver CS3.
Comments
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Digg it
FORUMS • TUTORIALS • MAGAZINE • DVDs • BOOKS • PODCASTS • EVENTS • SERVICES • NEWSLETTER • NEWS • BLOGS
© CreativeCOW.net All rights are reserved.
[Top]
