Web Style Press, Best Practices from all the Web, Build Better Websites » Tricks http://www.webstylepress.com Web VS Style Mon, 26 Dec 2011 10:35:53 +0000 en hourly 1 http://wordpress.org/?v=3.3 Use Any Font in Webpages As Text http://www.webstylepress.com/use-any-font-in-webpages-as-text/ http://www.webstylepress.com/use-any-font-in-webpages-as-text/#comments Fri, 23 Jan 2009 10:06:43 +0000 Hiroshi http://www.webstylepress.com/?p=481 Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> use-any-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.

Using FLIR to display any font in web page is even easy. Here they have got complete instructions for just that.

I have tried type face method and here is its example to download.

Type Face Example Download

Related Resources

Facelift
Novemberborn
Implementing sIFR for smoothness of fonts in webpages
http://typeface.neocracy.org
http://nettuts.com/javascript-ajax/how-to-use-any-font-you-wish-with-flir/

Use Any Font in Webpages As Text is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/use-any-font-in-webpages-as-text/feed/ 0 Simple RollOver Swap Image http://www.webstylepress.com/simple-rollover-swap-image/ http://www.webstylepress.com/simple-rollover-swap-image/#comments Tue, 28 Oct 2008 09:11:47 +0000 Hiroshi http://www.webstylepress.com/?p=361 Simple RollOver Swap Image is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> 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.

This is the implementation of Easy and Simple Image Swap by Jehiah Czebotar.

Create a js file i.e. rollover.js and put following code in that:

function SimpleSwap(el,which){
  el.src=el.getAttribute(which || "origsrc");
}
function SimpleSwapSetup(){
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;
    // preload image
    // comment the next two lines to disable image pre-loading
    x[i].oversrc_img = new Image();
    x[i].oversrc_img.src=oversrc;
    // set event handlers
    x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
    x[i].onmouseout = new Function("SimpleSwap(this);");
    // save original src
    x[i].setAttribute("origsrc",x[i].src);
  }
}
var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}

Include it in web page like this:

<script language="javascript" type="text/javascript" src="rollover.js"></script>

Finally place your image like following.

<img src="ss_img.gif" oversrc="ss_img_over.gif">

oversrc will handle the hover state of image. Now you will just place image and then point its hover state image in oversrc and you are done.

Download Simple Image Swap Example

Simple RollOver Swap Image is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/simple-rollover-swap-image/feed/ 2 Auto Resize Browser Window To Image Size http://www.webstylepress.com/auto-resize-browser-window-to-image-size/ http://www.webstylepress.com/auto-resize-browser-window-to-image-size/#comments Sat, 27 Sep 2008 00:32:48 +0000 Hiroshi http://www.webstylepress.com/?p=100 Auto Resize Browser Window To Image Size is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

]]> This script is typically best for pop-up windows where you want to display random images on request. It will allow browser window to auto-fit according to the image size.

Add this script into head section of web page:

<script language="javascript">
<!--
var i=0;
function resize() {
  if (navigator.appName == 'Netscape') i=40;
  if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+80-i);
  self.focus();
  self.moveTo(170,50);
}
//--></script>

We just wrote a function named as resize. Call this function in the body tag of the popup page.

<body onload="resize();">

This function will serve the purpose and on page load it will look for the image size and will resize the browser window according to the image size.

This script is for popup page at which image is placed. Call the popup page with no toolbar or menubar as decsribed below:

<a href="#" onClick="window.open('popup-page.html', '', 'toolbar=0,menubar=0,location=0,left=0,top=113,screenX=0,screenY=100,scrollbars=yes'); return false;">Launch popup</a>

Download Window Resize Script

Auto Resize Browser Window To Image Size is a post from: Web Style Press, Best Practices from all the Web, Build Better Websites

Related Posts

]]> http://www.webstylepress.com/auto-resize-browser-window-to-image-size/feed/ 0