Creating Rollover Buttons in CS3

Hi, I'm trying to create some nice graphics for a company website in CS3. I want to make buttons for links that have special effects when you roll over them with the mouse, click on them, etc. (I'm using Dreamweaver CS3 to put the site together). I have looked for tutorials on how to put the special link buttons together, but they all use ImageReady, which I don't have in Photoshop CS3. Any suggestions for where to go to find a good tutorial, or better still, anybody know how to make these buttons work? I can create the graphics just fine, it's getting them to be rollover links that I don't get. Thanks!

Ok, I'm sure you would find more help in a dreamweaver forum, but here is my answer...
First, one at a time, click each image that is going to be a button and then name it in the properties field (probably at the bottom of your screen). This will be very important in a minute. I would name it whatever the button says on it.
Second, click the first button, go to your tag inspector tab, then click behaviors. Right under behaviors there should be a little + with an arrow pointing down, click that and go to swap image.
You should get a box with a list of all the images on your site (most will say unnamed except for the ones we named earlier). Click the appropriate button name (the one that matches the first one you clicked), and then click browse to select your new rollover image. and hit OK.
Click the next button you want to make a rollover and repeat the process.
If you are tryin to do this to a background image, you will want to use css. It is a little more complicated, but basically in your css for that button, create a:hover and set a new background.
Hope that helps, let me know if you have any more questions!
StoneGraphicDesign

Similar Messages

Creating rollover buttons that also show a gallery image

Hi all.
I'm a newbie to Dreamweaver, so please bear with me!
Here's what I'm trying to do: I'm creating a portfolio gallery. I want to have a thumbnail button that will rollover and show its "down" image and also the corresponding portfolio image in the gallery window. I know this can be done, as I've seen it numerous times. So far, I've only found tutorials on how to create the button and not both button and gallery image.
Any suggestions? And please - no code! I can't seem to successfully implement code, as I'm html-retarded! So if you can offer a tutorial link or even how to create this using the Designer interface in Dreamweaver, I'd TOTALLY appreciate it.
Thanks,
B.

This isn't something you can do with HTML alone. You need a slideshow or gallery widget.
I recommend jQuery Fancybox
http://fancybox.net/
However a Google search will reveal tons of other ones.
As for a mouseover effect on thumbnails, you can do that easily with CSS.
Below is an example of Fancybox with CSS opacity applied to thumbnails.
http://alt-web.com/GALLERY/Photo_Gallery2.html
Nancy O.

Creating rollover buttons in flash cc

In my older version of flash the up, over, down and hit options appear along the timeline bar when I select frame. This button timeline doesn't appear in Flash CC. Can anyone tell me where the same function can be completed?

You should still see the same four-frame arrangement with CC - that has not changed. Make sure you have the timeline window opened. Also make sure you have created a button symbol and not a movieclip or graphic symbol.

Linking rollover buttons to an URL

Hi
I am wondering if anyone can help me, I am working in Flash
CS3. I have created a rollover button and now want to link it to a
URL, I am fully aware that I need to write some script to do this
and have written the following:
on(release){
//Goto Webpage Behavior
getURL("
http://www.greenskyaviation.com/","_blank");
//End Behavior
and it doesn't seem to be wanting to link to the website, I
feel that I am missing something so simple, but just can't get my
head around it, and will probably end up kicking myself when it is
resolved.
What am I doing wrong?
Many thanks
Jean-Philippe

Hi
Ok thank you, I have checked and I am working in action
script 1.0-2.0 and it still doesn't to be working. I am right in
thinking that I set the action when I've selected the symbol,
rather than the layer? And I should be working in the window when
all my layers are showing, and not when I'm selecting the different
rollovers?

Interactive PDF: Rollover button state no longer working properly ???

Okay, what's going on with the Interactive PDFs lately?
Now all my rollover buttons no longer work properly. If I have a button that's simply a black arrow, and in the rollover state it's red.
No matter if I'm checking it out in the latest Acrobat Reader or Pro X, the rollover only works for a brief second..then reverts back to black - the original state.
This, combined with my latest problem with the show/hide button state, is really becoming a frustrating hassle:
http://forums.adobe.com/message/3933451#3933451
Any help would be appreciated.
I'm running 7.5.1.
Is this an Acrobat issue? The button function here seems to work in the InDesign preview mode.

Hhmmm...I'm actually having this problem even with Adobe Acrobat 9 Professional. Does this make sense?
Again, I'm creating the document in InDesign CS5 and then building the PDF with Adobe Acrobat 9 Professional, and the rollover effects don't work in Adobe Acrobat 9, Adobe Reader 9, and Adobe Reader 10.
I'm a bit new to this process of software not providing its basic touted functionality. Is this the kind of thing where support for this functionality will vary from product to product? I had the same issue with PDF Portfolio -- where all its functioanlity was not supported in Adobe Reader X. If so, perhaps I should simply stick with the classic features of PDFs. Or can I trust, reliability, that going forward, this rollover effect will be supported in all Adobe Reader versions? This is quite an important issue for me as I provide all the documentation for my employer, including customer facing documentation -- and I simply don't know. Any recommendations?

Rollover buttons that play a movie clip.

Hello,
   I am new to Flash and I am trying to accomplish a simulation such as this example, http://www.its-about-time.com/investinesart/coalplantvirtualtour.swf. I have all of my movie clips done, but how do I tell a rollover button to play a specific movie clip? I also want to have all the movie clips to play simultaneously via a rollover button as shown in the example. I've attached a captured image of my timeline, if that helps. I've tried everything so far, but nothing is working! What is the simplest way of doing this?
I have this inside one of the movie clips (mc_2) in a seperate layer under - (actions)
RO_btn.onRollover = function(){
mc_2.play();
On the main timeline I have an actions layer with this:
stop();
Thinking that this may stop all of my movie clips but it doesn't.
Should I make an actions layer in each movie clip with this syntax huh? stop();?
I'm frustrated!!
Thanks, if you can help!
MG

Hi,
I have made something that you are looking for.
It will be of help to you.
basically you will have to create a few movie clips namely:
2 buttons: (name them a_btn, b_btn, c_btn, d_btn, e_btn)
3 movie clips (I am taking example image1_mc, image2_mc, image3_mc)
in each of these movieclips.place 2 frames and on second frame put your movieclip(one in one).on both the frames put stop()
now click on a_btn and write this script
on (rollOver) {
_root.image1_mc.gotoAndPlay(2);
_root.image2_mc.gotoAndPlay(2);
_root.image3_mc.gotoAndPlay(2);
on (rollOut) {
    _root.image1_mc.gotoAndPlay(1);
    _root.image2_mc.gotoAndPlay(1);
    _root.image3_mc.gotoAndPlay(1);
with this all 3 animations will work simultaneously. if you need to run any one of the movieclips at a time the you can address that mc in particular
.Say if you want only 1 mc to move at a time then put this on btn 2
on (rollOver) {
_root.image1_mc.gotoAndPlay(2);
on (rollOut) {
    _root.image1_mc.gotoAndPlay(1);
.Dont forget to give proper instance names to movieclips.(they are in properties panel.)
Cheers!

How to make edges of rollover button straight

I was using rollover pjc in my forms....
I am setting these properties of the buttons...
--> setting the 'label' property to [ROLLOVER]add
--> setting 'implementation class' property to
'oracle.forms.demos.enhancedItems.RolloverButton'
My rollover buttons are dislayed with rounded edges....
I want to make the edges of my rollover buttons
straight(like sqaure edges). please let me know how do i do that.
Thanks in advance

Judging by the source code of RolloverButton.java, it looks like that demo will always use rounded buttons.
If you want normal shaped buttons, then you should modify RolloverButton.java or create your own Java class based on it and change it. The change should be to not use setLeftmost(true) and setRightmost(true). By setting them to true you are telling the button to treat the button as if it's the leftmost or rightmost button, which will round that end (or both).
Regards,
Robin Zimmermann

Rollover button css styled with php function: possible?

Hi,
I created a working rollover button css styled, with normal href links, using this html:
<a href="link"><click here>Text</a>
But I would like to know how I can create a "contact us" button with following php function included:
<?=createMailto('[email protected]')?>

Well, I wrote the button code as mentioned in my first post, but the button does not call the email php function. When I replace the link in a href="link" with the php function, I can't get it to work.
I have to use href to get the button to display, and to change state on hover; but I don't know how to get the php function to work. Using this function as a plain function call within a regular tag works.

Help with rollover button

Can someone please tell me how to make these rollover buttons
to get URL?
The sample flash file can be viewed here
http://www.leadstar.com.au/header_page.html
and I have attached the code as well.
Many Thanks.

Roddy-
Thanks a bunch for trying to help me out. Here is where I got the code from.
http://11mystics.com/2008/05/21/create-rounded-corner-rollover-buttons/
They also have some suggestions in the comments on how to add links.
Let me know what you think I should do. Keep the buttons i have or ditch it all together and use your code. What was nice about this is the images are already there for me and I just have to alter a few things to get what I want.
Thanks

Rollover Button Link HELP please

I am trying to create a button that does this (HOME in the top left side):
http://fromtherivercollective.com/Blog/
for this site:
http://fromtherivercollective.com
Is this possible in iweb? if not with shapes can I use images? I am not getting anywhere and am so frustrated. Any help is much appreciated. Thanks!

Here's an example of something similar: rollover drop down. The code used is included.
And another type: Color fading menu/navbar based on jQuery
OT

Rollover Buttons

Hi, I'm trying to create a simple rollover button in flash 9
and its not working the way its supposed to. The button is a
hyperlink that when clicked takes the user to a web page. Getting
the link itself to work is easy. However getting the text to change
color when the user rolls the mouse over the button is another
story. I created my button with two layers: a text layer on top of
a white background layer. The first frame shows the hyperlink in
blue, the second frame is a keyframe with the text in red.
However, what actually happens when I test the movie is that
the text only changes color to red when the mouse is positioned on
the part of the white background that is NOT the text. So if a user
mouses over the text it doesn't change color. It only changes when
they mouse over the rest of the button area. I want it to change
color when they mouse over the text itself. Is there some special
way to make this happen?

No, it is not possible to make flash buttons or rollover images as you describe within iWeb directly. However you can edit the HTML files that iWeb generates to embed content like this from other sources. There is a general method of incorporating external HTML code that will allow you to do all of this. You can find out more about this in the following thread...
http://discussions.apple.com/thread.jspa?messageID=2446725&#2446725
Also, if you want to generate flash buttons automatically, here is a resource... http://www.flashbuttons.com/
And finally, regarding Flash content in general. It is possible to drag Flash content directly into iWeb as long as it is saved in Flash 5 format. Please note that in doing so, your flash content will be handled by QuickTime (that's why there is the Flash 5 requirement), which may or may not be acceptable to you.

Rollover button

I created a rollover button and when I click on it a white
out line appears around the button, why is that.

Hello,
Can you post a link or the code?
Without that, it's just a guess...rollover image is smaller
than initial
image, a border is set on hover, you're seeing FireFox's
dotted outline,
etc...
Thanks,
Tim
"tanktery" <[email protected]> wrote in
message
news:fn3dv6$k7e$[email protected]..
>I created a rollover button and when I click on it a
white out line appears
>around the button, why is that.

IDCS4: Major bug creating interactive buttons

I have a number of IDCS3 files with interactive buttons which jump to a specific page of the document using bookmarks. These buttons no longer work when the file is opened in IDCS4.
In CS4, the button has a "Go to text anchor" action applied however the Text Anchor pop-up below is greyed out and says None. All the Bookmarks that I've created are present and correct. It would appear that CS4 is ignoring page bookmarks and will now only work with text anchors.
This bug is also very easy to recreate with a new document in CS4:
1. Create a new two page document.
2. Go to page two and add a bookmark.
3. Go to page one, create a button and add the "Go to Anchor" action.
4. The Text Anchor pop-up should show the bookmark that was added it step 2 but it remains greyed-out.
I've submitted this to Adobe and reverted back to using CS3 for any interactive work.
Graham.

Hi Sandee,
Thanks very much for confirming the bug and for the workaround however this is a lot of work for my existing projects and easier to simple update them using CS3.
Hmmmm... now, your comment "...bookmarks have never been recognized as part of making buttons." - try telling that to IDCS3, it even indicates that you've linked to a bookmark when you add a "Go to Anchor" behaviour to a button. I found this method more flexible and, to my simple way of thinking, more logical - a Bookmark goes to to a page in a document while a Hyperlink goes to a URL. For new CS4 projects I will now have to use the Hyperlink Destination (Type: Page) option instead. Oh well...
So the problem isn't insurmountable for new projects but is still a bug in that it "breaks" legacy CS3 files opened in CS4 - and that's the argument I'll focus on when I hear back from Adobe.
Cheers, Graham.

Help with trying to make a rollover button

I'm trying to make a roll over button using this tutorial
http://www.pegaweb.com/tutorials/rollover-buttons/rollover-buttons.htm
and it doesn't seem to do what the tutorial says it will do 2-3 steps in.
The part where it says...
Quote:
- In the Channels window, Ctrl+Click the "Alpha" layer, to select its outline.
- Go back to the Layers window, and create a new layer.
- Choose the Gradient Tool. (Remember that it might be hidden under the Paint Bucket Tool.) Apply a gradient from the bottom of the image to the top.
Mine does not create a gradient that looks like the image they have presented.
I just have the entire wood look, and then the outline of my button is just a little darker. I don't get the white background with the gradient applied to it in the button space.
Would someone mind following the steps at this link and letting me know if it is missing something? It only took me 2 minutes to get to this point before I couldn't figure out why it wasn't doing what it was supposed to.

When you create the button look in the upper left hand corner of the screen and see what type of object you are creating. Placing the mouse of the the three buttons will give you a tool tip of what they are.
The one you want is the one on the right as it will create a pixel based rectangle. Make sure you put this rectangle on its own layer, then you can move it or delete it if necessary. Lock the transparency7 button at the top of the layers panel. The will make sure when you create the gradient it will put it inside the button you made and not outside of it.
If you are seeing just a border I am thinking the middle button in the top tool bar is selected which creates a path. It is possible to fill that path and then create the gradient but you have to make sure that the lock transparency is not checked. Open the paths panel and at the bottom of the panel is a fill button. This creates a pixel based object which you can then create a transparency using the steps above.

RollOver button picture scroll

hey everyone,
I'm a bit new to actionscript and am having a real hard time.
I'm trying to create a picture slide (that looks like a piece of
film negative). It will have 20 thumbnails to scroll thru but I
only want to be able to see around 4 pics or so at at time so you
can scroll thru them. I've created a left arrow and right arrow so
that when you rollover them they will scroll the film in either
direction till it ends. also when you rollOut, the scrolling stops
in place. I've heard a good way to start is to create a mask so
that I only see a certain amount of the image. eventually, clicking
on the thumbnails will link to the full images. I've seen things
like this all over the internet so I know it's possible.
feeling pretty lost and stupid, anybody have any ideas?
brad

thanks for the info. that site has a lot of good info. i'm
still having a problem getting it to work right though. I thought
i'd save a motion tween, that slides left, as a movie clip. Then in
the main timeline i created a button that causes it to tween and
stop on rollOver and rollOut. then create a right sliding tween
that reacts to a right button. It's reacting the way i want it to
for the most part but the static artwork in the main timeline keeps
bllinking over and over. Is it looping it somehow? What am I doing
wrong?
b-rad

Creating Rollover Buttons in CS3

Similar Messages

Maybe you are looking for