473,788 Members | 2,726 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Can't simulate a "button" in JavaScript

24 New Member
I'm trying to simulate buttons using images. I tried many ways and I don't seem to get it to work as far as the button label is concerned. I tried manipulating "top" and "left" and now the margins and I'm getting bizarre results. This is not the actual code. I did what I had to do to make it independent from the website I'm working on and to "reduce" the problem to the bare minimum factors.

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. div.btn {
  3.   width: 80px;
  4.   height: 22px;
  5. }
  6.  
  7. img.btn {
  8.   position: absolute;
  9.   left: 10px;
  10.   top: 10px;
  11. }
  12.  
  13. #btnLabel1 {
  14.   color: white;
  15.   margin-left: 1px;
  16.   margin-top: 1px;  
  17. }
  18. </style>
  19.  
  20. <script type="text/javascript">
  21. function BtnMouseUp(objNum) {
  22.    var lbl = document.getElementById("btnLabel" + objNum);
  23.    alert(parseInt(lbl.style.marginLeft);
  24.    lbl.style.marginLeft = (parseInt(lbl.style.marginLeft) - 5) + "px"; 
  25.    lbl.style.marginTop = (parseInt(lbl.style.marginTop) - 5) + "px";
  26.    document.getElementById("btnImage" + objNum).src = "btn_reg.bmp";
  27. }
  28.  
  29. function BtnMouseDown(objNum) {
  30.    var lbl = document.getElementById("btnLabel" + objNum);
  31.    lbl.style.marginLeft = (parseInt(lbl.style.marginLeft) + 5) + "px"; 
  32.    lbl.style.marginTop = (parseInt(lbl.style.marginTop) + 5) + "px";
  33.    document.getElementById("btnImage" + objNum).src = "btn_prsd.bmp";
  34. }
  35. </script>
  36.  
  37. <body>
  38. <div class="btn" onload="BtnMouseUp('1');" onmousedown="BtnMouseDown('1');" onmouseup="BtnMouseUp('1');">
  39. <img class="btn" id="btnImage1" src="btn_reg.bmp"  />
  40. <span id="btnLabel1">Hello</span>
  41. </div>
  42. </body>
  43.  
Aug 5 '09 #1
1 1600
icesign
5 New Member
You can try padding-left of the div instead of the margin of its content. But is it really worth it? All that javascript...
If you just need a button with an image use <button><img/>hello</button>
And jQuery can ease your pain. :)
Aug 5 '09 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

5
12412
by: lsarg | last post by:
i've been trying forever to figure out a way to use a regular text link in place of a submit button at the bottom of this. can't get it. i'm just starting to learn php, so i'm stuck. any help at all would be amazing. <?php # Script 12.7 - login.php // This is the login page for the site. // Include the configuration file for error management and such.
5
2284
by: Nick Li | last post by:
Hi, I need to create a html page so that "Back" button(or some other button) is disabled in IE browser. I would appreciate your help. Nick Li
1
1909
by: charliewest | last post by:
I am trying use server controls or web controls to simulate the following behavior. I've an image wrapped w/in a link to create a rollover effect as if both elements we're one graphic: <a href="javascript:submit();" onMouseOver="MM_swapImage('Image1221','','images/btn_green_on.gif',1)" onMouseOut="MM_swapImgRestore()" id="A1" runat="server"> Next <img src="images/btn_green.gif" alt="Next" name="Image1221" width="16" height="16"...
3
1956
by: madforplaid | last post by:
Can anyone help me to figure out a strange span/radio button/JavaScript behavior? When clicking on the radio button for WEEK 2 below all works okay, but when clicking on the label for the same week, button 41 gets selected instead: <td align="center"> <span title="WEEK 2"><label onMouseOver="this.className='option_wk_even'; window.status='WEEK 2
11
3540
by: laredotornado | last post by:
Hello, Is it possible, instead of having the button "Browse" for the HTML <input type="file"> element, to have a graphic in its place? How would this be done? Thanks, - Dave
7
3619
by: xzzy | last post by:
I have several pages in a frame and need the code behind of a page in one of the frames to cause a button in that page to click so the javascript in that button will execute on the client computer.. Thank you, John Bickmore
3
4275
by: groovymovin | last post by:
Hi there, I am a newbee. searched intensively for a quite simple problem but couldnt find an answer. Here is my problem: I have two layers with 2 movie clips. The movie clip on layer 1 stays static, the movie clip on layer 2 fades in on a few frames, thus I crossfade from clip 1 to clip 2 (actually it is a bit more complicated what I am trying to do). At the end of the fade, i would like to replace the movie clip on layer 1 with the movie...
0
10366
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10112
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9969
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8993
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7518
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6750
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5536
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4070
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2894
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.