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
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
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>
Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
you will need to insert the following code in to the head of the document:
and you will need the following code for the buttonHTML 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>
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.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>
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.
Last edited by jstgermain; 12-31-2005 at 10:00 PM.
Thanks, jstgermain, that worked.
Good Times All,
Chrissy
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?I feel his is a little more complex,
"language" is deperecated, and "type" needs to be all lower-case.Code:<script language="JavaScript" type="text/JavaScript">
Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
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
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.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";
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.
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
Oh, I wasn't, don't worry. I was just slightly incredulous, comparing the sizes of the two scriptsthere is no need to get mad at me twey.
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.The case doesn't nesscarrly matter (strange spelling today), and the depressated stuff still works, in most cases that i have encountered.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.you have to enter the image name in for each image in the script likeAs 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.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.
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 understandthere 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.![]()
Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
A couple of notes and corrections on that to start with:Originally Posted by Twey
An alternate, entirely CSS approach would be:
- 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.
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); }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:HTML Code:<a class="button" href="/path/to/resource">Text</a>
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.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; }
Other from the fact that it is a stock Dreamweaver script, complete with the typical 'MM_' (Macromedia) prefix?Originally Posted by jstgermain
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).and it also wouldnt matter.
Technically, no. The type attribute is marked as CI (case-insensitive), but MIME types are traditionally all lower case.as for the type needing to be all lower case? i am not sure.
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.there is no need to try to diss on me [...]
Deprecated features do work, but they doesn't mean that they should be used when there are better alternatives.Originally Posted by Chrismhen54
Mike
I was just trying to make it look as much a button as possible.Originally Posted by Mike
Ack, I wondered about that.* Links don't have onload attributes.That I knew. Just a case of bad logic on my part there.They also don't have src properties.
What does this mean in terms of background-image? Would the image be resized in order to fit the link?* 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.Really? Ah, well, you live and you learn. I always thought it was a rule.The type attribute is marked as CI (case-insensitive), but MIME types are traditionally all lower case.
Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!
Bookmarks