Behind the Magic

This page is all about my coding, you know... HTML, CSS, web design, the sort of stuff I only talk about with other geeks of a similar nature.  Yes, I am a coding geek and proud of it!  I am writing this page to explain all the code I use. One of my pet peeves is when people attempt to hide their code.  C'mon!  WTF dude, don't be an asshole, it's not like we're yelling to see a woman's tits, just show us your code.

My old site was a heavily tabled thing.  My new site, this one, still is.  I am NOT won over by cascading style sheets.  CSS is great for type and such but when it comes to placement on an active website and browser incompatibility forget it... I'm one for the strictness and fluidity of tables.  I liked my old web design because of it's unusual javascript rollovers but something was missing.  Then I found musician John 5's website and imagined what his site would look like if it combined my graphic use of mouseovers , the idea of my MAAT amplifier knobs as navigation, the idea of a mouth watering N.L.P. symbolic icon as a home page link, and BAM!  The idea was born with a bit of RIFF tinkering from metacreation's Painter 5.0 in the form of creating a master template for the top banners.

Some people may be wondering why I have an entry page on my website.  I use that page as a delay.  The average visitor is stopped by the combination of the seemingly simplistic (it is NOT) graphic and the strangely incompatible definition of what "Coffee Cup" really is.  In reading the intro they are delayed long enough for my javascript rollovers to load in.  Now if you consult my source code you won't find anything except the mouseover commands because the main javascript is kept in an external file.  Pulling from an external file speeds up load times when the script is used over and over again over many page views.  To view that external javascript file place this URL in your browser:  http://www.kendwebber.com/kensrollovers.js

Notice that in the external js script you don't use the <script></script> tags, which you would normally use if you included the scripting on individual pages.  

The onMouseover command is where the magic is.  All I'm doing is using the power of simple coding to switch out two similar but different images, as seen here in the left image and at right.  The secret is you have to name your images (as in name="giveitanamehere") in the mouseover code and list the source in the javascript.

As for the images themselves, talking about the amp knobs here, that's exactly what they are.  They are knobs, rendered in 3D using a 3D modeling program called Carrara, version 3.0.  I had to model these knobs in Carrara, then stage them in a proper manner using the right lights, lighting, and reflections.  Once staged, I then rendered a high resolution version of the knobs as they are when no mouse is over them.  I then changed the position of the knobs, the color of the labels, and the lights, and rendered another image for when the mouse glides over the knobs.  Before I leave the subject of the knobs... do NOT be stupid and think you can jack my images.  I will prosecute.  They are copyrighted images © 2008 and stealing is stealing and you have it within yourself to be creative if you try.  Don't sell yourself short, make your brain think.  Take the ideas I've shown you and adapt them for your site in your OWN way and fashion.  Make the coding your own.

As for the donut... Ok, I admit it, I know I'm not supposed to be eating carbs, brain tumor and all, but I made a sacrifice for my art dude.  Uh, yeah... sacrifice.  Damn that was one delicious hole!

My CSS is ridiculously short.  No DIV's.  I use CSS just for formatting my text and links.  DIV's probably work great if you have dreamweaver.  I do not.  I use AOLPRESS, I read HTML, and I use notepad.  That's it... and that makes it extremely hard to work with DIV's.  Hey, I'm an old school "photoshop" slice and dice, fit it to a table, type of guy. To see my css just put this url in your browser and view the external style sheet:  http://www.kendwebber.com/stylesheet.css

And my final trick is a tiny thing called a favicon that you see in IE when you bookmark a favorite site.  There's a free favicon maker online that'll make you a free .ico file. That URL is here:  http://www.favicon.cc/

All you do is add the following code in your pages and place the favicon in your main directory and the rest is magic.

<LINK rel="shortcut icon" href="http://kendwebber.com/favicon.ico" type="image/vnd.microsoft.icon" />
<LINK rel="icon" href="http://kendwebber.com/favicon.ico" type="image/vnd.microsoft.icon" />

I juggle so many different hats at www.kendwebber.com that I'm kept quite busy.  I just finished a book and I'm currently working on my next project but if the price is right and the right people come along (established rock bands only) I can do CD art, graphics, photography, web sites, just contact me.  

.

Cross your eyes to see the above image in full stereoscopic 3D!
Notice the knobs on my web pages come from my Maat Amplifier.