Help with scripting - drop down box

[rebrov85]

Hi guys - complete newbie to coding and these forums. This is my first post so be easy on me!

I have added a bit of script to my website that allows the visitor to click a button which then reveals further text/images etc.

The functionality works fine however the button style is very basic. I would love to stylise the button. Could anyone offer me any advise on how to do this using an image that I have pre-uploaded to my website (i.e.with a source of /upload/images/button1).

Here's the script I am using- any ideas how I can change the button so that it has my button image siting over it? (60px wide x 41 high)


<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<input type="button" onclick="return toggleMe('para1')" value="More info"><br>
<div id="para1" style="display: none;"><br>
<h3>Example subheading</h3>
<p>Example text!</p>

[OReubens]

you can't do much style wise with a regular button, because the OS/Browser decides how form controls look.

If you want better control.
use a rectangular area (a <div>) and handle the events on the div.
you can then use css to style the button how you want, if you need to have the button in different states,
change the button's css class in the appropriate events (such as onclick, onmouseover, ...) and provide the different visual styles through css.

[PeejAvery]

you can't do much style wise with a regular button, because the OS/Browser decides how form controls look.

On the contrary, you can do a lot via CSS (which you then mention and seem to take a different position).

Welcome to the forums, rebrov85! What exactly are you trying to apply style wise? If it's simple color, gradients, borders, then that is all easily done via CSS. If you want something very graphically in depth, then use an anchor tag with a JavaScript trigger.

<a href="javascript:toggleMe('para1')" style="width: 200px; height: 32px; background: url(btn.gif); font-size: 0px;">&nbsp;</a>