Button Clickable

**Chrismhen54** · 12-31-2005, 09:25 PM

Sorry if this is already here.

I want to make a clickable button link. I already have the three images I'm using. All I need is the code. Oh, and please keep it simple, if possible of course

.

Thanks,
Good Day All,
Chrissy

**Twey** · 12-31-2005, 09:53 PM

Three images? What are they? Do you want text on this button? You should really give more info. I'm going to assume that you have three blank button images: normal, clicked, and hover. Change the bits in green.

Code:

<!-- This bit goes in the head: -->
<script type="text/javascript">
var btn_width = 100, // Width in pixels
  btn_height = 33; // Guess :p
// Preloading the images
btn_normal = new Image();
btn_normal.src = "button_normal.png";
btn_clicked = new Image();
btn_clicked.src = "button_clicked.png";
btn_hover = new Image();
btn_hover.src = "button_hover.png";
</script>
<!-- This bit goes in the body: -->
<a
  style="cursor: default;"
  onload="
    this.style.height = btn_height + 'px';
    this.style.width = btn_width + 'px';
    this.style.backgroundImage = 'url(' + btn_normal.src + ')';
  "
  onmousedown="this.src = btn_clicked.src;"
  onmouseup="this.src = btn_hover.src;"
  onmouseover="this.src = btn_hover.src;"
  onmouseout="this.src = btn_normal.src"
  href="wheretogo.html"
>
Button text
</a>

**jstgermain** · 12-31-2005, 09:55 PM

you will need to insert the following code in to the head of the document:

HTML Code:

<script language="JavaScript" type="text/JavaScript">

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

edit:
the one the Tweny posted is good too, but he must have been posting at the same time as me. :)  i think his a little more complex though.  mine just sounds a littel harder becuase i gave such detailed instructions on how to use it.  LoL.  well, use either one.  hope you can figure it out from there.
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</script>

and you will need the following code for the button

HTML Code:

<body onLoad="MM_preloadImages('PATH/FILENAME_ON_OVER.EXTENSION','PATH/FILENAME_ON_PRESS.EXTENSION')">
<a href="LINK HERE" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','PATH/FILENAME_ON_OVER.EXTENTION',1)" onMouseDown="MM_swapImage('Image1','','PATH/FILENAME_ON_PRESS.EXTENTION',1)"><img src="PATH/ORIGINAL_IMAGE_FILENAME.EXTENSION" name="Image1" border="0"></a>
</body>

note that i use a preload image in the body tag to preload the images. you will obviously need to change "PATH/FILENAME_ON_OVER.EXTENSION" to something like "images/photo1b.jpg" and "PATH/FILENAME_ON_PRESS.EXTENSION" to something like "images/photo1c.jpg". this will preload the rollover image and the pressed image.

also make sure to change "PATH/FILENAME_ON_OVER.EXTENSION" and "PATH/FILENAME_ON_PRESS.EXTENSION" in the link where it says "onMouseOver" "and onMouseDown" onMouseOver is where the rollover image will go, and onMouseDown is where the pressed image will go. Make sure to change "PATH/ORIGINAL_IMAGE_FILENAME.EXTENSION" to the original file name. something like "images/photo1a.jpg"

I hope this helps. let me know if you need any more help with it.

-------------
edit:

Twey must have ben posting at the same time as me, but either code will help you. I feel his is a little more complex, but good. Mine just may seem a little harder because i gave such detail info on using it. LoL. but never the less, use either one.

i hope you can figure it out from here.

**Chrismhen54** · 12-31-2005, 10:25 PM

Thanks, jstgermain, that worked.

Good Times All,
Chrissy

**Twey** · 12-31-2005, 10:45 PM

I feel his is a little more complex,

A little more complex?! My two tags to your huge script full of unneeded bloat that's still stuck to it from the Dreamweaver-generated page it came from?

Code:

<script language="JavaScript" type="text/JavaScript">

"language" is deperecated, and "type" needs to be all lower-case.

**jstgermain** · 12-31-2005, 11:51 PM

there is no need to get mad at me twey. i was complimenting you on the script. i used a similar one in the past, but in doing so, you have to enter the image name in for each image in the script like

Code:

btn_normal = new Image();
btn_normal.src = "button_normal.png";
btn_clicked = new Image();
btn_clicked.src = "button_clicked.png";
btn_hover = new Image();
btn_hover.src = "button_hover.png";
btn_normal = new Image();
btn_normal.src = "button_normal2.png";
btn_clicked = new Image();
btn_clicked.src = "button_clicked2.png";
btn_hover = new Image();
btn_hover.src = "button_hover2.png";
btn_normal = new Image();
btn_normal.src = "button_normal3.png";
btn_clicked = new Image();
btn_clicked.src = "button_clicked3.png";
btn_hover = new Image();
btn_hover.src = "button_hover3.png";

SO, it technically is the same thing, it just is coded a little different. and as far as the dreamweaver generated script, that script could have come from anywhere. there are tons of sites out there using the same script, so there is no way to tell that was the dreamweaver script, and it also wouldnt matter. it works, and that is all that matters. we were posting here to help the guy, not complain about what i posted. you just happened to be posting at the same time as me, and i finished after you. my posting was also longes becuase i went in to detail on how to use the script and wich parts needed to be changed. as for the type needing to be all lower case? i am not sure. i have never heard of that, but that doesnt mean you arent righ, BUT the code works, so I would be safe to assume that it doesnt really matter. there is no need to try to diss on me just cause I am new to this forum, DOESNT mean that I dont know what i am doing. I have been doing design for year, and run a successfull business doing so. I belong to a few other forums, and just happened to join this one recently to try and help more people, not argue with people. so you can take you snide comments and keep them to yourself. I will continue to help people, and I hope you do the same instead of trying to make me look bad. and for your information, i would not post something that is wronge or that wont work, or if i am not 100% sure that I am right about what i am saying, so dont worry about what i post.

as for Chrissy, you are VERY welcome, and I am glad that I was able to help. Let me know if there is anything else I may help you with.

**Chrismhen54** · 01-01-2006, 12:10 AM

The case doesn't nesscarrly matter (strange spelling today), and the depressated stuff still works, in most cases that i have encountered. I've been managing building, I can never figure out what to call it, for years, my current site has been up since 2003 (http://www.angelfire.com/wrestling3/wefan). I have had sites before then that didn't go very long do to lack of infomation on the sites subject matter, (Cats the Musical) .

I have a lot of experance with no training, but I do know what works and what doesn't. Both for the web and for me.

And I think I forgot where I was going with this...

Anyway, what looks simple may be difficult for me to figure out or to implament.

THe complex in appearance is ussally easy for me to understand. In either case, all I was looking for was a quick and easy code, which jstgermain gave me.

If this makes no sense, just ignore it.
I lose people often, and that sometimes includes me.

Good Day All,
Chrissy

**Twey** · 01-01-2006, 01:40 PM

there is no need to get mad at me twey.

Oh, I wasn't, don't worry. I was just slightly incredulous, comparing the sizes of the two scripts

The case doesn't nesscarrly matter (strange spelling today), and the depressated stuff still works, in most cases that i have encountered.

The case is necessary for validation; some devices (now and in the future) may not understand it if the case is incorrect. Deprecated things are deprecated because they do still work, but aren't going to for long. Always best to be forward-compatible.

you have to enter the image name in for each image in the script like

It would also be possible to use an array, but makes for harder-to-read code, as you can see with your example, which I was trying to avoid in this case.

and as far as the dreamweaver generated script, that script could have come from anywhere. so there is no way to tell that was the dreamweaver script, and it also wouldnt matter.

As I said above, the Dreamweaver-generated script, while I'm sure it works, also includes code intended for further usage to which we don't want to put it here. This will slow down the page, slightly in faster browsers, possibly considerably on slower machines. It also, again, makes the code more complex and difficult to read.

there is no need to try to diss on me just cause I am new to this forum, DOESNT mean that I dont know what i am doing. I have been doing design for year, and run a successfull business doing so. I belong to a few other forums, and just happened to join this one recently to try and help more people, not argue with people. so you can take you snide comments and keep them to yourself. I will continue to help people, and I hope you do the same instead of trying to make me look bad. and for your information, i would not post something that is wronge or that wont work, or if i am not 100% sure that I am right about what i am saying, so dont worry about what i post.

I assure you I was neither "dissing" you nor attempting to attack your code. It was the assurance that yours was simpler I found difficult to understand

**mwinter** · 01-01-2006, 02:30 PM

Originally Posted by Twey

Code:

<a
  style="cursor: default;"
  onload="
    this.style.height = btn_height + 'px';
    this.style.width = btn_width + 'px';
    this.style.backgroundImage = 'url(' + btn_normal.src + ')';
  "
  onmousedown="this.src = btn_clicked.src;"
  onmouseup="this.src = btn_hover.src;"
  onmouseover="this.src = btn_hover.src;"
  onmouseout="this.src = btn_normal.src"
  href="wheretogo.html"
>
Button text
</a>

A couple of notes and corrections on that to start with:

Why style away the pointer cursor type? It's still a link.
Links don't have onload attributes. They also don't have src properties. The latter should be changed to the backgroundImage property of the style object, with the addition of the url functional syntax.
As it is, this link will be an inline element, so the width and height properties do not apply. The link would need to be styled as a block-level element, floated, or absolutely-positioned.

An alternate, entirely CSS approach would be:

Code:

a.button {
  background: colour url(button-normal.png);
  color: colour;
}
a.button:hover {
  background-image: url(button-hover.png);
}
a.button:active {
  background-image: url(button-active.png);
}

HTML Code:

<a class="button" href="/path/to/resource">Text</a>

It would need some tweaking if actually implemented, and it can be used in conjunction with a preloaded strategy. A second technique, which needs no separate preloading, is:

Code:

a.button {
  background: colour url(button.png) 0 0;
  color: colour;
}
a.button:hover {
  background-position: 0 ypx;
}
a.button:active {
  background-position: 0 ypx;
}

with the same markup. This would use a single image split into three sections. The two interactive pseudo-class rules would change the position of the background image to bring the clipped sections into view. Again, this would need tweaking, and isn't always appropriate (particularly with some non-repeating backgrounds). If we're going for simplicity though, I think either of these win hands-down.

Originally Posted by jstgermain

[...] as far as the dreamweaver generated script, that script could have come from anywhere. there are tons of sites out there using the same script, so there is no way to tell that was the dreamweaver script

Other from the fact that it is a stock Dreamweaver script, complete with the typical 'MM_' (Macromedia) prefix?

and it also wouldnt matter.

I beg to differ. The code generated by Dreamweaver is terrible and should never be used by a remotely-capable programmer (as they should be able to write something far better).

as for the type needing to be all lower case? i am not sure.

Technically, no. The type attribute is marked as CI (case-insensitive), but MIME types are traditionally all lower case.

there is no need to try to diss on me [...]

You really need to loosen up. In all seriousness, a thicker skin would also be a good idea because if you get this defensive when there is no insult, I'd hate to see your reaction if one ever did come your way.

Originally Posted by Chrismhen54

[...] the depressated stuff still works [...]

Deprecated features do work, but they doesn't mean that they should be used when there are better alternatives.

Mike

**Twey** · 01-01-2006, 05:33 PM

Originally Posted by Mike

* Why style away the pointer cursor type? It's still a link.

I was just trying to make it look as much a button as possible.

* Links don't have onload attributes.

Ack, I wondered about that.

They also don't have src properties.

That I knew. Just a case of bad logic on my part there.

* As it is, this link will be an inline element, so the width and height properties do not apply. The link would need to be styled as a block-level element, floated, or absolutely-positioned.

What does this mean in terms of background-image? Would the image be resized in order to fit the link?

The type attribute is marked as CI (case-insensitive), but MIME types are traditionally all lower case.

Really? Ah, well, you live and you learn. I always thought it was a rule.

Thread: Button Clickable

Thread Tools

Search Thread

Button Clickable

Bookmarks

Bookmarks

Posting Permissions