Country Select – On Change Country Flag Image Transition
Dec 31, 2009 Javascript, Tricks
This is a very easy example on country flag change. If you have got a form with country selection field then you can easily display a flag related to that specific country on country selection made by user. In this example all the flags images are placed in a folder named as ‘flags’ which is in folder named as ‘images’. You should have a folder ‘images’ at website root and a folder ‘flags’ containing all the flags in png file format in it. Give this script a go. This is really cool and easy way to create a user friendly selection form field.
Use Any Font in Webpages As Text
Jan 23, 2009 Advanced, Javascript, Tricks, fonts
Now using javascript we can use any font in web page by using techniques such as Typeface and Facelift Image Replacement (or FLIR) or sIFR. sIFR needs flash while others do not. sIFR is for smoothness look of fonts.
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS and get original smooth font look whatever you specify, even if the user machine have not those fonts. This technique is limited yet with limited fonts support and also it is recommended to use it for title of headings of web page. All the font at the web page using this technique can heavy things up at server and page might load very slow. Even then it is cool. Type face is easy, flexible and open source.
Tags: essential, facelift, fonts, HTML, Javascript, js, open source, Resources, smoothness, style, text, Tricks, typeface
Change Image Opacity Easily Using CSS or JS
Jan 23, 2009 CSS, Javascript, Tricks
We can simply use CSS alone to reproduce opacity effect that have traditionally been done using scripting. The advantage of looking to CSS instead is obvious – much more lightweight and easier to implement. We can use this method where we need to use a dim or faint version of image, while when some one places mouse over it, then image comes sharp, clear and bright.
Tags: blur, CSS, effects, filter, image effects, Javascript, js, moz, ns6, opacity
Simple RollOver Swap Image
Oct 28, 2008 Javascript, Tricks
Adobe Dreamweaver offers a way to Swap Images by adding javascript through its behaviours which uses following functions:
function MM_swapImgRestore() function MM_findObj(n, d) function MM_swapImage() function MM_preloadImages()
And at OnMouseOver and OnMouseOut events you can swap images, but that method adds a lot of javascript code into your pages.
There is another very simple and easy way of swapping images. You need a single js file of 1 kb that will be sufficient for all the pages of your website. Moreover implementation of code is as easy as think and done.
Tags: Javascript, swap, Tricks
Create Rounded Flexible Div Without Images
Oct 26, 2008 CSS, DIV, Javascript, Tricks, Web Tips
Nifty Corners Cube is a solution to get rounded corners without images, and this third version is build by three main components:
Embed SWF Files Via Javascript – Active Content Script
Oct 19, 2008 Adobe Flash, HTML, Javascript, Tips, Tricks, Web Guidelines, Web Tips
Previously We used to embed flash files in web pages via simple embed method which pops up flash settings alert or Flash Settings Manager. Following way is to embed Flash movie (swf file) in web page using Javascript which will play for all browsers and will not alert you for flash settings.
Tags: active content, embed, flash, flash tips, swf