Creating Image Hovers

Beautiful effect Upon Image Hover: Now you Can Create them Also !

I know that many of you visit a lot of beautifully designed web-sites and wonder : "Now how did they do that ? " . Well, to be honest : it requires a great deal of work , effort and an unlimited source of knowledge to achieve most of the effects you see on certain websites . These web Designers have spent a great deal of time sitting behind a desk , and they have also devoted a great amount of time reading codes !. No , I hate to break the news to you , but : Nothing comes easy & without a price : Time & Dedication to learning something you actually love .

Now I realize that your intention is not set on becoming another Computer Wiz Kid Genius as the likes of Bill Gates or " Mr. Apple " himself Steve Jobs [ Exec. C. E. O , Sun Systems & borderline Genius ] - therefore I will not torture you with detailed source codes and the like . I realize that most of you just want a nice looking page , with a few Tweaks ( per say ) ; and before I get to the meat & potatoes of this next little handy code here , I would like to inform any one of you passing through this page [ blog site ] , that if you require deeper & more complex codes , help with tweaking , or just a simple Template , please do yourself a big favor and go directly to the Source Code & Design Guru who offers all of his services FREE , and will respond to all and any questions you may have regarding complex codes , tweaks and anything Web Related to suit your needs . he will respond to your inquiry or problem immediately ( believe it or not ) . Visit his site & you will asses for yourself that I am not over-exaggerating . His name is Zen , he is 18 yrs Old and one of the best designers of his age group , and also the sweetest young man you will have the priviledge of meeting . His site is also on Blogger , so please once you get there , don't forget to bookmark his site for future reference & if you'd like , you can join - after all : there's no Fee and it's Free ! . Now how many things in this life are free ? hhhhmmmm..not many , since I checked lately . So, here you go - once you finish reading this , head on over to Zen and browse everything he's got to offer all you Bloggers out there in cyberspace .

Now , lets get down to the meat and potatoes of our present situation . So, you've seen some sites with some really nice effects , such as : when you hover [ pass your mouse ] over a link or an image they light up or change a different color and you want to achive the same effect but you dont know how right ? Ok, this is going to be so simple - much simpler than doing your income tax , I assure you !
Why will it be so easy ? Because : I will not make you sit behind a desk for a couple of years , nor make you read codes ! Now isnt that nice ? All you will have to do is look at the example below , hover [ pass your mouse ] over it , and once you stop marveling at it , you can just copy the code I will place here , insert your own images ( plural ) and just paste into wherever you want the image to appear [ such as an HTML Add a Gadget in your Page Elements section ] or directly into your Page Source HTML , ( if you really know what you're doing ! ). Ok, now that we have gotten the logistics out of the way let's move on .

Look at the image example below , and hover over it to see what an image Hover is :

When attempting to create an image hover , we require 2 separate images - always ! Look at the 2 separate images used here for our example :

Our First image must be a B& W image , or any other color of your choosing :




<img src="http://img145.imageshack.us/img145/4613/79181073.png"/>






Our Secondary Image must be a color image , and that can also be any other image color you wish to effect:

<img src="http://img261.imageshack.us/img261/2292/27094269.png" border="0">

Now by combining both of these images and giving them a command line of code such as onmouseover and onmouseout our two images take on a different light ( if you will )
Now for the instructions of how to apply which image & where , and then you can just copy the code and replace the images above with your own :

<a href="http://YOUR_URL_HERE.com" onmouseover="nameyourimage.src=
'http://img145.
imageshack.us/img145/4613/79181073.png '" onmouseout="nameyourimage.src='
http://img261.
imageshack.us/img261/2292/27094269.png'"
><br /><img src=
"http://img261.imageshack.us/img261/2292/27094269.png" name="nameyourimage" border="0" /></a>

Do you see the different colors & the images that apply to them ? This means that you will repeat the " Blue Image Code " twice , and the " Pink Image Code " once , then all which is left is the " Orange Image Code " if you wish to apply a link to your image . Therefore , take an image of your choice , any image . One image , the Pink Code , must be a B& W image . The secondary image in Blue , must be a color image , and this will be the image which will be displayed upon link hover . You can find images as well as an image editor to achieve the color stripping of images @ such places as , Photobucket as well as a more advanced Online Image Editor such as Blibs . Once you have prepared the image of your choice , just copy the resulting URL 's and paste into the appropriate provided colored codes here. Copy and save the above code to your Notepad in your email for future reference until you know it well & have no use of it any longer . I will not bother to give you the CSS version of this code , we shall save that for next round . Now , go get your image and the code & apply some nice effects to your images . Have fun & smile - this could have been a JQuery code - and you wouldnt want that now would you ? Smile , Mootools & JQuery do love you ..really they do ! :)

A Site For Sore Eyes

The New Design Machine on the Block of the www. w/ You in Mind "

There are websites , and there are ' Websites ' - just as there are designers , and then there are what I would like to term : Innovators of Design . Well, that's exactly what this next & new team of ' web designers ' are , Innovators . Of course you have seen them all you might say , but truly , you havent - and I am here to attest to that . There are great web- designers out there of course - but somehow , they all seem to keep it down to a sort of " Replication Process " . Meaning : they somehow emulate & replicate works of other designers & seem to reproduce just shadows of someone elses works . This tends to get boring & mundane after a while , leaving the imagination to plummet into a void . Well, these next Designers seem to stand apart from the rest . They possess a gritty - grunge- Rock - edge to their work which makes it bear that ' originality & fresh new feel ' to everything they do .



Their work is in no way mundane or overshadowed by someone else's style . If originality is the key phrase to be had here , then these guys have it in over abundance . Just as they state on their profile : They have a " Mission " ! what is their ' mission ' you ask ? Something which I have not seen any other Web Designers out there on the www. state , and that is : ( as they say ) : " To make you look good " ! I like that . When was the last time you had someone tell you they want to make you look good ? I don't know about you , but as far as I'm concerned , I haven't heard any one aside from my last hair-dresser tell me that . What I also like about these guys is the other part of their statement as to : " Why they do what they do " (?) . Their reasons , are not solely based on profit ( money to some of you capitalists out there ) - but instead : because they harbor a love and respect for creativity and art .

Yes , I do believe with conviction that these guys would do it for free if they didn't have rent to pay - but as all of you are aware : times are hard , so please do give to those who " make you look good " ! The design company goes by the original title of ECTOMACHINE , and they are based in Tulsa - and yes they are so new , I was busy peeling the plastic bubble wrap off their site . Now I have always known that Tulsa is Gods Country , but I never realized that the ' Demi Gods of Web Design ' reside there ! and as far as , being ' New ' does in no way imply these guys are ' new at their craft ' ok, so lets not get tangled up in the bubble wrap here . When I stumbled onto their site , I will not deny remaining there for a good hour or so , oggling over all of their well designed works . Oh yes , these guys are so finely skilled , they must have been surgeons in a past incarnation , and from what I am able to gather - they must surely be the envy of every other web designer out there at the moment & probably for a long time to come , as I am also sure that their imagination will not lack or falter as time progresses . I love the gritty - grunge - effect of their site , and if I ever wanted a website for my own personal reasons , these would be the guys I would hire to create something for my Rock N Roll tastes .

What I like about them is that they make you feel " in control " of your site ( or the site which you have in mind ) . They seem to be concerned with ' your needs ' and they don't seem to bear a ' god complex ' about their design abilities ( whereas : most designers , will forfeit your opinions / needs & create what they have in mind ) . No, I believe these guys do have the best intentions concerning their work ethic : YOU ! Their talents are not limited strictly to mere web design , ( if one can deem Web Design a mere factor ) , as they are skilled at a plethora of other web design applications and their talents range in :

• 
  
• Adobe Photoshop
• 
  
• Adobe Illustrator
• 
  
• Adobe Dreamweaver
• 
  
• Adobe Fireworks
• 
  
• Adobe ImageReady
• 
  
• WordPress
• 
  
• CODA
• 
  
• Microsoft Visual Studio
• 
  
• Microsoft Expressions
• 
  
• Google Analytics
• 
  
• & they offer their talents in such areas as :
• 
  
  • 
    
  • Web Design
  • 
    
  • Identity / Branding
  • 
    
  • Music Packaging
  • 
    
  • Clothing & Merch Design
  • 
    
  • CSS & XHTML
  • 
    
    
  • Custom Myspace Profiles
  • 
    
  • Ajax
  • 
    
  • Jquery

Now I bet you didn't expect so much talent wrapped up in all that bubble wrap now did you ? But yes , here it is ! With their skill at XHTML , I wish they would design a template or 2 , maybe 3 ..for the Blogger Platform - it would sure be a refreshing break from all of the " clone- templates " available out there , and I would be pleased beyond words if they did so . Now do yourself a great big favor : get off this page , and go visit ECTOMACHINE's Blog site , so you can peel off the rest of the bubble plastic and get a feel for these WEB GURUS yourself , and I am certain that you will remain on their site for about a good hour or so looking over their explosive work , and getting to know a little bit more about the great and mighty New Design Machine on the www ! I promise you you wont be disappointed in the least ( if you have any sense of style that is ..ehem..) . Now if you're a musician , and you haven't hired these guys to create your website - then all I have to say is : RUN to their site , and beg them to design your website - and oh yeah ...give them a lot of money !!! Cause when they get through w/ your website , you can expect your tracks to reach the top of the charts & your career to get out of the slumping state its been in ! Now what are you still doing here ? Go on , go !!! ( and come back & tell me I was right on target ok ? )
Catch you in cyberspace & dont forget to smile , Mootools & JQuery do love you :)