Jump to content

Highlighting A Button With A Mouseover Event


confused and dazed

Recommended Posts

I got this feature on my website it is pretty simple. Add this javascript to your head tag:

 <script 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];}}} 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>

Body tag should look like this:

<body onLoad="MM_preloadImages('Startside-knap_MouseHover.png','Hvem_er_vi-knap_MouseHover.png','Regn_det_ud-knap_MouseHover.png','Kontakt_os-knap_MouseHover.png')" align="center">

For the buttons, code should look like this:

<a href="Homepage.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','Homepage_MouseHover.png',1)"><img src="Homepage-knap_NoHover.png" alt="Homepage" name="Image5" width="241" height="93" border="0"></a><a href="Who_are_we.html"><img src="Who_Are_We_MouseHover.png" alt="Hvem er vi?" name="Hvem Er Vi?" width="241" height="93" border="0"></a><a href="Calculate_it.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Regn_Det_Ud','','Calculate_MouseHover.png',1)"><img src="Calculate_NoHover.png" alt="Regn Det Ud!" name="Regn_Det_Ud" width="241" height="93" border="0"></a><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Kontakt Os','','Contact_MouseHover.png',1)"><img src="Contact_NoHover.png" alt="Kontakt os" name="Kontakt Os" width="241" height="93" border="0"></a>

Please note that there are four bottons in this code, which you will have to change out with your own images - nothing in the javascript should be edited. The buttons will be aligned in the center. You will also need a picture of the button when the mouse aint hovering at it, aswell as a picture of the button when the mouse is hovering it - added "mousehover" and "nohover" to my picture names to make that more clear for you.

Link to comment
Share on other sites

I got this feature on my website it is pretty simple. Add this javascript to your head tag:
 <script 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];}}} 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>

Body tag should look like this:

<body onLoad="MM_preloadImages('Startside-knap_MouseHover.png','Hvem_er_vi-knap_MouseHover.png','Regn_det_ud-knap_MouseHover.png','Kontakt_os-knap_MouseHover.png')" align="center">

For the buttons, code should look like this:

<a href="Homepage.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','Homepage_MouseHover.png',1)"><img src="Homepage-knap_NoHover.png" alt="Homepage" name="Image5" width="241" height="93" border="0"></a><a href="Who_are_we.html"><img src="Who_Are_We_MouseHover.png" alt="Hvem er vi?" name="Hvem Er Vi?" width="241" height="93" border="0"></a><a href="Calculate_it.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Regn_Det_Ud','','Calculate_MouseHover.png',1)"><img src="Calculate_NoHover.png" alt="Regn Det Ud!" name="Regn_Det_Ud" width="241" height="93" border="0"></a><a href="Contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Kontakt Os','','Contact_MouseHover.png',1)"><img src="Contact_NoHover.png" alt="Kontakt os" name="Kontakt Os" width="241" height="93" border="0"></a>

Please note that there are four bottons in this code, which you will have to change out with your own images - nothing in the javascript should be edited. The buttons will be aligned in the center. You will also need a picture of the button when the mouse aint hovering at it, aswell as a picture of the button when the mouse is hovering it - added "mousehover" and "nohover" to my picture names to make that more clear for you.

wouldn't really say that's simple. It's certainly a lot more overhead for something that already supported natively in the browser.
Link to comment
Share on other sites

you're not implying that you wrote that, did you?
No I did not write all this myself - I simply used Dreamweaver, which has the function to make these "highlight" buttons.If you got dreamviewer youself, it should be named something like Rollover image.
Link to comment
Share on other sites

Those dreamweaver libraries were created in a time when CSS wasn't supported properly in all browsers.Maybe almost a decade ago. These days, basic CSS techniques do the same thing, more effectively and with less code.

Link to comment
Share on other sites

Those dreamweaver libraries were created in a time when CSS wasn't supported properly in all browsers.Maybe almost a decade ago. These days, basic CSS techniques do the same thing, more effectively and with less code.
Well, I just gave him my input, and a solution to his problem :-)In my opinion, if it works, it doesn't matter how long the code is :)
Link to comment
Share on other sites

In my opinion, if it works, it doesn't matter how long the code is :)
no offense, but that's certainly not exactly the most convincing argument that I could ever expect any reasonable developer to give. I understand we are not all on the same level here, and we are all here for different reasons, but we do try and emphasize best practices and that there are less cumbersome solutions for something so simple. Yes it works, but at what expense? Not trying to start a debate, but helping to explain to the OP both sides of the coin.
Link to comment
Share on other sites

no offense, but that's certainly not exactly the most convincing argument that I could ever expect any reasonable developer to give. I understand we are not all on the same level here, and we are all here for different reasons, but we do try and emphasize best practices and that there are less cumbersome solutions for something so simple. Yes it works, but at what expense? Not trying to start a debate, but helping to explain to the OP both sides of the coin.
If you aint trying to start a debate, then don't :-PI am aware that this code is very long, but for me it took no longer than 15 minutes using dreamweaver to come up with it, so in my opinion it is good :-)
Link to comment
Share on other sites

  • 4 weeks later...
If you aint trying to start a debate, then don't :-PI am aware that this code is very long, but for me it took no longer than 15 minutes using dreamweaver to come up with it, so in my opinion it is good :-)
I just want to give a few tips that I find useful if you want to learn more and progress as a developer...1) Steal as little code as possible. - This means don't copy and paste code you find off the internet. You may look at it, but don't touch. Read it over, understand what parts are doing what, and then code it yourself. If you successfully do that you learned how to do it yourself and can likely remember how to do it for a later project. If you fail to code it yourself from reading the example, read the example over again and try again, failing helps you learn. 2) A rule I live by in school and when I am helping students, NEVER EVER, EVER, use Dreamweavers Design tab. I am a firm believer that you should never use it to insert code, insert text, pictures etc. By using design tab you are: a) Breaking rule #1. B) Not learning a single thing. And this is why you are here right? To learn the code? 3) Listen to people on this forum. Understand what they have to say. Scientist, Foxy (Ingolme), JustSomeGuy, and Dsoneuk those are a few I can name off the top of my head. Those guys/girls can help you become a better coder/developer. Don't come on this forum thinking you have the right answer and if anyone challenges that they are an idiot. Because truth be told, your code can always be improved. ~Krewe
Link to comment
Share on other sites

Don't pirate code... this is a good rule to live by. It has made me stronger but I still make really stupid syntax errors - I hope I am not the only one. There has only been one time I copied and paste code... I still don't completely understand how it works but it does. I keep it in my current project because I just cannot figure out how to do it otherwise. Thanks for taking the time to write all that out. One other thing I am learning is that there are 1000 ways to code something so make it your style...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...