CSS disjointed rollovers with animation?

im redesigning my site and for some reason my rollovers arent working. the top two thumbs are active.. nike and coke:
http://www.toddheymandirector.com/SPOTS/index_2010.html
would it make sense to try this in CSS? and can CSS do disjointed rollovers with animated gifs?

They work for me, but you are not doing yourself a favor by letting the QT file auto-play. It will block UI interavctivity in many cases. As for you otehr question - an image is an image. CSS doesn't care whether the format in itself is animated or static.
Mylenium

Similar Messages

Disjointed Rollovers with .SWF files

Is it possible for me to create a disjointed rollover so that
when I mouse over one image it will make another image switch to a
.SWF file? Or do I have to convert the .swf file into an animated
.GIF file?
How can I make an image switch to something else when I mouse
over a totally different image?

> Is it possible for me to create a disjointed rollover so
that when I mouse
> over
> one image it will make another image switch to a .SWF
file?
Not in any easy way that I can think of.
> How can I make an image switch to something else when I
mouse over a
> totally
> different image?
Behaviors: swap image
-Darrel

Disjointed Rollovers with different results

Hi,
In Dreamweaver CS4 I'm trying to do a disjointed rollover that swaps one image on mouseover and restores it on mouseout (a simple navigation bar rollover) and swaps a second image onclick and doesn't restore the original (an image in the main content area). Right now both images restore on mouseout:
http://inkllusionist.com/test
I realize I may be going about this the wrong way... any advice? Should I try to do this with something other than the javascript behaviors?
...Later...
Well, after more searching I found the answer in a very nice video on youtube.
http://www.youtube.com/watch?v=hN_MhdmtCsM&feature=colike
It explains that you set the simple rollover using the behavior "Set Nav Bar Image" and you do the main image swap using the behavior Swap Image and set that to <A> onClick and uncheck Restore images on Mouseout. It's so simple when ypu know how. lol.

> Is it possible for me to create a disjointed rollover so
that when I mouse
> over
> one image it will make another image switch to a .SWF
file?
Not in any easy way that I can think of.
> How can I make an image switch to something else when I
mouse over a
> totally
> different image?
Behaviors: swap image
-Darrel

Disjointed Rollovers with show / hide layers

Creating a series of thumnails on a page which, when clicked
on, will bring up full size image in one spot and relevant text in
another. I'm using Show / Hide Layers to do this. I've got it all
working fine except stumbling on one thing. Probably obvious.
The question I have is how to make the currently showing
layers go away when the user clicks on another thumbnail. If I was
using onMouseover and onMouseout then that would be simple. But I
can't figure out how to automatically make the layers currently
showing go back to being hidden when another thumbnail is clicked.
What I get instead is the new layers appearing on top of the old
ones and making a mess.
Probably an obvious solution, but my brain is not getting it
at the moment. Suggestions?
Thanks...
-Jesse

Don't use the show/hide at all. Use SetText of Layer to write
the required
content into a single layer.
Or - if you don't quite get that, just use PVII's AutoLayer
extension which
will show one and hide all the rest automatically.
http://www.projectseven.com/
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
==================
"JesseLY" <[email protected]> wrote in
message
news:f61nbm$9sn$[email protected]..
> Creating a series of thumnails on a page which, when
clicked on, will
> bring up
> full size image in one spot and relevant text in
another. I'm using Show /
> Hide
> Layers to do this. I've got it all working fine except
stumbling on one
> thing.
> Probably obvious.
>
> The question I have is how to make the currently showing
layers go away
> when
> the user clicks on another thumbnail. If I was using
onMouseover and
> onMouseout
> then that would be simple. But I can't figure out how to
automatically
> make the
> layers currently showing go back to being hidden when
another thumbnail is
> clicked. What I get instead is the new layers appearing
on top of the old
> ones
> and making a mess.
>
> Probably an obvious solution, but my brain is not
getting it at the
> moment.
> Suggestions?
>
> Thanks...
>
> -Jesse
>
>
>

Default image in CSS disjointed rollover

I have 5 pics that come up as CSS disjointed rollovers with 5 links. How can I make the first one the default, that shows up when the page loads, before the user hovers over one of the links? I tried placing the first pic on the page, just like you would any graphic, but I can't get the rollover pics to line up with it in Safari AND FF. When I get it aligned in one browser, it's slightly off in the other one. I've tried positioning by pixels, percentage and ems with no luck. Shouldn't there be something in the CSS that makes one of the pics the default? Thanks.
/** rollover change color **/
#rollover {
    padding: 0 1px 1px;
    margin-left: 0;
    font: bold 10px Verdana, sans-serif;
    text-align: center;
#rollover li {
    list-style: none;
    margin: 0;
    display: inline;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align: left;
#rollover li a {
    text-decoration: none;
    background-color: #FFFFFF;
#rollover li a:link {
    color: #448;
    text-align: center;
#rollover li a:visited {
    color: #667;
    text-align: center;
#rollover li a:hover, #rollover li a:active, #rollover li a:focus{
    color: #FFF;
    visibility: visible;
    text-align: center;
    background-color: #000000;
/**disjointed image rules**/
#rollover li a span {
    visibility:hidden;
    display:block;
    position:absolute;
    left:27.8%; /**adjust image position in % or px as needed**/
    top:0%; /**adjust image position in % or px as needed**/
    text-align: center;/*color:#666;*/
#rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
visibility:visible;

Sorry to be such a pain, but a new problem presents. The nav boxes are cut off at the top in IE 7, or, rather, IE 8 in compatibility mode.
http://www.paulcbuff.com/pcb2009/rollemover.html
No significant errors when I validated the CSS and HTML, except for _height:200px, which I tried commenting out to no avail.
Thanks!
#Relative {position: relative; margin:0 auto 14px auto; min-height:200px; _height:200px /**for IE6 Only**/ }
/**menu**/
#navlist {
    padding: 0 1px 1px;
    margin-left:0;
    font-family: Verdana, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
#navlist li {
list-style: none;
margin: 0;
display: inline;}
#navlist li a {
    padding: 0.5em 0.5em 0.5em 0.75em;
    text-decoration: none;
    background-color: #ffcc33;
    border-width: 1px;
    border-style: solid;
    border-top-color: #000000;
    border-left-color: #AAB;
    color: #FFFFFF;
#navlist li a:link {
    color: #448;
    border: 1px solid #000000;
#navlist li a:visited {
    color: #ffcc33;
#navlist li a:hover, #navlist li a:active, #navlist li a:focus{
    /**border-color: #FF9900;**/
    color: #FFF;
    visibility: visible;
    background-color: #6633cc;
    border: 1px solid #000000;
/**Default Image container**/
#defaultImage {
visibility:visible;
display:block;
position:absolute;
left:110px; /**adjust position in pixels or % **/
top:50px; /**adjust position in pixel or %**/
/**disjointed image rules**/
#navlist li a span {
visibility:hidden;
display:block;
position:absolute;
left:110px; /**position same as default image layer above**/
top:50px; /**position same as default image layer above**/
/*color:#666;*/ }
#navlist li a:hover span, #navlist li a:active span, #navlist li a:focus span {
visibility:visible;}
a img {border:none}
/**end menu**/

CSS Disjointed Text Rollovers help?

Hi All
I am new to the site and have a question to ask,
I have been playing around with the demo created by Nancy O, for css disjointed text rollover. What i would like to find out is, once i have created the rollover and i hover over it, the text in the window is all active. is there a way to "de-activate that text? so once i have created it all, have the "read more" on my page, click on it and the rollover opens. i have say for example three paragraphs, but my cursor shows that the whole window is active. i want to change that so that there might only be a little image to say close and that the cursor goes back to normal within that window.
It sounds simple if i think about it but cannot get it to work.
This is the demo i have been paying around with. http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml#
any help would be greatly appreciated.
please let me know if i need to give any more info.
Thank
Craig S

Instead of CSS disjointed rollovers, sounds like you need show/hide layers
http://alt-web.com/DEMOS/Show-Hide-Layers.html
Or perhaps an accordion panel like this extension from Project Seven
http://www.projectseven.com/products/tools/accordion/index.htm
Nancy O.

Use menu rollover with disjointed Rollovers

I am using a menu with disjointed rollovers but I want to know how I can have rollover images on the menu as well without using the restore image function. I want to have a rollover swap image on the menu item and when it is clicked on the main image changes and stays changed until another menu item is clicked. I can do this but the menu rollover image stays "on" even when the mouse is not over it.

i finally figured it out. i opened the html file in dreamweaver and in the behaviors panel, change the tag to "MouseClick" swap image.

Caption in disjointed rollovers

Using Dreamweaver CS3 (WinXP), is there a simple way to add captions to disjointed rollovers?
My aim is to click on a thumbnail, and when the image is projected on the poster, I want a caption appearing underneath.
Can you please help me with this
Thanks

Without a link to see what you have so far, it's hard to make recommendations. Not too sure how you're creating your disjointed rollovers (scripts or CSS). Below are some links that might help.
Pure CSS Disjointed Rollover - captions in span tags
http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
4Level Lightbox Extension for DW - captions below images
http://www.fourlevel.com/dreamweaver/extensions/lightbox/index.htm
Disjointed Rollovers in CS3 using Image Swap Behavior
http://www.communitymx.com/content/article.cfm?cid=E11E8
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

DW CS3/GoLive Disjointed rollovers

I have a table with several columns of text--a list of names of artists. I want users to be able to move their mouse over the names and small rollovers appear on another part of the webpage--disjointed rollovers.
http://www.printworkschicago.com/artists/artists.htm
I created my site in GoLive years ago, and I'm updating this particular page in DW CS3 for the first time. Now I understand GoLive didn't write proper JavaScript code, and the disjointed rollovers there now aren't the way DW CS3 wants them to be coded. (GoLive called them "remote rollovers")
My prob is this: when I try to make a simple change to the rollover--such as, add a name to the list of artists, and I use the Behaviours panel, use the swap image command, etc., all the other JavaScript effects on the rest of the page go kablooey.
Someone told me that I'm going to have to recreate my page over from scratch to rid the code of bad JavaScript codes. Is this true? Should I just go back to GoLive for the one page--for now--until I can recreate the page from scratch?
Thanks in advance.

salmdesign wrote:
I have a table with several columns of text--a list of names of artists. I want users to be able to move their mouse over the names and small rollovers appear on another part of the webpage--disjointed rollovers.
http://www.printworkschicago.com/artists/artists.htm
I created my site in GoLive years ago, and I'm updating this particular page in DW CS3 for the first time. Now I understand GoLive didn't write proper JavaScript code, and the disjointed rollovers there now aren't the way DW CS3 wants them to be coded. (GoLive called them "remote rollovers")
My prob is this: when I try to make a simple change to the rollover--such as, add a name to the list of artists, and I use the Behaviours panel, use the swap image command, etc., all the other JavaScript effects on the rest of the page go kablooey.
Someone told me that I'm going to have to recreate my page over from scratch to rid the code of bad JavaScript codes. Is this true? Should I just go back to GoLive for the one page--for now--until I can recreate the page from scratch?
Thanks in advance.
The answer really depends on the code on the page. Things don't just go 'kablooey' - it happens for a reason. Looking at the code will tell you what that reason is.
There is no a priori reason why adding a DW behavior to a page containing GL markup would cause a kabloeey event. Can you show us the page in its broken state?

Can disjointed rollovers be responsive?

Hi All:
My client wants a tool develped for his website that will allow customers to develp their own widget. The website is currently built to be responsive (i.e. elastic to adjust to whatever viewport size a customer might visit the site with whether a desktop or a mobile device). My first question to this group is can disjointed rollovers created with Fireworks be responsive? Thanks.
Bob Green
www.bobgreen.com
W7 Home Premium, PC, FW CS5.

Thank you for the help. I think I may be confused by the addition/need for linked text in the target image.
I know I should code things in Dreamweaver, but I do not know how to add the text to each target image. You see, I have a navigation bar with simple icons. Above this bar, I have one slice that is to contain sub-navigation links.
For example, I have a slideshow icon. When the user rolls over this icon, I want the slice above to display with listed text that is linked to the appropriate slideshow page.
Is there a way to do this? I know I have seen it is some sites, can't find them now though.
Any advice?

Problem with animated .gif

I have a problem with animated gifs. So if I set a animated gif as background and a button is over it as in the example below, then everytime the animation goes on the button disappears until I go over it with the mouse. So what can I do to solve this?
import java.awt.Color;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
public class FrameBackImage {
          public static void main(String args []){
               final JFrame frame = new JFrame("Frame");
               frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
               frame.setSize(400, 400);
               frame.setResizable(false);
               frame.setLayout(null);
               java.net.URL imageURL = ImageApp.class.getResource("animatedw.gif");
               ImageIcon imageIcon = new ImageIcon(imageURL);
             final JLabel label = new JLabel(imageIcon);
             label.setBounds(0,0 , 400, 400);
             frame.getLayeredPane().add(label);
             JButton button = new JButton ("Exit");
             button.setBounds(200, 129, 60, 60);
             button.setBackground(Color.black);
             button.setForeground(Color.white);
             frame.add(button);
             button.addActionListener(
             new ActionListener(){
                    public void actionPerformed(ActionEvent arg0) {
                         System.exit(0);
             frame.validate();
              frame.setVisible(true);
}

In the future, Swing related questions should be posted in the Swing forum.
Your usage of the getLayeredPane() method is something I've never seen before, so I don't know if thats the problem or not.
How to display a "background image" is asked all the time in the Swing forum. So to familiarize yourself with the forum you can try searching the Swing forum. Using the keywords I highlighted would be a good place to start.

Help with animated gif background once opened in Photoshop c33 extended

I often work with animated Gif's and a
adding doggies etc to the top layer.
I am having a problem with animated Gif with (existing transparent) background when saving from the web and opening in Photoshop cs3 extended it is changing the background to White automatically ? ( which is not what I want) I would like to know how to keep in the same format with the tranparent or even change to black as that is the background on my website.....do not know why it is converting it to white in photoshop or how to change....Thank you advance!

Thank you so much....after many hours playing with ....went right too and worked perfect!! Thank you !!

Rollovers with Pop up Menu

The last time I tried to do rollovers with a pop up menu in
Dreamweaver 8. It wouldn't work. So I'm searching for another way
to do it.
I created navigation using Fireworks - follow link below to
example. But when I mouse over the rollover that has a pop up menu
attached to it (First link on the left) the rollover images
disappear. Also the drop down menu tends to hang down longer than I
would like.
Can my problems be fixed? Is Fireworks the right tool for
this task?
I had down loaded a trial of the latest version of
Dreamweaver a few months ago and it seemed that this feature had
been deprecated, but there was some sort of plug-in. I'm far from a
casual user, but it was beyond me for the weekend I tried to use
it. Also, this is a bad time for me to invest in new software or
upgrades.
Any assistance would be greatly appreciated.
Example of rollover and
pop up menu problem

Don't use Fireworks to make HTML,
especially interactive HTML. Fireworks is a great tool for
making Web graphics, but it is
NOT
good for making HTML. Don't go there. You won't be happy.
Read this:
The
Sordid Tale of mm_menu and fw_menu.js and then save yourself
loads of frustration and go buy yourself a professional menu.
What's your billing rate? At $20/hr a $100 professional menu that
works, cross-browser, beautifully, is going to save you more
than 5 hours of hassle trying to get this stuff in Fireworks to
halfway...kinda...function...almost.
I don't use these kind of menus, but I've seen this question
asked often enough to know that one recommendation is the code from
Project
7.

FF5 error parsing CSS font-face with url inline base64 data

Firefox 5 refuses to parse CSS @font-face with url inline base64 data.
I use the declaration:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,[base64data]);
</style>
then used this way:
<div style="font-family:'MyFont'; font-size:12.0pt">Test text</div>
But Firefox is not using the font and in the error console, there is always the message:
''Error parsing the "src" value. Skipped to next declaration.''
(more or less, I actually have this message in Czech)
Tried with different mime types (font/ttf,font/otf,font/opentype,application/x-font-ttf etc.), with or without charset specification, with or without quoting the font family name, with different specifications:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url(data:font/truetype;charset=utf-8;base64,[base64data]) format(truetype);
</style>
(tried also with opentype format, etc.)
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url('myfont-webfont.eot?');
src: local('☺'), url(data:font/truetype;charset=utf-8;base64,[base64data]);
</style>
If I provide the font path:
<style type="text/css">
@font-face {
font-family: 'MyFont';
src: url('Arial.ttf');
</style>
(the font actually is Arial, for testing), it works (but I need to embed the font in the HTML for specific reason, so having the font externally is not the option).

Finally I got it work! Thanks, cor-el, you pointed me the right way to solve this problem.
There was problem with the encoding too (there was part of the font missing at the end, because of the bug in the program - I forgot to flush the buffered output stream), after then I was able to download the same copy of the TTF. - I didn't know about the possibility to put the entire url data to the location bar and try to download it, thanks cor-el.
But it still didn't solve the problem ... the problem was, that the base64 stream was divided to multiple lines, like
data:font/truetype;charset=utf-8;base64,
AAEAAAAYAQAABACARFNJRwMaCRYAC8m8AAAXfEdERUaJ+Y1JAAr/JAAAAsJHUE9T
e1arnwALAegAAKwaR1NVQt5CYFEAC64EAAAbmEpTVEZtKmkGAAvJnAAAAB5MVFNI
RExjrAAAN8wAAA1dT1MvMhAyXXMAAAIIAAAAYFBDTFT9ez5DAAr+7AAAADZWRE1Y
After I removed the line breaks, it works now! (the line is quite long then, because the base64 string is about 1MB, but it works)
Strange that I do the same for images (jpeg, png) and there is no problem with base64 string divided to multiple lines.
But anyway, I'm fine with that.

How can I add 3ds Model into After Effects with animation and camera rotation?

Hi all!
I'm on my way to my final project of Multimedia Animation of my bachelor last year.
I have good knowledge of After Effects & 3ds Max.
I want to do a short movie with aliens being shot down.
So, my question is: How can I import my 3ds model with the animation(keyframes) into After Effects AND rotate the whole character and it's animation as I move the camera?
for example, having a alien being shot down at the same time I'm recording with the HD camera around, that means that I have to define planes and angles, the problem is that I'm not parenting the character correctly with the plane.

Element doesn't do pre-anaimted objects, so that would be the limiting factor. Of course it could still be handy for otehr scene elements. On that note, using AtomKraft and exporting the model as an Alembic file with animation might also be something to look into...
Mylenium

CSS disjointed rollovers with animation?

Similar Messages

Maybe you are looking for