Animated Collapsible DIV v2.4 adding button hover

[dummyxl]

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)

<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.

<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)

[ddadmin]

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:

<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>

[dummyxl]

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

[ddadmin]

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:

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

[dummyxl]

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.

[ddadmin]

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:

<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.

[dummyxl]

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.

[dummyxl]

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.