Links & Background Images

[Kylegar]

1) Describe Problem:
I have created a web site that has expand and collapse links. I would like to add a background image behind the expand/collapse link. Everything I do does not work. Any ideas? This could be a plus sign when it is collapsed or a minus sign when it is expanded. Anything to illustrate that this item is expandable or collapsible.

2) Here is the code:
<TITLE>Expand & Collapse 1</TITLE>

<script type="text/javascript">

function showHideMe(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}

</script>

<style type="text/css">
.expands{
width:390px;
cursor:hand;
cursor:pointer;
}
</style>

<div class="expands" onclick="showHideMe('div1')"><b>Southampton History...</b></div>
<div id="div1" style="display:none;border:1px solid #5555AA;background-color:#AAF;width:460px">
Under Construction.<br />
<img border="0" src="images/underconstruction.gif" width="309" height="245"><br />
Coming Soon.
</div>



Anything would be much appreciated...

Thanks,
Brad

[Jas]

Did you try: background-image: url("YOUR IMAGE URL"); in your expands selector?

EDIT: After re-reading your post, I am a little confused. Do you want a BG image or a +/- image? The latter is <img id='OPEN' src="MyImage" height="" width=""> and then have your JS function hide it. Am I on the right track?

[Kylegar]

Thanks for the response. I ended up switching to a plus/minus style -- off of this web site. The only problem is that in IE everything works well but in firefox the list of expandable (+/-) seem to cascade down the page. Any ideas... I understand that firefox reads the code correctly and IE sort of guesses.

My web link: http://members.shaw.ca/kylegar/parts.html

Thanks,