|
HTML - How To Change Button Style/image?
I'd like to improve the appearance of three buttons on an html page. i believe this is the code:
Code: <input type="submit" name="purchase" value="Use Remaining Credits" style="margin:7px 0" style="padding:1px 2px 1px 2px" rel="gb_page_center[600, 635] "> <input type="button" name="search" value="Get New Credits" onclick="window.location.href='newcredits.php';" style="margin:7px 0" style="padding:1px 2px 1px 2px"> <input type="button" name="search" value="Search Again Now" onclick="window.location.href='page.php??page=12';" style="margin:7px 0" style="padding:1px 2px 1px 2px"> How can I add more attractive buttons, which would include the text "Use Remaining Credits", etc.? can you please provide a code example, with image code? Thanks Similar TutorialsI am creating a website that has a search button with an image. I would like to know if there is some simple code that I can include that would display the same basic image with a different color when the user mouses over the button. Here is the code: <FORM name="searchform" onSubmit="return validateSearch();" METHOD="POST" ACTION="search_results_lt.asp"> <INPUT TYPE="text" NAME="Search" VALUE="" SIZE="20" > <INPUT TYPE=IMAGE SRC="images/search_button.gif" Name="SearchButton" Value="Submit"> </FORM> **** Thanks for your help, Robin Hello, Is there a way to use a submit style button (so HTML automatically generates the button image) instead of having to have a image file? For example: <a href="../invoices.htm"> <img border="0" src="../btn_invoices.jpg" width="73" height="25"></a> where the src is can this be repalced with a button command? without using a FORM or POST option? Something similiar to: <button> <a href="http://www.microsoft.com/">Microsoft</a> </button> Thanks for your help, Doug hi there. i made a website for somebody years ago when i knew nothing about html. the code is absolutely crazily bad and i am looking to revamp it. the site is www.englishandproudofit.co.uk i know how to do the layout but its the buttons i am struggling with. what is the best way to make the buttons around the outside? i only want to use one image for all of the buttons and then have text on each button that also chnages colour on hover, pretty much how it is now but what would be the correct way to do it? all help greatly appreciated. thank you, sam Ok I made a web 2.0 style button in PS & would like to incorporate into my side bar navigation I thought I put the right url link in the CSS, but what and where do I need to put the img src in the html so that every button will have its own image src of the web 2.0 button I've made? here is the html for it: <div id="sidebarnav"> <ul class="list"> <div><li><a href="#">Home</a></li></div> <div><li><a href="#">About Us</a></li></div> <div><li><a href="#">Services</a></li></div> <div><li><a href="#">Contact</a></li></div> <div><li><a href="#">Links</a></li></div> <div><li><a href="#">Schedule</a></li></div> <div><li><a href="#">Testimonials</a></li></div> <div><li><a href="#">Gallery</a></li></div> <div><li><a href="#">Videos</a></li></div> <div><li><a href="#">Forum</a></li></div> </ul> <div id="search"> <label for="search">Search:</label> <input name="search" type="text" /> </div> </div> And here is the CSS I've done so far: div#sidebarnav { background-image: url('images/button.png'); height: 350px; width: 164px; border-style: inset; border-width: 5px; margin-left: 20px; margin-top: -955px; font-size: 20px; padding: 5px; } How do I make a button change images when a user rolls over his/her mouse? Thanks. How do I make a button change images when a user rolls over his/her mouse? Thanks. Hey guys, I'm trying to use submit buttons to display different websites in an iframe (or maybe I could use css?) What I'm basically trying to do is display different SQL databases when you click different buttons. So the code in the website in the iframe will just display the database. Thanks Hello Im creating a IE Mobile website, which has limited CSS capabilities ( see http://blogs.msdn.com/windowsmobile/...es/213771.aspx ) and jscript capabilities( http://msdn.microsoft.com/library/de...ects2_jrzu.asp ) I have been able to change the buttons color and my current version I have the following code that changes the page background color when a button is focused. I just want the buttons to change color when the focus is on it and when no longer focused goes back to normal, so the user knows they have moved to another button. <HEAD><title>MySite</title> <SCRIPT TYPE="text/javascript"> <!-- function setbg(color) { document.bgColor=color; document.body.style.backgroundColor=color; } //--> </SCRIPT> </HEAD> <BODY> <INPUT TYPE="BUTTON" NAME="Btn1" VALUE="1" onFocus="setbg('red')" > <INPUT TYPE="BUTTON" NAME="Btn1" VALUE="1" onFocus="setbg('black')" > </BODY> </HTML> Any suggestion on how to change just button color upon mouseover and mouseout? Well thanks for any help 1 can extend! Hey, I need help making the bg color of an autoshape change its color by pressing a button. I'm using Microsoft FrontPage and am quite new to html. I know how to press a button and change the document background color but can not figure out how to do this but with an autoshape. Here is the code I have used to change the document background color: HTML Code: <div style="width: 110; height: 19; position: absolute; left: 903; top: 6"> <font size="2" face="Verdana,Arial,Helvetica,Sans Serif"> <input type="button" name="colr" onclick="document.bgColor='#0000FF'" style="color: #0000FF; width: 18; height: 18; border: 3px outset #0000FF; background-color: #0000FF"> <input type="button" name="colr" onclick="document.bgColor='#00FF00'" style="width: 18; height: 18; color: #00FF00; border: 3px outset #00FF00; background-color: #00FF00"> <input type="button" name="colr" onclick="document.bgColor='#FFFFFF'" style="width: 18; height: 18; color: #FFFFFF; border: 3px outset #FFFFFF; background-color: #FFFFFF"> <input type="button" name="colr" onclick="document.bgColor='#FFFFFF'" style="width: 18; height: 18; color: #FFFFFF; border: 3px outset #FFFFFF; background-color: #FFFFFF"> </div> It says document.bgcolor= ect but I cannot figure out the name of the autoshape so am not sure, in the html I think it only says the ID of the autoshape but do not know where to go from there. Please try and help and thanks in advance. Hi All, I want to change the form action clicking on radio button. I have two radio button. the default action is a1.jsp if I click on update button If I click on second radio button I want to change the form action. I want to redirect to another file (change form action if possible) if I click on second radio button How can I do that ? Thanks please reply soon. Hi All, I want to change the form action clicking on radio button. I have two radio button. the default action is a1.jsp if I click on update button If I click on second radio button I want to change the form action. I want to redirect to another file (change form action if possible) if I click on second radio button How can I do that ? Thanks please reply soon. So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. Hi: This morning I changed an old image on my website to a NEW image. No names were changed in my Main Page. Still the same old src=etc, etc However, after 20 minutes, the *old* image is still displaying. Even though I only have the *new* image on my apache Webserver !! *Who* keeps this old image and where do they keep it ? I'm very puzzled ! Can anyone explain this please ? Thank you. -Mel Smith Ok, I dont know what its called, but you know that little 16x16 picture that appears before the URL in the address box? That little image that appears next to the lnks in your favorites? How do you change that? iv got two images and i want one to change into the other on mouseover but i also need it to be linked to a certain page , so basically its one image changing to another on mouseover and on click goes to a specified page if therea anything else you need to know please just ask Jake I am working on my 3rd navigaition, except this time i need the images to change when the mouse goes over them. How should i go about doing this? I have seen many ways but i want to hear what you think the best way to do this is. I am having an impossible time finding the correct way to code this in Expression Web 4. I want to have an image that when it's moused over will change to another image, and back again to the original image when you move the mouse off. Nothing I can find online seems to do the trick, though. Any suggestions? Ok, so i have an image that's 2 x 1 and the div I'm placing it in is 1 x 1. (easy math example) My website is showing the top half of the image, which is what i want it to do. I would like it to show the bottom half of the image when i put my mouse over it. How do i do this? (It's a blue button that changes yellow) So basically how do i change the image position in that div? Thanks I have been asked to redesign a site. The basic elements will stay the same, but the folder structure is crazy! The current site is http://www.npsign.com Please don't pay attention to the current code on the site. I'm doing a complete makeover, so the fact that it is currently not W3C standard will change. However, the index.html file or home page has pictures that rotate in a frame. I don't mind changing any code at all. In fact I think that I'm going to have to redesign the entire site!! On the home page you will notice that the pictures rotate and or change every 3 seconds or so. What I'm looking for is an answer to how to create this change in Dreamweaver CS5.5. The index.html file is the only file that this takes place on. I guess to give it a more dynamic look. However, is my best option to use adobe flash to change the images, or is there more simplified code to change the images in the block? Any feedback on this would be appreciated, even if there are multiple example for me to create the effect of different images changing. This could be a fade effect, or a simple picture to picture swap. This particular subject is beyond my knowledge, as well as a few more questions I may have. Basically, they are looking for a way to get this done on the cheap. I don't mind doing it because it is a learning experience for me!! Thank you for all responses!! Edit: This may be what I'm looking for! http://help.adobe.com/en_US/Dreamwea...f21-7ae8a.html Any response is appreciated! |
|||||||