Hover Button/Rollover Image Generator

Guys i am learning PHP and this is one of my first release (Our team noes PHP i am into GFX so im just trying to learn)

This is a rollover image maker/generator which can be used to make buttons or several other things.

Hover buttons are used worldwide.One of the examples i clearely remember is the site of EARTH HOUR

http://www.earthhour.org/home/

Here this sign up button uses hover button.

Buttons like PHOTO,VIDEO,BLOG,TWITTER also use hover button.

Wondering how are they made?

They are made by using JS.

I have made this script in which it asks you for the orignal image and the rollover image that is when cursor is placed on the image.It also asks for a link in which if you want to navigate to some place after clicking the image you navigate basically <a href

Your work is made easier

Now its my time to leave
Enjoy:-http://praat33k.cn/rollover.php


If you need the script then contact me via PM

 

Well... I'm sure your code works just fine, but... WHY? Why in <name of deity> would you make something like that using javascript? It bloats the code, it's useless if the user has turned off javascript, and it's completely unnecessesary: you can do just the same using one simple imagefile, and CSS.

Code like this:
CSS:

a {
background: url(image1.png) 0px 0px no-repeat;
}
a:hover {
background: url(image1.png) 0px -29px no-repeat;
}

Code (markup):

and the html-code for this would simply be:

<a href="http://blahblah.something">Text here</a>

Code (markup):

That will produce the exact same hover-effect.

The :hover-attribute can also be used on other html-entities of course.

About 5 lines of code, instead of... lots of javascript.

 

lol..i made this offline...using dreamweaver cs3..there is one option of hover buttons which uses js...so thats y i used this thing

 

Still, bad practice (or, good practice, in that you've learned how to do something), but still not a good way of doing it on a webpage. Using Dreamweaver is in my opinion bad, unless you already have an understanding of what you are doing, and can pull up the codeview and clean the code before publishing. If you only use the WYSIWYG part of Dreamweaver, you get bloated code, with bad form and more often than not using HTML-codes and structures that should have been given up on ages ago.

Code by hand, using TextPad or NotePad++ or something similar, and learn what you are doing.

 

lol..dude..im just in Photoshop...but not into coding..learning css,php so it takes time

 

As I said - it's a good practice run, and you've probably learned something from it (and the code itself was function fine, so nothing wrong in that department) - just that it wasn't the "right way" of doing it

Doing stuff "the right way" when it comes to web coding can potentially save you from future headaches, and definitely help maintain the codebase. Not to speak of future-proofing - which one can of course never be sure of, but if one codes by standards, using the simplest solutions available, it's usually safe to say the site/page/app will be working in the forseeable future.

As for learning more: I recommend starting "small" - learn HTML (preferably some STRICT form of HTML coding - either normal HTML or XHTML (I'm a fan of the latter myself)) and CSS. Then som javascript and some serverside language - PHP, ASP etc.

 

Thanks Dude!!