help with Drop down/ Overlapping Content script

[clicky081]

1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem:

Is there a way I can use an image for the link and once the content is showing for that image to show another image, for example:


Overlapping Content not visible - image with arrow pointing down

Overlapping Content visible - image with arrow pointing up (so when its clicked again is hides the overlapping content)


Simmilar to the 'Login' on the top right of this website http://www.shaadi.com

Looking forward to a response.

Thanks and Happy New Year to all!

[ddadmin]

Does your page contain just one Drop Down Content which should display an arrow in such a fashion? If so it's fairly simple to modify the script to do this. Firstly, next to your anchor link, manually insert an IMG tag showing the image you want initially shown:


<a href="http://www.dynamicdrive.com/resources/" id="contentlink" rel="subcontent2">Additional Resources</a> <img id="dropimage" src="leftarrow.gif" />

The image in this case must carry the ID attribute of "dropimage". Then, use the below modified .js file, and change all references of the following inside the code to your own:

-leftarrow.gif
-right.gif

where the first is the image to show during the Drop Content's closed state, and the later, when it's open.

[clicky081]

Thank you.