3 Replies Latest reply on May 25, 2010 8:49 PM by pixlor

    Rollover Question

    sourceofdenial
    sourceofdenial May 24, 2010 11:39 AM

      I'm learning rollovers in order to make a new website about microscopic anatomy for a university.  I'm using this as an example/idea to figure out how rollovers function: http://forums.adobe.com/message/2227328#2227328

       

      What I would like to do is have a page where when I rollover each 'button' on the left side, it flashes a new center.  From there I can move the mouse over to that center image and execute rollovers within that space.  My problem is when I move the cursor from the button on the left, it snaps back to whatever the 'state 1' image is.

       

      Example:

       

      4 buttons on the left side, each a different magnification level of a slide(4x,10x,40x,100x).  When I move the mouse over each button a new image appears corresponding to its respective magnification level.  All is well.  But when I move the mouse from that button, the image the slide image snaps back to whatever is in State 1.  So I want to make it so an image is 'held' in the center when you leave the slice area represented by each button.

       

      That make any sense at all?

       

      Thanks!

      Zack

      • 348 Views
      • Tags:
        • 1. Re: Rollover Question
          pixlor Level 4
          pixlor May 24, 2010 10:56 PM (in response to sourceofdenial)

          A standard rollover has an onMouseOver event and also an onMouseOut event. The first changes the image, the second changes it back. If you work out exactly what you want to happen when you roll over your various images, then you can write the code directly. You're doing a remote or disjoint rollover. You just don't want the onMouseOut event.

           

          A couple of places to start...

          http://www.daxassist.com/js/disjointedrollovers.cfm

          http://codepunk.hardwar.org.uk/bjs17.htm

           

          But you're going to have to dig into the actual code.

          • 2. Re: Rollover Question
            sourceofdenial Level 1
            sourceofdenial May 25, 2010 3:26 AM (in response to pixlor)

            Great--I discovered the onMouseEventbefore looking at this last night.  Now I have a new question--I want to have a central part of the page that has overlapping web layers--different web layers for each state.  So when I'm in the state that corresponds to 10x magnification for example, I can mouse over a part of the image and have it display text, while if  Iwas in the state corresponding to 4x, I could mouse over the same spot(it would be a different picture) and have it display different text.  Is that possible? All I've found so far is adobe help document that says web layers are shared between all states...which is a problem.

             

            Thanks again so much!

            • 3. Re: Rollover Question
              pixlor Level 4
              pixlor May 25, 2010 8:49 PM (in response to sourceofdenial)

              For what you want to accomplish...you have to write the code. You don't do it in Fireworks. Fireworks is a graphics program. It isn't a code-assistance program. Fireworks can output some basic functionality for common effects, but even then, the code is fragile. It's only meant for prototypes, not for live sites. Anyway, you want to do something non-standard, therefore you need to write custom code. If you don't know how to code, then you'll need to learn.

               

              SitePoint books are usually good:

              http://products.sitepoint.com/#/?tag=books&filters%5Btag%5D%5B%5D=javascript&filters%5Bdif ficulty%5D=&simpleform_submit_marker=showme

               

              You could also code this in Flash, Silverlight, or Java.