-
January 21st, 2014, 08:07 AM
#1
Help with scripting - drop down box
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>
-
January 22nd, 2014, 08:31 AM
#2
Re: Help with scripting - drop down box
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.
-
January 25th, 2014, 10:09 AM
#3
Re: Help with scripting - drop down box
Originally Posted by OReubens
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.
Code:
<a href="javascript:toggleMe('para1')" style="width: 200px; height: 32px; background: url(btn.gif); font-size: 0px;"> </a>
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|