View Single Post
Old 02-05-2007, 04:38 PM   #83 (permalink)
Sadu
Contributing Member
 
Join Date: 12-15-06
Location: Auckland, NZ
Posts: 124
iTrader: 0 / 0%
Sadu is just really niceSadu is just really niceSadu is just really niceSadu is just really niceSadu is just really niceSadu is just really niceSadu is just really niceSadu is just really niceSadu is just really nice
Before anyone takes offence to the "noob dreamweaver user" comment, let me explain further...

The Dreamweaver swap image code we see everywhere is as follows...

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];}} } 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>
You are then required to put an onload event into the BODY tag, and also some messy looking stuff on the buttons.

If your site is IT related, you can be sure people are looking at your source code. I often shake my head when I see nice looking sites using this code.

The alternative is to use CSS.

Code:
#menu a { height: 30px; width: 100px; padding: 0 5px 0 5px; background: #ccc url(images/menu.jpg) left top no-repeat; } #menu a:hover { background: #ddd url(images/menu-over.jpg) left top no-repeat; } <div id="menu"> <a href="index.htm">Home</a> <a href="about.htm">About</a> <a href="contact.htm">Contact</a> <div>
This way we get the same effect, but it's way cleaner. Javascript is not required, and the CSS tucks nicely into your external file. Piece of cake to maintain later on, easy to copy-paste another button onto your menu. The result is rollover navigation that is fast, lightweight, easy for search engines and users to use, and easy to maintain.

So yeah, while the Dreamweaver code was cool 5 years ago, I think people can do better these days. I don't mean to say people who use the dreamweaver code are noobs, rather they should take some time to look at the alternatives because it's a big improvement. Happy to help out with this if you have any questions.
__________________
SEO Blog
Sadu is offline   Reply With Quote