Buttons that expand/reveal on hover?

Hey guys,
I was wondering if there is any way to create buttons that expand to their full size when the user rolls over their minimum size?
For example:
Demo 4 here: Animated Buttons with CSS3
or
the 'Friends' or 'Cheap Mobile Website' tabs to the right of this page: DesignEasy: Creating rollover buttons in Photoshop for Adobe Captivate project
My aim is to have ribbon-like tab 'nubbins' at the top of the screen that expand downwards to reveal an icon (like '?') that the user can click to navigate somewhere (i.e. '?' would take them to a help page or open a help popup). I'd like to be able to do this with just native Captivate (using 8), or if not combining it with javascript etc.
Any advice?
Thanks!

Hey guys, just to update this:
I am at the moment playing around with the following technique.
1. Create an image of the button in its 'unused' state, i.e. the minimum size it will ever be, and position it where you like the expanding button to be. We'll call this the 'button background image'.
2. Create a rollover image where a) the rollover area is completely transparent, b) the rollover area is positioned over the button background image, c) the image triggered by the rollover area is exactly the same, and positioned exactly the same, as the button background image.
3. Add an effect to the image triggered by the rollover area. It should be a motion path to move the image down slightly (or left/right slightly if your button is on the side rather than at the top of the slide).
4. Add an invisible button roughly the size of the rollover image (at its most extended size).
My reservations are:
- The technique seems a bit buggy, as not every time I preview in browser does it display correctly, but that might be to do with previewing it - perhaps a fully published version would work fine.
- I have a sneaking suspicion that it won't work on all browsers but I don't know what I'm founding that suspicion on!
- You can't have the nice 'motion out' effect that you can achieve when making this kind of button in html/javascript/etc. it just 'jumps' back to the original position rather than sliding back out. I have added an exit motion path to this button so that if the object times out it will do this, but it's a shame not to be able to have it when the user moves the mouse away from the button in general.
Any thoughts?

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 a button that highlights itself and another object

Hello all,
I have a specific function I am trying to apply to my InDesign document intended for exporting to an interactive PDF and SWF/html format.
The function I am trying to create is:
I have a picture of a typical WYSIWYG tool bar. I have created highlight buttons that sit on top of each icon in the picture. When the reader rolls over (with cursor) this picture of an icon I want it to highlight, and also a piece of text further down the page to highlight as well (which is a definition and explanation of the icon). So I want the rollover action of my first button to also trigger another action, which is to highlight a piece of text elsewhere on the page. I have managed to get it so that I hover over the first button (picture of icon), it highlights, and the text further down the page appears. But this isn’t quite what i want. I want the text to exist already, then highlight. Basically, I want to the two buttons to be linked. So that every time I hover over a portion of the picture with a created button, it will highlight, and a piece of exploratory text will also highlight simultaneously elsewhere on the page. A bit like an infograph. Surely this is possible?
Thanks in advance for your help.

Generally, animations like this with the goal of exporting a SWF are better be done in Adobe Flash.
In Indesign it sort of works, too. Only for export to SWF, you can assign the action "Go to status". For a text frame, you can assign different status, where the 1st status would be "normal" and the 2nd status would be "highlighted". Highlighted applies to the object "text frame", so you can assign a stroke or fill. Better than nothing.
Example: Dropbox - test_highlight.indd

Want to create a menu/list that expands with additional links when you rollover it

The hardest part about using the "help menu" is figuring out
what to search for.... I want to create a button on my website that
expands to additional options/links when you roll over it.... An
example would be on this Adobe website.... There is a bar across
the top that says solutions, products, etc. When you roll over it,
the link expands to additional options.... If someone can tell me
what to search on in the help menu, I can take it from there....
Thanks,
Nancy

Haaga wrote:
> The hardest part about using the "help menu" is figuring
out what to
> search for.... I want to create a button on my website
that expands
> to additional options/links when you roll over it.... An
example
> would be on this Adobe website.... There is a bar across
the top
> that says solutions, products, etc. When you roll over
it, the link
> expands to additional options.... If someone can tell me
what to
> search on in the help menu, I can take it from there....
http://www.google.com/search?hl=en&sa=X&oi=spell&resnum=0&ct=result&cd=1&q=css-based+drop+ down&spell=1
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
The perfect FAQ page:
http://www.TJKDesign.com/go/?9
CSS-P Templates:
http://www.TJKDesign.com/go/?1
CSS Tab Menu:
http://www.TJKDesign.com/go/?3

Button Rollover keeps shifting on hover - Firefox only

Hi there,
I have a shopping cart button rollover that keeps on shifting
a few pixels whenever you roll over it. Strangely, this only
happens in Firefox. The page can be
found here
The button is being called from a template .
located
here.
I also tried putting the button directly into the original
page, just to see if it was a problem with the template, and it
still shifted.
Any ideas?
* EDIT *
I think it was an extra <tr> tag floating in the table.
However, now I'm getting an error in IE although it renders fine.
Sigh.

Have you considered using "set text of layer" (could be "set
text of
container")?
"Jesse Feyereisen" <[email protected]> wrote
in message
news:gc0fue$73o$[email protected]..
> Im sure this is Dreamweaver 101 but I just cant seem to
find it. Im a
> graphic
> Designer new to Web so please bare with me. Here is what
I need to do"
>
> I would like to make rollover buttons that when you
hover over them with
> the
> mouse, not only does the button change (the rollover
part), but they also
> can
> hide/unhide a separate image that is near them. I've got
the rollover
> part
> down no problem, but the 2nd image thing is stumping me.
>
> Example:
> Image of a TV on the webpage that when you roll over the
"channel"
> buttons,
> they highlight AND the image on the TV screen changes to
show and example
> of
> that specific channel.
>
> Any help is greatly appreciated.
>
> Thanks, Jesse?
>

Expandable lists that expand and collapse with one click and edit in wysiwyg

I have a lot of text based lists on one page, so I threw them into content editor web parts so i can expand / minimize the lists. However, two clicks (one on the arrow and then one on "restore") is becoming really tiresome. How can I make expandable
lists that expand and collapse with one click? AND they are still editable from the wysiwyg browser editing tool?
I have already tried using Jquery to create expandable content, but the problem here is that the content can't be edited in the wysiwyg browser based editor - the expand or collapse button doesn't "work" when you are in the edit mode, so you can never
see the expandable content to edit. I can change the content in the code but it's no good if my non-coder co-workers can't also edit it.
I am in 2010.

I just found the answer myself here: blog (.) pathtosharepoint.com/2008/10/25/expandcollapse-buttons-for-your-web-parts/
Worked perfectly. Allows open and close of CEWP with one click, and you can still edit their content in the wysiwyg editor.

Is there a way to create a button that links to a website?

Is there a way to create a button that links to a website?
I was reading up that it's possible to this with menus, and tracks but can you do it with a button and how?
I am hoping to create a button that people viewing my discs on a computer can click on the link and their web browser will pop up and take them to a website.
Any help is appreciated.
Thanks.
-Fraky

dvd@ccess questions are being asked once a week on this forum, so I'll repeat why it's useless:
- Mac users have to enable the feature in the preferences of DVD Player in order to for the links to work.
- PC users have to install a small application on their PC, and they have to reboot the PC in order for the links to work.
- On top of this, it's still unreliable, and may not work on some computers.
It's a dog: Don't use it.

How to create a button that Copies subform data and paste it to a new page?

Hi , I'm want to create a button that when clicked copys all the data from the feilds of a subform off the previous page and paste it into current page.
I have used Steve's "Simple table.pdf example" to add a subform called DecorationDetail that has a button that adds an instance when clicked.
Contained in the decorationdetail subform are feilds named Quantity, Description,UnitPrice etc. and a delete instance button.
So when the first page is filled out, and a second page with blank duplicate feilds is added by a add page button. I want to be able to click a button
positioned at the end of the row of feilds, and it then copies the same subform data from the previous coresponding page and pastes it into the current page subform feilds.
Hope this make sense?. A step by step guide would be greatly appreciated!!!.

Hi,
Does this article provide you with some clues? http://www.perfectwebtutorials.com/2011/how-to-create-simple-contact-form-in-flash/
Thanks,
Preran

Mid 2011 Macbook Air - Yosemite keyboard and trackpad stopped working, the only button that worked was the power button, only one USB port works.

I have a Mid 2011 Macbook Air.
Upgraded to Yosemite last week.
Three days ago I was using my Macbook Air for the first time since upgrading to Yosemite. I had been using my Macbook Air for approximately 30 minutes, I was using safari and the keyboard and trackpad stopped working (would not respond). The only button that worked was the power button.
I rebooted and they were still not working. I plugged in a USB mouse and external USB keyboard, only one USB port would work (the Left USB port if looking at the screen) so I had to swap between keyboard and mouse.
After logging in there is a bluetooth icon at the top of the screen with a sawtooth line through it. Bluetooth is unavailable and the bluetooth icon is missing from the system preferences menu.
If I run a hardware test by holding D (on USB keyboard) at startup it says that no problems are found and at the conclusion of the test the keyboard and trackpad start working again. When I log on the bluetooth is working again.
I shut down the Macbook Air and when I started it again the keyboard and trackpad and right side USB ports were all not working again. I logged in using the USB keyboard and mouse and the bluetooth not available sawtooth icon had returned.
I ran the hardware test again and at the conclusion of the test the trackpad and keyboard started working again.
I have tried deleting com.apple.Bluetooth.plist and com.apple.Bluetooth.plist.lockfile from /Library/Preferences/ and tried resetting SMC and Power Functions but this did not fix the issue. The only thing that seems to work is running a hardware test - obviously I don't want to do this every time I use the computer.
I do not believe any hardware is faulty/damaged - I think it has something to do with bluetooth/Yosemite.
I do not have the Macbook with me at the moment, if you have suggestions that I can try or additional checks/info you require please let me know and I can get back to you.
Thanks,
John

Hi!
I have exactly the same problem, and I can't find any solution.
I can't even track down the root of the problem: the Bluetooth/Wifi module? The trackpad? The keyboard/top case? The logicboard?
I've tried all the usual: SMC/PRAM reset, clean install, kext cache clearing.
Any suggestion is greatly appreciated!

How do I get iTunes to recognize a new device if I accidentally did not hit new device when I first hooked it up? I hit the button that said I wanted to back it up from my old info

How do I get iTunes to recognize a new device if I accidentally did not hit new device when I first hooked it up? I hit the button that said I wanted to back it up from my old phone. The new phone is my husbands and I don't want to back up my phone info on it. I re connected it hoping it would prompt me with the option again and it doesn't , it just shows up as a back up to my phone. How can I get it to give me that option in the beginning again

First of all, I think the first time you sync an iPod that's formatted for Windows on a Mac, the sync process reformats it for Mac. You can check what it is now by looking for the iPod with Disk Utility. If it's Mac OS Extended, it's formatted for Mac already.
Also, there is no current iPod updater app these days. iTunes handles it through the Restore button. If you are not able to use the latest iTunes because of your Mac, I can understand. The latest version of iTunes should run with 10.3.9 or later, if the hardware can handle it.
You said the battery was low so let it recharge for a while.
You should also reset the iPod. It's part of the 5Rs, which you should go through as the starting point for iPod trouble-shooting.
http://www.apple.com/support/ipod/five_rs/wheel/

Ipad air 2 there's no silent mode like the other iPads ?? the button that does it does not exist on the iPad air 2 what does replace it??

ipad air 2 there's no silent mode like the other iPads ?? the button that does it does not exist on the iPad air 2 what does replace it??

hi the older button could be set to either "force portrait mode" or "silent mode". now you can do both in the iOS control center (swipe from the bottom of the screen), so the need for a button isn't needed anymore.

How to create a dropdown menu with sub buttons that link back to the labels on click.

im trying to create a dropdown menu buttons that when you rollover to the top central button the button it opens up like a drop down menu would containg two other subsectional buttons. This makes the sub sectional buttons seperate from the main stage making it difficult to simply give them a on click, sym.play("label") function.
the buttons work like this in symbols or sections stage/panel/homebutton inside home button is group dev containg another group dev containg the button which I need to link back to a "label" in the /panel/ symbol or section. Thank you very much.

pdp_1 wrote:
Hi!
I would like to create a DVD menu that offers two languages. So the first page gives two options: Language 1 and Language 2. Then depending on which language you choose, you go to a menu that proposes different videos and a photo slideshow.
Regardless on which language button you click on initially, you get the same content but in different languages.
I've been looking at Premiere's templates, which I can certainly customize, but I really don't see how to create the double menu. Does anybody have an idea?
Put the video with the first language on the timeline followed by the video with the second language. Use chapter markers so you can have each video as a chapter in the menu.
I use Premiere Pro, so I can't give more specific directions. Perhaps somebody like ATR will chime in.
Also, I have another question: can I put videos from different projects in the same DVD with Premiere or must all of the videos that go into the DVD be in the same project?
Thank you very much!!!
pdp1
They must be in the same project.

How to create text buttons that link to video?

I've finally gotten around to trying DVD SP, and even though I read the whole manual, it's not at all clear if, or how, you can create text buttons that link to the video you want to play, without displaying a clip of that video in the button itself.
I have no problem creating a text button, but I can't change the font, and editing is counter-intuitive, unlike iDVD. I'd use iDVD, but it doesn't accept .m2v files, and it seems to think that my 6 videos of about 43 minutes each are too large for a DVD+DL disc, so it won't let me burn it or save it as a disc image.
Does anyone have a way out of this conundrum, or am I SOL?
Mulder

It really isn't that hard!
As Drew said, go into your menu and click and drag to create a button rectangle. With the button highlighted, look in the property inspector at the bottom and type in the text that you want to use. Ensure that you 'include in button highlight' and then set the colour choice for selected and activated.
What you get is a simple line of text which illuminates when you roll over it, and changes colour when you click on it.
Once that is done, click on the button area again and set the target to go to the piece of video that you want to have play back.
You should also set the menu call and end jump on that track to make sure your viewer can get back to the menu.
Once that is done the menu will show as a simple piece of text (more buttons means more bits of text, and the first button will be highlighted by default) and no video will play until the button is activated.
DVDSP is definitely a steeper learning curve than iDVD but for very good reasons. You get far greater control and access to far more advanced features in DVDSP. This means that some things will seem harder, whereas in fact they are just different and the process for achieving the result you want is different. Much of what you want to know is in the manual and also in the tutorials which came with the app. Failing that there are several good online spaces where you can find a lot more information... not least of which is right here, of course!

How do you create the 'cream pop-up info text boxes' that appear when you hover mouse over?

Hi people,
I really need to know how you create the 'cream pop-up info text boxes' that appear when you hover your mouse over an object on a webpage (and often in any program e.g. Photoshop) for more than a second. I need to know because the logo on my website is the navigation tool used to return to the homepage. It is always found in the top left so the user can always click it to return.
The only problem is im the only one who knows that when you click my logo, you return to the homepage. I need one of these 'cream info boxes' (forgive my lack of knowledge) to appear so the user will figure it out.
Thanks for taking the time to read my question...

Using your code it should look like this where title attribute is in red:
<div id="apDiv2"><a href="index.html"><img src="divs_dw/jtgd_logo_trans.png" alt="jtgd_logo" title="your description goes here" width="176" height="163" /></a></div>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

How to create a radio button that changes colors

I'm using Acrobat X and ID CS5 on Mac OS X.
A couple of years ago someone on the forums explained to me how to create a button that changes color with each click. You can view a sample PDF at https://dl.dropboxusercontent.com/u/52882455/colorcycle.pdf. They gave me the document JS and showed me how to set the properties of the button. I've integrated the button into a particular series of PDF forms and it's worked out very well.
Now I would like to do the same thing, but using a circle instead of a square. Can anyone tell me the best way to do this? Can I somehow set a radio button to cycle through colors in the same way? I design my forms initially in ID CS5 and then activate and format the fields in Acrobat X. I've tried using circles instead of squares in my ID document, but when I export to an interactive PDF, they're converted to squares.
Any ideas?

I understand how to make buttons cycle through colors-- the problem I'm having is that I'm trying to figure out how to make a circular button cycle through colors. When I export my ID document to PDF, my round button maintains it's original appearance, but when I click on it to cycle through the colors, it behaves like a square (see new PDF at https://dl.dropboxusercontent.com/u/52882455/colorcycle2.pdf).
If I use a radio button, I can get it to cycle through colors, but I don't want it to have a black dot in the middle. Is there a way to format the radio button to not show the black dot when clicked?

Buttons that expand/reveal on hover?

Similar Messages

Maybe you are looking for