Altering an on-click event.

How can I get it to hide/unhide a CSS element instead of an image.

[Linda_A]

I am trying to do a skin for an Invision Board that uses CSS-styled textlinks as 'buttons' instead of images. I have run into a problem with one of the buttons as it uses a javascript to change betwee two stages (add quote & remove quote) and I have not been able to figure out how to get it to work with a CSS element instead. If anyone could help me make sense of this I'd be most grateful. Ideally I would like to avoid editing the javascript itself, and just tweak the HTML and the CSS.

The code used is spread over a number of templates and files, but I think these are the relevant pieces:

The variables defined on the page:

var addquotebutton = "{ipb.vars['img_url']}/p_mq_add.gif";
var removequotebutton = "{ipb.vars['img_url']}/p_mq_remove.gif";

The HTML & CSS:

mq_image_add: <img src="{ipb.vars['img_url']}/p_mq_add.gif" name="mad_$pid" alt="+" />
I changed this to: <span class="fauxbutton-black" name="mad_$pid">Add Quote</span>
mq_image_add: <img src="{ipb.vars['img_url']}/p_mq_remove.gif" name="mad_$pid" alt="-" />
I changed this to: <span class="fauxbutton-black" name="mad_$pid">Remove Quote</span>
<div align="right">
<a href="#" onclick="multiquote_add({$post['pid']}); return false;" title="{ipb.lang['mq_title']}">{$post['mq_start_image']}</a><a href="{ipb.script_url}act=Post&amp;CODE=02&amp;f={ipb.input[f]}&amp;t={ipb.input[t]}&amp;qpid={$post['pid']}" title="{ipb.lang['tt_reply_to_post']}"><{P_QUOTE}></a>
</div>

The javascript (I think I've included the relevant part, but I did cut some out to make sure not to quote too much):

 //-----------------------------------
 // Add?
 //-----------------------------------
 
 if ( add )
 {
 clean[ clean.length ] = id;
 eval("document.mad_"+id+".src=removequotebutton");
 }
 else
 {
 eval(" document.mad_"+id+".src=addquotebutton");
 }
 
 my_setcookie( 'mqtids', clean.join(','), 0 );
 
 return false;
}

[DrDoc]

The current code changes the image source ... what you want is to change the visibility/display property of the HTML document (which now replaces the image)

So, instead of:
eval("document.mad_"+id+".src=removequotebutton");
you want:
eval("document.getElementById? document.getElementById('mad_"+id+"').display='none' : (document.all? document.all['mad_"+id+"'].display='none' : '')");

To display the HTML element again, simply replace "none" with "inline".