Can't simulate a "button" in JavaScript

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

 
<style type="text/css">

div.btn {

  width: 80px;

  height: 22px;

}
 
img.btn {

  position: absolute;

  left: 10px;

  top: 10px;

}
 
#btnLabel1 {

  color: white;

  margin-left: 1px;

  margin-top: 1px;  

}

</style>
 
<script type="text/javascript">

function BtnMouseUp(objNum) {

   var lbl = document.getElementById("btnLabel" + objNum);

   alert(parseInt(lbl.style.marginLeft);

   lbl.style.marginLeft = (parseInt(lbl.style.marginLeft) - 5) + "px"; 

   lbl.style.marginTop = (parseInt(lbl.style.marginTop) - 5) + "px";

   document.getElementById("btnImage" + objNum).src = "btn_reg.bmp";

}
 
function BtnMouseDown(objNum) {

   var lbl = document.getElementById("btnLabel" + objNum);

   lbl.style.marginLeft = (parseInt(lbl.style.marginLeft) + 5) + "px"; 

   lbl.style.marginTop = (parseInt(lbl.style.marginTop) + 5) + "px";

   document.getElementById("btnImage" + objNum).src = "btn_prsd.bmp";

}

</script>
 
<body>

<div class="btn" onload="BtnMouseUp('1');" onmousedown="BtnMouseDown('1');" onmouseup="BtnMouseUp('1');">

<img class="btn" id="btnImage1" src="btn_reg.bmp"  />

<span id="btnLabel1">Hello</span>

</div>

</body>

Aug 5 '09 #1

Subscribe Post Reply

1580

icesign

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

Similar topics

submit form without a "submit" button

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...

PHP

How to create a html page with "Back" button disabled

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

Javascript

How to: use SERVER controls to simulate HTML "link & button" rollo

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...

ASP / Active Server Pages

Weird span/radio button/JavaScript behavior...

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...

Javascript

Using a graphic instead of the "Browse" button

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

HTML / CSS

does anyone knows how to move the bottom of current page, after i press the "button"

by: Alan Ho | last post by:

Cheers~

ASP.NET

simulate button click

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...

ASP.NET

Simulate the "Swap instance button" in ActionScript

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...

Flash / Actionscript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing