Results 1 to 8 of 8

Thread: Animated Collapsible DIV v2.4 adding button hover

  1. #1
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb Animated Collapsible DIV v2.4 adding button hover

    Hi all, I have inserted The Animated Collapsible DIV v2.4 code success fully.
    But one thing is can't.

    I want buttons that change on mouse over (hover effect/rollover image)
    Can someone help me with the right code to do that?

    Now i have this: (basic code from the site)
    Code:
    <a href="#" rel="toggle[forum-example]" data-openimage="images/sluiten.png" data-closedimage="images/meerfotos.png"><img src="images/sluiten.png" border="0" /></a>
    
    				</p>
    				<div id="forum-example">
    When i make a rollover image inside dreamweaver i get this code.

    Code:
    <a href="#" rel="toggle[boeketten] onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('meerfotos','','images/meerfotoshover.png',1)"><img src="images/meerfotos.png" alt="meer fotos" name="meerfotos" width="177" height="34" border="0"></a></p>
    This button works fine, but only to open a link not the <div>
    So maybe the two codes can blend together or someone can give me a sort of starting code that i can edit.
    I hope you understand what i want to say here (my English is not that good)

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    If I understood you correctly, you wish to create an image link that not only has a toggle state, but also rollover states? If so, why not just add to your second code above with the "data-openimage" and "data-closeimage" attributes. For example:
    Code:
    <a href="#" rel="toggle[boeketten] onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('meerfotos','','images/meerfotoshover.png',1)"  data-openimage="images/sluiten.png" data-closedimage="images/meerfotos.png"><img src="images/meerfotos.png" alt="meer fotos" name="meerfotos" width="177" height="34" border="0"></a></p>
    DD Admin

  3. #3
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile almost perfect

    thank for the help.

    The code is almost perfect but there is a bug.

    When the < div> is closed you have the "more pictures" (meer fotos) button and on hover, the "more pictures hover" button.

    so far so good, but after i click op the button and the <div> is open the button change to "close" but on mouse over the "more pictures" button reapers instead of the "close hover" button.

    (In total I have 4 buttons).

    Is there a solution to fix this?

    Ps. you can see the page here:
    http://members.home.nl/bertystam/foto_galerij.htm

    anyway thanks for replying

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Looking at your page, it doesn't seem you've added any mouseover effect to the "More pictures" images? This is what I can see when I view source:

    Code:
    <a href="#" rel="toggle[bloemstukken]" data-openimage="images/sluiten.png" data-closedimage="images/meerfotos.png"><img src="images/sluiten.png" border="0" /></a>
    DD Admin

  5. #5
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking Test page online

    Hi,... no the page shows the original code, with no mouse over.
    I don't want to put the "broken code" online on a working website.

    I did make a TESTPAGE for you so you can see the "problem".

    go to http://members.home.nl/bertystam/TESTPAGE.htm

    This page will be online for a short time.

    ps. the mouse over hover effect will be improved after i get it working. but it's enough to see the effect and problem.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    This isn't really a bug of the script, but rather, just a limitation with the current setup of your rollover code. It indiscriminately switches between two images, which in the case where the original image also changes based on the state of the content isn't sufficient. Anyhow, try the below modified animatedcollapse.js file, which adds support for image rollover of the toggler image intrinsically. With the updated .js file, to specify rollover images for the toggler image, make use of the data-rollover attribute inside your image's markup:

    Code:
    <a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg" data-rollovers="collapse2.gif|expand2.gif"><img src="collapse.jpg" border="0" name="t" /></a>
    whereby you would specify two image paths inside the attribute separated by a pipe ("|") that points to the rollover versions of collapse.jpg and expand.jpg, respectively. That should do it. You can remove the old rollover code from the markup.
    DD Admin

  7. #7
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile reply

    I know it's more a limitation than a bug

    I will test the update as soon as possible when i have the time, i will post the outcome when i have tested it.

    anyway thanks for helping me.

  8. #8
    Join Date
    Sep 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking Fixed!

    It works... I don't understand the code you make me use but it works like a dream.

    Thanks for helping me, if you want you can see the code in action here...
    http://members.home.nl/bertystam/foto_galerij.htm

    I removed the testpage.




    The only thing now, is updating the hover images to a nicer one.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •