Skip navigation
Currently Being Moderated

rollover behaviors

Feb 3, 2009 5:29 PM

I created a page with rolllovers

http://www.toddheymandirector.com/spots/index2.html

on each thumb below the movie, I set the swap image on mouseover behavior to a different gif. And I set it to restore image when mouse out. works fine.

when i try to add an onlick behavior so when i click it changes to a third image and not restore images on mouseout (so it will stay on the clicked image) it changes the mouseover to not restore as well.

i can make it appear as it it stays on the "clicked" image by linking it to a page that has that image (hit the FDIC thumb) but then the page reloads and my ultimate goal is to get all the movies playing subsequently on the same page, unless you click on a different thumb to interrupt, as here:

http://www.rsafilms.com/d/rsa/companies/rsa-us/64

second question is, how is this done?

thanks
 
Replies
  • Currently Being Moderated
    Feb 4, 2009 4:15 AM   in reply to reelhero
    There is no way to do this with simple image rollovers. You would have to
    do it either with custom javascript, or using some tricky layer work. For
    example:

    1. Create a layer for each "click" image that fits snugly around the image.
    2. Place it on the page so that it is exactly superimposed over the
    original image.
    3. Hide it.
    4. Use your normal rollover on the original image.
    5. Add an onclick event that SHOWS the hidden layer.

    The effect will then be that the rollover works until the image is clicked,
    revealing the hidden layer and showing the superimposed "click" image, which
    masks the original rollover image.

    The difficulties you may encounter with this approach -

    1. If your page is a centering page, the layers (absolutely positioned
    containers) will not center along with the page. You will have to take
    additional steps to make this happen (wrap the entire page in a relatively
    positioned, centering div - now everything will move as a unit).
    2. If you do not take care to avoid placing the layers directly into a
    table cell, you will encounter rending problems in some browsers. Since the
    layers are absolutely positioned on the screen, it doesn't matter where
    their code appears on the page (subject to the above restriction), so you
    can just move the code for them to the bottom of the markup (immediately
    above </body>)

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    ==================


    "reelhero" <webforumsuser@macromedia.com> wrote in message
    news:gmar2b$ef6$1@forums.macromedia.com...
    >I created a page with rolllovers
    >
    > http://www.toddheymandirector.com/spots/index2.html
    >
    > on each thumb below the movie, I set the swap image on mouseover behavior
    > to
    > a different gif. And I set it to restore image when mouse out. works fine.
    >
    > when i try to add an onlick behavior so when i click it changes to a third
    > image and not restore images on mouseout (so it will stay on the clicked
    > image)
    > it changes the mouseover to not restore as well.
    >
    > i can make it appear as it it stays on the "clicked" image by linking it
    > to a
    > page that has that image (hit the FDIC thumb) but then the page reloads
    > and my
    > ultimate goal is to get all the movies playing subsequently on the same
    > page,
    > unless you click on a different thumb to interrupt, as here:
    >
    > http://www.rsafilms.com/d/rsa/companies/rsa-us/64
    >
    > second question is, how is this done?
    >
    > thanks
    >

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2009 7:41 AM   in reply to reelhero
    Where can I see your work for the first part of your question - at that same
    URL, but then where?

    With regard to your Flash question - sorry, can't help. I don't do
    Flash.... But I do know that as it is, your site will not be usable by
    those requiring assistive devices, and may not be spidered by search
    engines.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    ==================


    "reelhero" <webforumsuser@macromedia.com> wrote in message
    news:gmcc2v$d0r$1@forums.macromedia.com...
    > Hi Murray nice to hear from you again..
    >
    > i tried that on the far right rollover (midsex).. i had to select an
    > action on
    > the hide (on mouse move) so it shows until i move the mouse.. and the
    > onclick
    > show doesn't seem to work..
    >
    >
    > any ideas about the second question? I'd like all the movies to play in
    > the
    > same space, subsequently, the corresponding movie thumb to highlight (same
    > state as onclick) as it plays, without reloading the page. I'd also like
    > to be
    > able to click on any thumb to interrupt and play that movie.. any ideas?
    >
    > it was done pretty well here (i know it's flash but there's gotta be a way
    > to
    > do it in dreamweaver):
    >
    > http://www.parkpictures.com/
    >
    > go to commercials and select any director.
    >

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2009 7:54 AM   in reply to reelhero
    You are not doing any show/hide on that button -

    <div id="layer2" style="position: absolute; left: 629px; top: 421px; width:
    100px; height: 67px; z-index: 6"><a href="#"><img
    src="../Images/spots/NEWBUTTS/midsex.gif" name="animatic" width="100"
    height="67" border="0" id="animatic"
    onmousedown="MM_swapImage('animatic','','../Images/spots/NEWBUTTS/mid sexclick.gif',1)"
    onmouseover="MM_swapImage('animatic','','../Images/spots/NEWBUTTS/mid sexhot.gif',1)"
    onmouseout="MM_swapImgRestore()" /></a></div>

    And also, you have applied these behaviors directly to the <img> tag - you
    should be applying them to the <a> that wraps the images instead. That
    would give you this -

    <div id="layer2" style="position: absolute; left: 629px; top: 421px; width:
    100px; height: 67px; z-index: 6"><a href="#"
    onmousedown="MM_swapImage('animatic','','../Images/spots/NEWBUTTS/mid sexclick.gif',1)"
    onmouseover="MM_swapImage('animatic','','../Images/spots/NEWBUTTS/mid sexhot.gif',1)"
    onmouseout="MM_swapImgRestore()"><img
    src="../Images/spots/NEWBUTTS/midsex.gif" name="animatic" width="100"
    height="67" border="0" id="animatic"/></a></div>

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    ==================


    "reelhero" <webforumsuser@macromedia.com> wrote in message
    news:gmcc2v$d0r$1@forums.macromedia.com...
    > Hi Murray nice to hear from you again..
    >
    > i tried that on the far right rollover (midsex).. i had to select an
    > action on
    > the hide (on mouse move) so it shows until i move the mouse.. and the
    > onclick
    > show doesn't seem to work..
    >
    >
    > any ideas about the second question? I'd like all the movies to play in
    > the
    > same space, subsequently, the corresponding movie thumb to highlight (same
    > state as onclick) as it plays, without reloading the page. I'd also like
    > to be
    > able to click on any thumb to interrupt and play that movie.. any ideas?
    >
    > it was done pretty well here (i know it's flash but there's gotta be a way
    > to
    > do it in dreamweaver):
    >
    > http://www.parkpictures.com/
    >
    > go to commercials and select any director.
    >

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 4, 2009 11:03 AM   in reply to Newsgroup_User
    > btw you're saying my current site isn't indexable by spiders? why?

    It's Flash. Google claims to have made progress there but it's the only
    one. I have no idea how successful they are at finding Flash-embedded
    links, but if they fail, and if you don't have redundant links in the HTML,
    then you don't get spidered. In addition to that, if all of your content is
    also in the Flash, I'm guessing that's not found by Google/SE's at all.

    > I was able to get the "click layer" to hide on load but now it shows on
    > mouseover even though I set it to onclick. see same page as above.

    You're missing the basic process. Make the click layer hidden in DW before
    you upload the page, not onload. Then make the SHOW behavior have an
    onclick event. The sequence would be -

    1. onmouseover swap in image
    2. onmouseout restore image
    3. onclick show layer

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    ==================


    "reelhero" <webforumsuser@macromedia.com> wrote in message
    news:gmcm44$p1j$1@forums.macromedia.com...
    > the movies are the ones on toddheymandirector.com under SPOTS. all i
    > really
    > know how to do is create a different page for each movie with the movie
    > playing
    > and it's thumb highlighted (go to
    > http://www.toddheymandirector.com/spots/index2.html
    > and hit the FDIC thumb).
    >
    > I dont want page reloads just a different movie getting called up from a
    > thumbclick as well as each one playing on its own in sequential order if
    > nothing is prompt with the corresponding thumb highlighted as it plays as
    > well
    > as appropriate text above like on nike. I sent that flash reference but i
    > dont
    > want to make a flash it was just a good functional reference.
    >
    > I was able to get the "click layer" to hide on load but now it shows on
    > mouseover even though I set it to onclick. see same page as above.
    > btw you're saying my current site isn't indexable by spiders? why?
    >

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points