Using ontoggle Event Handler coupled with rollover images

[telephonefield]

1) Script Title: ontoggle Event Handler

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse_suppliment.htm

3) Describe problem: Not really a problem, just wanting to know the best and most simple way to code something relative to the code already implemented for the ontoggle Event Handler.

Here's the code I have for the Event Handler so far, and it works perfect in that the togglers are given their respective images (either red or grey) when the linked divs are toggled. I just want to add some code that will exchange the image when rolled over (onmouseover) as well as when rolling out (onmouseout).



animatedcollapse.ontoggle=function($, divobj, state){

if (divobj.id=="pressefotos_big") //only react to this
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "images/presse_nav/nav_button_pressefotos_r.jpg" : "images/presse_nav/nav_button_pressefotos_g.jpg"

if (divobj.id=="presseartikel_anzahl") //only react to this DIV
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "images/presse_nav/nav_button_presseartikel_r.jpg" : "images/presse_nav/nav_button_presseartikel_g.jpg"




}


What makes it complicated is that the toggler that is ACTIVE (that is, in this case, red) should NOT go back to grey onmouseout, being that the div(s) are still active. (Every simple imageswap script I've tried has had this problem.)

So what code will ensure that the image is swapped on only the current non-active toggler (the active/red toggler shouldn't change when moused over, but the inactive toggler should change on both onmouseover and onmouseout.)

I'm just looking for something really simple as I'm sure this has been executed in countless other places... I'm just pretty new to all of it : ).

Thanks a lot!

[ddadmin]

As far as easiest to implement/understand, the way to go is to add the mouseover effect separately, and not using the ontoggle event of the script. So the following assumes the later is working already on your page.

To add a mouseover effect to the toggler image only when its corresponding content is collapsed (versus expanded), you can add something like the below to your page:


<script type="text/javascript">

jQuery(document).ready(function($){
$('#peter-toggle').hover(
function(){ //over event
if ($('#peter').css('display')!="block")
$('#peter-toggle').attr('src', 'collapseover.jpg')
},
function(){ //out event
if ($('#peter').css('display')!="block")
$('#peter-toggle').attr('src', 'collapse.jpg')
}
)
})

</script>

The above assumes the following:

1) Your toggler image carries the ID "peter-toggle".
2) The content to expand/collapse carries the ID "peter".
3) The image paths above are valid.

This adds the mouseover effect to a single toggler image. To do the same for additional images, you can just repeat the above code block, changing the IDs to match the new players'.

Now, this method of implementation is the easiest to understand/ do on your own. It's not the most elegant, however.

[telephonefield]

Thanks for the help! It's not working right now, and I think it's because I have multiple divs tied to each toggler. Must I put each div id into the code provided, and what would be the syntax for putting multiple divs in this location?

Thanks!

[ddadmin]

Thanks for the help! It's not working right now, and I think it's because I have multiple divs tied to each toggler.

Hmm not sure I understand- do you mean each of your toggler expands/contracts more than just one DIV?

[telephonefield]

Yeah, that's what I mean. Each toggler actually expands two DIVs each. I'll paste the javscript code and the html links for illustration purposes. : )

So, here's the javascript I have (with the animated collapse) ... this all works perfectly right now.


<script type="text/javascript">

animatedcollapse.addDiv('presseartikel_anzahl','group=presse_sub')
animatedcollapse.addDiv('copyright_info','group=presse_sub')
animatedcollapse.addDiv('p_artikel_2009','group=p_artikel')
animatedcollapse.addDiv('p_artikel_2008','group=p_artikel')
animatedcollapse.addDiv('pressefotos_big','group=p_artikel')


animatedcollapse.ontoggle=function($, divobj, state){

if (divobj.id=="pressefotos_big") //only react to this DIV
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "images/presse_nav/nav_button_pressefotos_r.jpg" : "images/presse_nav/nav_button_pressefotos_g.jpg"

if (divobj.id=="presseartikel_anzahl") //only react to this DIV
document.getElementById(divobj.id+"-toggle").src=(state=="block")? "images/presse_nav/nav_button_presseartikel_r.jpg" : "images/presse_nav/nav_button_presseartikel_g.jpg"

if (divobj.id=="p_artikel_2009" || divobj.id=="p_artikel_2008" || divobj.id=="p_artikel_2005") //only react to these DIVs
document.getElementById(divobj.id+"-toggle").className=(state=="block")? "archiv_jahr_rot" : "archiv_jahr"

}

animatedcollapse.init()

</script>




And here's the links in the html code, where the togglers are opening and contracting two DIVs each, at one time.


<a href="javascript:animatedcollapse.show(['copyright_info', 'pressefotos_big'])" ><img src="images/presse_nav/nav_button_pressefotos_r.jpg" id="pressefotos_big-toggle" name ="pressefotos" border="0" /></a>


<a href="javascript:animatedcollapse.show(['presseartikel_anzahl', 'p_artikel_2009'])" ><img src="images/presse_nav/nav_button_presseartikel_g.jpg" id="presseartikel_anzahl-toggle" name ="presseartikel" border="0" /></a>

[osterello]

With your solution, the rollover effect on the image that open the div continues after the click.

I would like to have a rollover when the div is closed, and when is open the simple image_closed.jpg without rollover.

Is it possible? May you help me?
thanks