Drop down/ Overlapping Content (using 2 images off and onclick)

[newyorker2]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.htm

3) Describe problem:

i love this script, and i want to use it on my website.

i want to use it with an image. (let's say image_off.gif)
when i click on it image will change to image_on.gif and the overlapping content will scroll down.

when i close the content box manually the image will return to image_off.gif state.

thanks to all who can help.

[rangana]

Suppose you are clicking on the image (the one that changes to on and off), you could add an onclick event telling to change the image's source to image_off if it's on or image_on if it's off:

<img src="image_off.gif" alt="imageSwitch" onclick="this.src=this.src.indexOf('_off')>-1?'image_on.gif':'image_off.gif'">

Not tested though, but hopefully, it will work.

[newyorker2]

rangana
thank you that worked.

i also want the image to go back to off state if user wants to hide the div manually.



any idea how we can switch the image to off state when user clicks on this?


<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent2')">Hide this div manually</a></div>

[rangana]

Add an ID to your image, and use that ID in replacement of myimage_id in this ammendment:

<div align="right"><a href="javascript:dropdowncontent.hidediv('subcontent2');document.getElementById('myimage_id').src='image_off.gif'">Hide this div manually</a></div>

Hope that helps.

[newyorker2]

it worked.
thank you for your help.