confused and dazed Posted December 7, 2011 Author Share Posted December 7, 2011 For some reason after the schooling session... I went with class= along with the hover instead of id= and mouseovers. I didnt go back to the id= and mouseover I guess because the class= hover way of doing it was fresher in my mind after this string. I learned a ton from this string! From you and everyone. It was great! Link to comment Share on other sites More sharing options...
Err Posted December 7, 2011 Share Posted December 7, 2011 To check if your using good standards, you can validate your code and fix any errors. http://validator.w3.org/ Link to comment Share on other sites More sharing options...
JannikL Posted December 9, 2011 Share Posted December 9, 2011 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 More sharing options...
thescientist Posted December 9, 2011 Share Posted December 9, 2011 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 More sharing options...
JannikL Posted December 10, 2011 Share Posted December 10, 2011 wouldn't really say that's simple. It's certainly a lot more overhead for something that already supported natively in the browser.Well, this is just how I made it, which works, so if you guys want to use it, feel free to :-) Link to comment Share on other sites More sharing options...
thescientist Posted December 10, 2011 Share Posted December 10, 2011 you're not implying that you wrote that, did you? Link to comment Share on other sites More sharing options...
JannikL Posted December 10, 2011 Share Posted December 10, 2011 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 More sharing options...
Ingolme Posted December 10, 2011 Share Posted December 10, 2011 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 More sharing options...
JannikL Posted December 11, 2011 Share Posted December 11, 2011 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 More sharing options...
thescientist Posted December 12, 2011 Share Posted December 12, 2011 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 More sharing options...
JannikL Posted December 13, 2011 Share Posted December 13, 2011 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 More sharing options...
Krewe Posted January 7, 2012 Share Posted January 7, 2012 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. 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 More sharing options...
confused and dazed Posted January 7, 2012 Author Share Posted January 7, 2012 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.