Button and 'disjointed' rollover

I have put a button in the first frame of a movie clip and a
graphic and the second and third frames. The graphics give the
appearance that the button is being highlighted in a way different
than when you actually roll over the button itself. I am doing this
so that when you rollover a button you can show other buttons with
the secondary highlights.
My questiona are, why does my button loose its own behavior
when I attach a behavior to the movie clip it is contained in?
How can I get both the 'disjointed' rollover and the buttons
own rollover to work at the same time?
my test files
swf -
btnTest2.swf
fla -
btnTest2.fla

Thank you for your reply, I think I understand the 'why' now.
What I mean by the secondary highlights is what I show on the
right-side of my example. I want to mouse over a button and have
another button become 'highlighted' in a way that is different than
the normal button over or down state.
I'm really trying to solve this. I can make it work if I use
a movieclip for all of the button 'states' of up, over, down,
highlight 1, highlight 2 (each in their own frame). I then just add
all of the 'go to frame 2' kind of code and the 'go to frame 4 in
this other button' kind of code to the movieclip. The problem is
that I have 77 of the same 'button' symbol on one page, thats alot
of code to make mistakes with. And I can't make a symbol with all
of the code for 'go to frame 2 on mouseover' already in the
movieclip symbol or I run into the same problem i already have.
Please help me understand this, it seems like it should be
simple.

Similar Messages

Disjointed rollover and jQuery (CS4)

Hi there,
I made a simple page that starts with a gif animation, when the animation is done, a div fades up and quickly after that another div fades up, both using jQuery. This last div holds just an image. Now I have to change that image for a simple disjointed rollover (show/hide) so that on mouseover a second image is shown. I made that rollover in FireWorks CS4 and exported it as html and images. Then I inserted the html of the rollover in place and did a preview and ouch, everyting is broken. The first hidden div doens't fade up and the second div is shown from the start. How do I fix this?

I made that rollover in FireWorks CS4 and exported it as html and images.
It's a huge mistake to rely on graphics apps to generate HTML code and scripts for you. For best results, use DW to build your HTML & rollover behaviors. Use graphics apps for images only.
everyting is broken. The first hidden div doens't fade up and the second div is shown from the start.
Evidently, you have script conflicts or some other egregious code errors that are killing your page.
Validate your code:
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
How do I fix this?
No way to tell without seeing your page. To simplify things, you could try a CSS Rollover method rather than another JavaScript.
Pure CSS Button Rollover (Sprite).
http://alt-web.com/DEMOS/CSS-Button-Sprite.shtml
Pure CSS Disjointed Rollovers
http://alt-web.com/DEMOS/CSS-Disjointed-Rollover-1.shtml
Pure CSS Disjointed Menu Rollovers
http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Rollover buttons and rollover areas

I created a button on Fireworks that changes from blue to purple on rollover and when I imported it into Captivate 5 it works perfectly. However when I added a rollover area the button no longer changes color. I would love some ideas on how to make that work.
I tried placing the rollover area behind the button and it changes color but the rollover caption does not show up. I also tried not using a rollover area and instead changing the button properties to On Success: Show > Text Caption and that works ok except I don't want the slides to continue for there are still other buttons I would like the viewer to press before proceeding. I have a feeling there's some Advanced Actions that I could use but don't know how to set them up.
Please help me, thanks a bundle in advance.
Kat

You can get this to work by using the Event Handler widget: http://www.infosemantics.com.au/catalog/widgets/interactive/wdgt_event_handler_01
There's a post here where I describe how to us Event Handler widgets to have a rollover as well as a double click event and right click event all working off the same object on a Captivate slide: http://www.infosemantics.com.au/beat_cp_interactive_catch22
This isn't possible to do any other way. I tried every other way I could think of first.

How do you add a "back" and Next" capability to a Disjointed Rollover?

I am having trouble linking two behaviors because I don't understand the code very well. I've seen what I am trying to do at other artists' websites like this one: http://www.emilyberger.net/paintings.html#
I have a nice Disjointed Rollover to show art images. I also have made Mara Ribbers' Linked Slide.
But what I want is to have the two things work together. Done successfully, one would see the detail images off to the left, with the larger picture showing when the details are rolled over. Then one would also have the option of clicking the "Next" & "Back" link/button to advance these same larger images.
It is probably all done very elegantly with CSS, but I can't figure it out.
Can this be done in CS3?
Thanks much

You should look into using a Spry Data widget. http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSA671B0BD-047C-4752-BFAC-B6C0601F9791. html#WS7F0B5D16-1F52-455a-A82B-60B61CE58E15
I used a simple HTML page with a table to hold my dataset.
I'm not certain of how to implement the previous/next, but I think it can be done...
Here's a data widget I used on a site I put together for a friend: http://www.gravenimagedesign.net/nickerson/NickersonWork.html
Although I have put the thumbnails in scrolling div, you could just place them in a wider div.
Beth

Disjointed rollover contained to fixed spot

I'm trying to do a disjointed rollover, however after I have a grid of thumbnails I want my enlargemnt to be contained to a specific area. I this case it's the right saide bar. I found a good tutorial that got me this far, but can't seem to find out how to do the next step. I don't want the enlargemnt relative to thumbnai. I want it in fixed position.
Here is my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>

<script type="text/javascript" src="includes/jQueryGallery/gallery.extend.js"></script>
<script type="text/javascript" src="includes/jQueryGallery/jQueryGallery.js"></script>
<script type="text/javascript" src="includes/jQueryGallery/jQueryGallery21.js"></script>
<link href="includes/jQueryGallery/jQueryGallery21.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a>
    </div>
<div class="sidebar1">
    <ul class="nav">
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>
    <p> The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce your own unique look. If you require flyout menus, create your own using a Spry menu, a menu widget from Adobe's Exchange or a variety of other javascript or CSS solutions.</p>
    <p>If you would like the navigation along the top, simply move the ul.nav to the top of the page and recreate the styling.</p>
    </div>
<div class="content">
    <h1> </h1><div id="rollover">
<p>
<a href="#"><img src="file:///C|/GSLD Website/images/Civic/Civic Adjustments/a2mclobb_thumb.jpg" width="81" height="78" /> /><span><img src="file:///C|/GSLD Website/images/Civic/Civic Adjustments/bloomfieldexterior.jpg" width="768" height="532" /><br />
optional caption #1</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #2</span></a>
<a href="#"><img src="SmallIcons/image.png" alt="" /><span><img src="FullSize/image.jpg" alt=" " /><br />optional caption #3</span></a>
</p>
</div> </p>
    <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
    <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
    <h4>Internet Explorer Conditional Comments</h4>
    <p>These liquid layouts contain an Internet Explorer Conditional Comment (IECC) to correct two issues. </p>
    <ol>
      <li>Browsers are inconsistent in the way they round div sizes in percent-based layouts. If the browser must render a number like 144.5px or 564.5px, they have to round it to the nearest whole number. Safari and Opera round down, Internet Explorer rounds up and Firefox rounds one column up and one down filling the container completely. These rounding issues can cause inconsistencies in some layouts. In this IECC there is a 1px negative margin to fix IE. You may move it to any of the columns (and on either the left or right) to suit your layout needs.</li>
      <li>The zoom property was added to the anchor within the navigation list since, in some cases, extra white space will be rendered in IE6 and IE7. Zoom gives IE its proprietary hasLayout property to fix this issue.</li>
    </ol>
    
</div>
<div class="sidebar2">
    <h4>Backgrounds</h4>
    <p>By nature, the background color on any div will only show for the length of the content. If you'd like a dividing line instead of a color, place a border on the side of the .content div (but only if it will always contain more content).</p>
    </div>
<div class="footer">
    <p>This .footer contains the declaration position:relative; to give Internet Explorer 6 hasLayout for the .footer and cause it to clear correctly. If you're not required to support IE6, you may remove it.</p>
    </div>
</div>
</body>
</html>

#rollover a {
border:none;
text-decoration:none;
padding: 0 0.5em 0 0.5em; /**space between icons**/
position: relative; /**remove position rule if full size images will share the same display area. **/
Your CSS below expresses where on the page to display the disjointed image. You'll need to tweak left and top values to get it exactly where you want it.
#rollover a span {
    visibility: hidden;
    background-color: #FFF;
    display: block;
   position: absolute;
    /**adjust positioning of full size images in px or %**/
    left: 250px;
    top: -140px;
For better answers, give us a link to your test page.
Nancy O.

Disjointed rollover problem

Hi everyone.. I am trying to create a slideshow using
disjointed rollovers. I have several (16 so far) thumbnail images
and want to display fullsize images in one common area. The
problem: as I add more images, the earlier ones become blocked from
view. It appears to have something in front of it of the same size
and shape as the images I'm using, and the same color as the
background. The use of layers doesn't seem to make a difference.
The more images I add, the more (earlier ones) become blocked.
Anyone? Thanks in advance.

Here is the URL: It's not ready to be live, so may be slow.
Thanks for looking.
http://www.so-fsbo.com/ss2.htm
As for my method: I am open to suggestions for a better way
to accomplish what is seen at link, above.
But here is what I did. The exact method is (copied from
Fireworks F1):
To attach a disjoint rollover to a selected image:
Choose Edit > Insert > Slice to attach a slice to the
trigger image.
Create a new frame by clicking the New/Duplicate Frame button
in the Frames panel.
Place a second image, to be used as the target, in the new
frame in the desired location on the canvas. You can place the
image anywhere other than beneath the slice you created in step 1.
Select the image, and then choose Edit > Insert > Slice
to attach a slice to the image.
Select Frame 1 in the Frames panel to return to the frame
that has the original image.
Select the slice, hotspot, or button that covers the trigger
area (the original image) and place the pointer over the behavior
handle. The pointer changes into a hand.
Drag the behavior handle for the trigger slice to the target
slice you created in step 4.
The behavior line extends from the center of the trigger to
the upper left corner of the target slice, and the Swap Image
dialog box opens.
From the Swap Image From pop-up menu, select the frame you
created in step 2, and click OK.
Click the Preview tab to view and test the disjoint rollover.

Disjointed rollover

I‘m trying to apply a “disjointed rollover” to my iweb site. My understanding of disjointed rollovers is that the visual-feedback does not correspond with the location of the cursor. I want symbols located at the side of my site to trigger text to appear in the center of my site (not over the rollover button). I have figured out how to create regular rollover but that doesn’t really help me. Is their any way to do this with iweb-08?

Have you Googled for "disjointed rollovers" and looked at some of the javascript solution? You could use image files of the text for the rollover. This search result has some possibilities: http://www.google.com/search?hl=en&client=safari&rls=en&q=javascriptdisjointed+rollover+for+text&aq=0&aqi=m1&aql=&oq=javascriptdisjointed+rollover+f ortext&gs_rfai=
The example on this page, http://www.daxassist.com/js/disjointedrollovers.cfm, with images could be converted to text if you made image files of the text you wanted to use. Sort of like item #4 on this demo page: Mouse Rollover
Message was edited by: Old Toad

Problems with Flash CC user interface. Mainly I can't seem to click certain buttons and input fields on various modal windows. (eg. Scale and Rotate, Sound Properties,

Hi there,
I'm wondering if anyone else is experiencing issues like this. I'm basically finding that a bunch of different buttons, fields, and tabs do not respond to my clicks. This seems to be spread out throughout the application.
I've had to work around most of this by using the tab and arrow keys to navigate around modal buttons and fields... but it is a bit of a pain.
There are some parts of the interface that can't be accessed via tabs and arrow keys... for example the ActionScript Tab on the Sound Properties window... there's no way to get to that... and clicking the tab itself does nothing, although I can see that the rollover state of the tab is activated.
I've ended up having to run Flash CS6 in order to set the export classes of sound files and that's a bigger pain.
Similar UI issues exist with other things... for example the color picker (eye dropper) seems to pick colors near, but not directly under itself.
I'll be honest... I'm running on Windows 7... via boot camp... on a Mac Book Pro with retina display... so the issues could stem from this combination. However... Flash CS6 does not have any of these issues... so I can only think that it is a Flash CC issue.
I appreciate any input you can provide. ( Although the obvious "run it on OSX instead" or "just use CS6" aren't the kinds of answers I'm looking for. I have my reasons for the setup. )
Thanks.
Cheerfully,
- JR

Thank you for the suggestion. I've just done the uninstall, clean, re-install process.
No luck.
Even the first-run modal that comes up to choose Sync Settings has the same problem. All three buttons will go to a rollover state if I mouse over them... however, none of them are clickable. The only clickable item is the OS window close button. If I use the TAB key to move from button to button it moves the yellow button selector accordingly. If I press the ENTER key it responds correctly. For some reason clicking is not working on these parts of the Flash CC UI.
*Note: This does not happen with all of the Flash CC UI elements... only some key ones (Save As - Confirm Overwrite, Symbol Properties and Swap Symbol dialog boxes also do not work with clicks, only with the keyboard navigation). Really a pain in the posterior.
Again, I'm wondering if this is an issue particular to my hardware/os combination but I have had no luck finding answers online.
Any other possible solutions out there?

Submit Button and New Pages

Hello all~
The questions i have may be too complicated for this forum,
but as I'm struggling desperately, I thought I'd give it a try.
I bought a premade site almost a year ago, and I managed to
update it myself, but I've never been able to get the submit button
on the contact form to work. The reset button works - without any
help from me, but nothing happens when the submit button is
clicked. I'm trying to rekindle my business and so am in need to
update the site, but I can't seem to figure these things out.
Second problem, I need to rearrange some of the pages and
also add new ones, but I tried adding a new page, and can't figure
out how to find the number of the pages that I add. The
actionscript looks like this:
on (rollOver) {
if (_root.link != 7)
gotoAndPlay(2);
on (releaseOutside, rollOut) {
if (_root.link != 7)
gotoAndPlay(11);
on (release) {
if (_root.link<>7) {
_root.robot.play();
_parent["b"+_root.link].play();
_root.link = 7;
_root.play();
How do I know what the root.link is for any given movie clip?
If any of that makes sense to anyone, please email me or
reply. I am frustrated beyond belief!!
L. Monique

the movieclips are name b1, b2,... etc and, if your buttons
are movieclips, they are on the timeline that contains your
movieclip buttons and, if your buttons are true buttons, they are
on the parent timeline of the timeline that contains your
buttons.

FW8 Can't Seem To Create Disjoint Rollover Effect

Hello,
I used previous versions of FW to create "disjoint rollover"
effects without any problem. This time I'm using FW8 to create the
same effect but so far it has proved unsuccessful, I have even
tried the step by step instruction of "help" menu with no success.
Can somebody pease help me with how to achieve this effect
with FW8 if it is possible.
Many thanks in advance!

More than half of the trouble posts on the DW forum are the
result of using
a graphics editor to write HTML. It's a grand idea that
utterly fails.
Such HTML is rigid, and fragile. You cannot avoid HTML if you
are going to
be working on the web, no matter what the marketing hype
says.
Harsh? Perhaps. True and well intentioned? Yes.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"WollombiWombat" <[email protected]> wrote
in message
news:eo4c1j$kmn$[email protected]..
> Murray: I think you are being a little harsh here for a
newbie. If the
> doco
> says it works then it bloody well should!
>
> Linda: A voice of moderation and consideration as
always. No wonder I like
> your books and contributions at places like PVII and did
I see you at
> Community
> MX ?
>
> Cobbyfred: Can I suggest that you take up Murray's
veiled suggestion and
> attempt to build the disjointed rollover using DW8 ?
>
> Cheers all.
>

Can I create a disjointed rollover for videos?

I am working on a webpage that I created a disjointed rollover for thumbnails that I want individuals to see a larger image of.
While I was working, I wondered if I could create a disjointed rollover for a video? I would use thumbnails for the viewer to rollover and when they do rollover I would want a swf video to play. Is this possible? Any suggestions on how to go about it?
Thank You.

I would not let anyone else determine whether your choice is wrong or right without knowing all of the details. Let's consider that you've made the considerations already and for anything else you're simply asking to see if it's possible or not and you're looking for suggestions on how to go about it. I mean, that is what you asked in your original post isn't it? I re-read your original post and I didn't see anywhere in there where you were asking others whether they thought this was the right choice or not...
Perhaps you want to save the mouseclick so the user can click the thumbnail and view the entire video while mouseover plays a small preview in disjointed? The other poster probably didn't think too much about it though.
To directly answer your question: yes, it's possible to mouseover a thumbnail to play a video. Depending on the intended use a method like this is not only acceptable, it's expected. Many highly-regarded websites use this technique including http://videocopilot.net and http://istockphoto.com to name a few. A method like this allows for faster browsing and preview of videos instead of requiring a user to not only mouseover the thumbnail, but then continue to click once to display preview and then click once again to close the lightbox. That's a cumbersome method for the user if they want to preview many videos.
View source on the websites mentioned in this post to see how it's accomplished.

Disjointed Rollover Link

Hi,
I'm not sure if this is even remotely possible using solely HTML and CSS.
The idea is that I have a disjointed Rollover with the OnMouseOut for Image Restore deleted.
Then in the rollover there will be 2 different links to click.
So in essence
Mouseover Object 1 > Rollover 1 Pops up with 2 Different links
MouseOut Object 1 > Rollover 1 stays
Rollover 1 Link gets clicked and takes user to another page.
There's a good chance I could of described this better...
Anyway, Thanks in advance!

Thanks -
This is the code you posted, but it shows no code to accomplish your rollover
(you can paste any future code here in the Forum)
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="1366" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/index_01.png" width="1366" height="63" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_02.png" width="61" height="705" alt=""></td>
<td>
<img src="images/index.png" width="556" height="646" alt=""></td>
<td rowspan="2">
<img src="images/index_04.png" width="134" height="705" alt=""></td>
<td><a href="../Slide/Slide.html"><img src="images/index_05.png" width="556" height="646" alt=""></a></td>
<td rowspan="2">
<img src="images/index_06.png" width="59" height="705" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_07.png" width="556" height="59" alt=""></td>
<td>
<img src="images/index_08.png" width="556" height="59" alt=""></td>
</tr>
</table>

</body>
</html>
See this link for what is needed for rollover
http://spot.pcc.edu/~gkerr/cas211d/coursefiles/css_examples/rollovers/css_disjointed_rollo ver_example.html
Since you want clickable links, you might try show/hide behavior

Disjointed Rollover help

Hi All!
I'm trying to create a simple disjointed rollover. This is for a photography page; I want thumbnails near the bottom of the page and when someone rolls over the image I want that bigger image to appear in the middle of the screen. How do I do this?
Thanks in advance!!!

Do I make a new style sheet or paste code on my existing style sheet?
You can paste the CSS code into your existing style sheet.
To publish your site so that it can be viewed publicly, you need to procure a web server space from a commercial hosting company like Lunarpages, Dreamhost, Hostgator, etc...
Go to Site > Manage Site > Advanced > Remote Server Info and enter the log-in details your host gave you to connect to your web server space: FTP, user name, password, folder...
Put / upload your page and dependant files to your remote server.
See creating your first web site in DW CS5 -
http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Disjointed rollover on an apDiv (CS4)

Hi There, I'm working on a disjointed rollover using css. I want to apply this on an apDiv but somehow it's not working. I've tried it on a normal div and i's working fine. I am by no means a code junkie so I can use all the help I can get. I've put up a sample page for you to look at: http://bit.ly/uLQBM7. On the left side the code applied to an apDive on the right the same code applied to a normal div. Can someone please explain what I am missing or point me to another solution that gets the same results? Thanks in advance!

Here's my code:
#rollover {
margin-left: 702px;
margin-top: 60px;
height: 92px;
width: 194px;
z-index: 2;
display: none;
#rollover a {
border:none;
text-decoration:none;
position: relative;
margin-bottom: 100px;
#rollover a span {
visibility:hidden;
display:none;
position: absolute;
/**adjust positioning of full size images in px or %**/
left: -300px;
top: 300px;
z-index: 3;
#rollover a:hover span, #rollover a:active span, #rollover a:focus span {
visibility:visible;
z-index: 3;
<div id="apDiv1">
<a href="#"><img src="images/show.gif" alt="logo" name="rollover" id="rollover" /><span><img src="images/hide.png" alt=" panel" name="pen" id="pen" /></span></a></div>
Any ideas please?

"remote" or "disjointed" rollover

I've figure out a workaround for remote or disjointed rollovers but if anyone has a better way I'd love to hear it. I used the ToolTip widget, eliminated all but one Tooltip, then deleted the text from that box that was left, and replaced the image with my own which was much much larger. If you need to just change the fill and stroke on the text box to “none.” The tiny bullet or circle that denotes where to mouse over can be changed to a different color but I could not get it to work with no fill. That dot is part of another sub-rollover. This worked for a large image appearing but you still need the triggering element (the dot).
I also tried enlarging the dot to a large square and using the States Panel to replace the solid color with an image. That did not work. ADOBE!! CAN YOU HEAR ME??? Is there another solution to a “remote” or “disjointed” rollover?

I've figure out a workaround for remote or disjointed rollovers but if anyone has a better way I'd love to hear it. I used the ToolTip widget, eliminated all but one Tooltip, then deleted the text from that box that was left, and replaced the image with my own which was much much larger. If you need to just change the fill and stroke on the text box to “none.” The tiny bullet or circle that denotes where to mouse over can be changed to a different color but I could not get it to work with no fill. That dot is part of another sub-rollover. This worked for a large image appearing but you still need the triggering element (the dot).
I also tried enlarging the dot to a large square and using the States Panel to replace the solid color with an image. That did not work. ADOBE!! CAN YOU HEAR ME??? Is there another solution to a “remote” or “disjointed” rollover?

Button and 'disjointed' rollover

Similar Messages

Maybe you are looking for