LIBRARY: Tutorials Video Tutorials Reviews Interviews Editorials Features Business Authors RSS Feed

Rollovers in Adobe Dreamweaver CS3

Untitled Document Image 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.

Part 2 shows how to embed pop up swf videos into your web page with some minor tweaks of the built in features in Dreamweaver CS3.
Abraham Chaffin
Abraham Chaffin
CreativeCOW.net,
Cambria, California USA

©2007 CreativeCOW.net. All rights reserved.


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.

Image Name

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.

CSS Class Border

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.

On Mouseover and on Mouseout

This should give you the basic idea of some things you can do with the rollover functions in Dreamweaver CS3.



Part 2

The 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.

Movie 1 Movie 2 Movie 3

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

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...


Related Articles / Tutorials:
Adobe Dreamweaver
Bridging Web Design and Development with Adobe Extract

Bridging Web Design and Development with Adobe Extract

Adobe Extract, released in August 2014, is a feature in Photoshop 2014 CC, Dreamweaver 2014 CC and Creative Cloud that has the potential to transform the way web designers and developers work together. If the designer does have a Creative Cloud membership, it opens up a new possibility: uploading a PSD file (one received via email, for instance) to Creative Cloud and getting the assets and CSS information out to to your project.

Editorial, Feature
Michael Hurwicz
Adobe Dreamweaver
Using PHP To Obtain Data from a MySQL Database

Using PHP To Obtain Data from a MySQL Database

Showing how to use PHP to access a MySQL database. Building a real world application, this tutorial is interesting in that it shows how to narrow a search based on 2 different criteria (2 different MySQL fields). Finally, this tutorial ends with giving complete code for an HTML page as well as the PHP files.

Tutorial
Demetri Tashie
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 4

Working with Photoshop Slices in Dreamweaver - 4
  Play Video
In part 4 of this video tutorial series, Richard finalizes the web page inside of Dreamweaver. Topics covered in this tutorial are repeating background images, background color, site load speed up and expandable site construction.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 1

Working with Photoshop Slices in Dreamweaver - 1
  Play Video
In part one of this video tutorial series, Richard Williams shows you the process of designing a website in Photoshop, exporting it as image slices and then importing the slices into Dreamweaver.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 2

Working with Photoshop Slices in Dreamweaver - 2
  Play Video
In part two of this video tutorial series, Richard Williams explains how to export the rollover state of buttons from Photoshop and import them into Dreamweaver to then be applied to the site being designed from part one.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Working with Photoshop Slices in Dreamweaver - 3

Working with Photoshop Slices in Dreamweaver - 3
  Play Video
In part three of this video tutorial series, Richard Williams shows how to convert images to background images and put text over the top of them inside of Dreamweaver. Richard then applies CSS styling to the HTML text to match it with the design created in Photoshop.

Tutorial, Video Tutorial
Richard Williams
Adobe Dreamweaver
Spry Menu Explained

Spry Menu Explained

In this tutorial, CreativeCOW leader Richard Williams explains the principles of the Spry Menu and answers the most commonly asked questions.

Tutorial
Richard Williams
Adobe Dreamweaver
CSS Basics in Adobe DreamweaverCSS Basics in Adobe Dreamweaver

This tutorial is designed to introduce the concepts of using CSS in Adobe Dreamweaver and HTML for web designers who are not familiar with CSS in web design. CSS stands for Cascading Style Sheet and is a system for adding styling to your web pages and web page content.

Tutorial
Abraham Chaffin
Recent Articles / Tutorials:
Adobe After Effects
mocha AE Planar Tracker for Absolute Beginners

mocha AE Planar Tracker for Absolute Beginners

Want to learn how to create advanced visual effects? Learn how to use mocha AE to track your shot and add advanced visual effects to live action footage inside Adobe After Effects. mocha can help you track shots that would be hard to track using traditional 2D point or feature trackers because it is a PLANAR TRACKER. A planar tracker uses planes and textures to track as opposed to points or groups of pixels. This allows the tracker to stay on track even if your shot contains motion blur or a very shallow depth of field. mocha AE comes included with Adobe After Effects and is available since CS3 and there is no reason for you not to use this awesome tool to make it easier for you to track your shot, replace screens or rotoscope!

Tutorial
Tobias Gleissenberger
Art of the Edit
5 Tips for Finding the Right Edit Point

5 Tips for Finding the Right Edit Point

Accomplished editors tend to point to instinct and experience when it comes to the exact edit point. Here are 5 tips from veteran editor Sven Pape of "This Guy Edits" that may help you get there. Some editors say that great editing is invisible. So is the right frame the one we don't notice?

Tutorial
Sven Pape
MORE
© 2016 CreativeCOW.net All Rights Reserved
[TOP]