Rollovers in Adobe Dreamweaver CS3 : Adobe Dreamweaver Tutorial

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.

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.

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

•

Re: Rollovers in Adobe Dreamweaver CS3
by Jim peterson

well work.
this trick is really good for beginners.

thanks

keep it up.. nice work

•

Re: Rollovers in Adobe Dreamweaver CS3
by Agi Losonczi

Hi Abraham,

I took a look at the second part of this tutorial. I tryed it several times, but it didn't work for me. What am I doing wrong? Could you please take a look at the coding? Thank you! I appreciate it. Or can you upload the right coding, please? Agi

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 



<style type="text/css"> 





<script type="text/javascript"> 





</head> 



<body> 

http://www.adobe.com/go/getflashplayer">



\n 

\n \n');MM_changeProp('movtarget','','className','movvis','DIV')" onmouseout="MM_changeProp('movtarget','','className','movinvis','DIV')">Movie 1 



Content for New Div Tag Goes Here 



</body>

•

Rollovers in Adobe DW
by Jason Hann

Hi Abranham. I really appreciate the tutorial on the rollovers, but I'm not doing something right, because I can't get the rollovers to work. I'm using CS4 version of DW and when I placed the swf into the htm, the <noscript> tags never appeared in the code, so I just clicked onto the swf file and copied that code, which began with a <object id="FlashID" classid=""> I'm new to this code stuff, so I'm struggling a bit on this one. Thank you

•

Javascript rollover vs CSS rollover
by Michelle Parker

Abraham, I enjoyed your easy to learn tutorial above. Currently I'm building a website with DWCS3, and would like to have my horizontal navigation bar with rollover effects. I used DW's Insert > Image Object > Navigation Bar, however, this method uses javascript and I have found conflicting information in regards to browser compatibility and javascript. Can you provide a tutorial that expresses design of a horiz. browser with several sections that uses only CSS (not Javascript) using DW? I have looked into various tutorials and haven't found one that made sense to me. My rollover navbar design has text as part of the art. The tutuorial at "CreativePro.com (advanced rollovers)" incorporates starting a list and incorporating the art, however, there is a missing link in their information and my success. I appreciate your opinion, time and tutorials.

•

Rollovers in Adobe Dreamweaver CS3
by Jesse Mitchell

Thank you! I was not inserting the single quotes when I first attempted it. Thank you for the additional input.

•

Rollovers in Adobe Dreamweaver CS3
by Abraham Chaffin

Hey Jesse,

Yea you could do that - you'd just have to add the variables into the function and do your basic code manipulation to make the variables fit into the javascript.

i.e.

function ADD_flash(width, height, url){
MM_setTextOfLayer('movtarget','','<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="' + width + '" height="' + height + '">n <param name="movie" value="' + url + '" />n <param name="quality" value="high" />n <embed src="' + url + '" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="380"></embed>n </object>');

MM_changeProp('movtarget','','className','movvis','DIV');
}

•

Rollovers in Adobe Dreamweaver CS3
by Jesse Mitchell

Is there a way to make this a function and pass the values to it example: *.swf / height / width. Since all of the other information is the same. Here is what I have with out passing the above information:

Function:
function ADD_flash(){
MM_setTextOfLayer('movtarget','','<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version... width="400" height="380">n <param name="movie" value="flash/SSO_Login.swf" />n <param name="quality" value="high" />n <embed src="flash/SSO_Login.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Shockw... type="application/x-shockwave-flash" width="400" height="380"></embed>n </object>');MM_changeProp('movtarget','','className','movvis','DIV')
}

Creating the rollover:
view image.

******
The end result is when you rollover the item you see the same information that you put into the Set Context portion of Dreamweaver, and not the image. Any ideas?

•

Rollovers in Adobe Dreamweaver CS3
by Abraham Chaffin

Making the main image in part 1 of this tutorial a hyperlink in the normal manner shouldn't effect the rollover functionality of the image. They are two separate functions that work independently of each other. Try simply making it a hyperlink.

•

Rollovers in Adobe Dreamweaver CS3
by Lori Stammer

This was great, I have been looking for this capability for a while. Now that the carrots been dangled, how do I script so the larger image can be linked?

•

Rollovers in Adobe Dreamweaver CS3
by Mowfak Galy

Dear Abraham,
Thank you for posting Rollovers in Adobe Dreamweaver CS3, I

•

Rollovers in Adobe Dreamweaver CS3
by Abraham Chaffin

Hey Anna,

Hard to tell what you did wrong without knowing the steps you did or seeing the site / page you are talking about. What is the URL for the page?

•

Rollovers in Adobe Dreamweaver CS3
by Anna Sillanp

Hey! I did the second part of this tutorial and for some reason it didn't work when i previewed it in firefox, but it did work in safari??? What did i do wrong? The rollover on the tutorial page works fine in my firefox browser...

Rollovers in Adobe Dreamweaver CS3

Part 2