Tuesday, March 30, 2010

How to Protect your imgaes in website?

The usual way of displaying images in a blog post/widget is very easy but these images can be stolen or copied easily too. Even a novice user can simply right click on an image to save it on to his computer, which is eventually passed on to others and finally appears in some other blog, website or magazine.


Most common reasons/ways of stealing images:
1. From Google Image Search
2. By Right Click -> "Save Image As..."
3. By Copying image address from "Page Source"

Methods To Protect Your Images:

Methods you should not use:
1. Watermarks spoil the overall look of the images, so I will not suggest you to use big watermarks over the images, unless you are selling the images from your blog/site (where only a thumbnail of the image is shown with a watermark on it) [Like This One].

2. Disabling right click is one of the 'infamous' methods as the pop-ups doesn't look nice.

Methods You Should Use:
METHOD #1
By using JavaScript encryption you can not only protect your images, but many other html widgets too: Read more about html encryption here.
Because of this encryption, nobody can find your image address from the page source.

METHOD #2
The other famous method to protect you images from getting stolen is to use CSS instead of pure HTML. Although even in this case, images can be easily stolen (by taking screenshots and editing them), but because of the lengthy process most of the content thieves will definitely drop the plan of taking pictures from your blog. This technique will also protect your images from getting indexed and shown in Google image search results.

So instead of using a code like this;

<a href="http://bloggerstop.net"><img src="http://i49.tinypic.com/19p9ad.jpg"/></a>

Use this code:
<div style="background:url(http://i49.tinypic.com/19p9ad.jpg);width:300px;height:200px;">
<img src="http://i49.tinypic.com/ol2tg.png" width="300" height="200"/><span style="float:left;color:white;margin-top:-200px;"> © Your_Blog</span></div>

Try saving the image below (protected by the CSS method):


© Your_Blog

NOTE: Remember to change the width and height attributes according to the image you are using (at four places in the code above). Also the margin-top attribute should be equal to the height of the image.

The above image is immune against these methods:
1. Right click and "Save Image As..." or "View Background Image"; because the original image is being used as a background image (by CSS) and on top of it another TRANSPARENT image is being used [code highlighted in BLUE], so if anyone tries to save this image (or copy the image address) he will be surprised to see a blank image instead of the one he actually wanted.

2. The image will not be indexed by Google, so it will NOT appear in Google Image Search.

But, of course you can get it from the page source. (so read the next method)

METHOD #1 + Method #2 = Best Protection Method
So presently try a combination of the CSS method and HTML encryption described above, to show & protect your images on the web.

So finally, after HTML encryption of the code from METHOD #2, we get this code:
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%63%65%6E%74%65%72%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%62%61%63%6B%67%72%6F%75%6E%64%3A%75%72%6C%28%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%31%39%70%39%61%64%2E%6A%70%67%29%3B%77%69%64%74%68%3A%33%30%30%70%78%3B%68%65%69%67%68%74%3A%32%30%30%70%78%3B%22%3E%0A%3C%69%6D%67%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%6F%6C%32%74%67%2E%70%6E%67%22%20%77%69%64%74%68%3D%22%33%30%30%22%20%68%65%69%67%68%74%3D%22%32%30%30%22%2F%3E%0A%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%20%6D%61%72%67%69%6E%2D%74%6F%70%3A%20%2D%32%30%30%70%78%3B%22%3E%20%A9%20%59%6F%75%72%5F%42%6C%6F%67%3C%2F%73%70%61%6E%3E%0A%3C%2F%64%69%76%3E%0A%3C%2F%63%65%6E%74%65%72%3E'));
//-->
</Script>

Now this code has all the benefits of METHOD #2 and moreover the image address is also not visible in the Page Source.

Prevent your images from appearing in Search Engine Image search (or simply Google Image Search):
Use this meta tag in the <head> region of your template:
<meta name="robots" content="noimageindex"></meta>


Finally, read some more tricks to "protect your images" and "why you CANNOT protect your images" !!!

Thursday, March 25, 2010

Map Hightlight with Jquery

<html>
<head>

<script type="text/javascript" src="http://davidlynch.org/js/maphilight/docs/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>

<script>$(function() {
        $('.map').maphilight();
    });</script>
</head>
<body>
<img src="images/map_AUS_img.gif"  class="map"   Width="317" Height="247" UseMap="#map_AUS" />

<MAP NAME="map_AUS">
<AREA SHAPE="POLY" COORDS="104,147,105,31,101,30,97,26,92,27,88,28,86,30,84,31,82,33,81,35,80,37,80,40,79,41,77,41,74,39,73,42,74,43,74,45,73,45,72,45,69,44,67,45,65,48,65,52,65,54,58,61,53,64,48,64,43,66,40,68,36,69,33,68,29,69,17,78,16,79,15,78,12,78,11,83,12,85,12,89,10,92,11,97,14,102,14,103,13,104,11,102,8,104,10,109,15,115,15,121,17,121,18,125,18,127,19,129,21,137,23,143,25,147,24,154,24,158,21,162,27,166,30,169,32,170,34,169,40,170,45,166,48,166,52,162,54,162,60,161,68,161,73,161,77,158,78,155,83,153,86,151,89,149,94,149,101,148,104,147,104,147" href="#">
<AREA SHAPE="POLY" COORDS="162,105,104,105,105,31,108,31,112,32,111,30,110,28,112,23,114,19,117,16,121,14,126,14,129,12,125,9,119,12,116,12,115,8,118,7,127,8,134,9,140,12,145,14,149,14,153,12,155,14,156,19,152,22,151,23,154,24,155,27,154,27,151,26,149,28,149,30,150,33,153,35,153,36,154,38,156,38,157,36,163,41" href="#">
<AREA SHAPE="POLY" COORDS="236,123,184,123,183,105,162,105,163,41,167,44,171,42,172,47,175,49,180,49,181,45,184,42,185,35,186,28,185,19,186,14,188,11,188,7,191,5,193,9,194,12,197,16,198,24,200,27,204,28,208,30,208,35,210,39,212,45,213,51,215,56,228,64,233,72,234,77,235,79,238,78,240,79,243,80,242,86,251,95,254,98,257,96,259,98,257,101,257,105,256,112,258,113,258,117,258,119,254,119,252,123,249,124,247,125,247,123,243,122,241,121,238,121" href="#">
<AREA SHAPE="POLY" COORDS="183,194,183,105,104,105,104,146,105,146,108,144,112,143,122,144,125,146,133,148,137,148,138,151,140,152,139,154,141,156,144,160,146,163,146,167,147,169,149,169,151,166,155,163,157,159,158,157,162,154,162,159,161,161,160,163,159,167,156,170,154,170,156,172,160,171,152,175,155,177,161,178,164,176,166,175,168,173,171,175,174,179,174,183,173,185,175,188,178,192,181,195" href="#">
<AREA SHAPE="POLY" COORDS="236,188,238,181,239,176,241,172,242,167,244,161,247,156,253,151,253,147,255,143,256,135,257,130,258,127,259,125,259,118,254,119,252,123,249,124,247,125,247,123,245,123,242,123,240,121,238,121,236,123,183,123,183,166,187,166,190,167,191,170,195,170,200,175,205,179,209,177,212,177,213,179,218,179,220,177,224,177,224,179,226,181,228,185,233,187" href="#">
<AREA SHAPE="POLY" COORDS="183,194,190,196,196,198,199,198,204,193,206,192,206,195,206,196,215,201,219,197,226,192,233,191,237,189,229,185,226,181,223,178,220,177,218,178,214,179,211,177,208,178,204,178,201,175,196,171,192,170,190,169,188,167,183,165" href="#">
<AREA SHAPE="POLY" COORDS="206,212,212,216,218,217,224,214,227,216,228,220,228,226,226,226,226,230,224,231,220,234,218,238,212,236,207,228,208,226,205,221,205,217,205,213" href="#">
</MAP>
</body>

Free Useful GUI iconsets.......Download too!!

Icons are everywhere in a website and their primary purpose of guiding and giving out information to visitors is a highly important one. Other than words themselves, these little graphics within a website that tells you how you can move to the next page, cancel a transaction, checkout the cart and the likes, basically the entire navigation. In a general sense, they act as symbols that allow easier and smoother communication between the webpage and the person interacting with it.
Depending on the web context, icons should be designed in a manner that are pleasing to the eyes, and most importantly, communicate what it is suppose to communicate. Here’s a showcase of 40 Free and Useful Icon Sets for your reference. Full list after jump.

Function Icon Set
128 Icons, they are only available in 48×48px. [via wefunction | Download]

Onebit Free Icon Set
A total of 50 icons. These icons are free to use in any kind of project unlimited times .[via Icojoy | Download]

Onebit Free Icon Set 2
Total of 30 icons, 48×48 in PNG format. [via Icojoy | Download]

WP WooThemes Ultimate Icon Set
The free download contains all 79 icons, sized at 256×256 pixels and available in both PNG and GIF formats. [via WooThemes | Download]

SEM Labs Web Blog Icon Pack
48x 48 icons for use on the front and back-end of the site released under the Creative Commons License. [via semlabs | Download]

Bright!
This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.[via iconeden | Download]

Milky
The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds. [via iconeden | Download]

Iconza Icons
Collection of free icons that can be colored and reduced in size to your taste. [via Iconza| Download]

Basic Set
42 high quality icons for your web application, software or GUI design. Comes in various sizes of 64×64, 48×48, 32×32 & 16×16. [via prokofusha | Download]

MinIcons [via kyo-tux | Download]

Coquette Icons Set
Free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format. [via dryicons | Download]

Coquette Icons Set 2
Improved version of one of DryIcons’ most downloaded and most popular free icons sets. [via dryicons | Download]

Dropline Nuovo [Download]
nuovo
Developers Icons
105 icons (32×32) for your toolbar or anything. Comes in .png, .ICO, .ICNS, .iContainer. [via Sekkyumu | Download]

Circular Icons A themed collection of 100+ 16×16 icons designed by Ben Gillbank, licensed under the Creative Commons Attribution 2.5 License. [via Pro Theme Design | Download]

Web Application Icons Set
20 icons designed specially for web applications, Free Web Application Icons Set is completely Free for both personal and commercial projects in any way you like. [via Webappers | Download]

Mini and Pixel Icons

If large and silky smooth icons aren’t the style you are looking for, how about simple, mini and pixelated one. Such icons can save significant amount of space for your website. Did we also mention their are light in filesize too?
Twotiny- Two icons setsfor websites and web applications. [Download]

Twotiny Expansion Set [Download]

Icons
A free set of over 250 18×18 pixel icons. Each icon was carefully created one pixel at a time using only whole value hexadecimal shades of grey. [via Paul Armstrong | Download]

Tango Icon Library
The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help. [via Tango | Download]

Mini Icons 2
113 10×10 greyscale icons in .gif format. [via brandspankingnew | Download]
mini icons 2
Mini Pixel Icons
320 icons (available in various color theme) for general web design such as: blog themes, forums, eCommerce sites, and CMS application. [via Icondock | Download]

Web Social Icons
30 free web social icons, great for your website and blog. [via seanau | Download]

Microformats
These icons can be used to depict various microformats in webpages or on the desktop.
microformats
512 Pixel LED Icon Set
Designed for web designers/developers by Marcis Gasuns. [via Led24 | Download]

Iconjoy Free Web Development Icons- These icons are free to use in any kind of project unlimited times.
Set #1 [Download]

Set #4 [Download]

Greyscale
40 greyscale icons which each fit into a 34 x 34 pixel area. [via e-lusion | Download]
greyscale
FamFamFam Icons
Silk [Download]

Mini"Mini" is a set of 144 GIF icons available for free use for any purpose. [Download]
famfamfam mini
Flags
247 icons in GIF and PNG formats representing most countries in the world as small pixel icons. [Download]
famfamfam flags
Splashy Icons
470 splashy icons. [Download]

Bitcons
Mini-pixel icon set (16×16 pixels) containing 91 121 individual icons for various subjects. [via somerandomdude | Download]

Bullet Madness
A list of 200 bullets, arrows and icons uploaded by stylegala users.
bulletmadness
Minimalist Pixel Icon Set
[via nclud | Download]
nclud
Fugue
2,225 icons are included in PNG format (16×16 pixel). [via pinvoke | Download]
fugue
Sizcons
Comes in 2 different format: 16×16 version and a 12×12 version. [via randomjabber | Download]
sizecons
Social Media Icon Pack
This icon set consists of 30 (16×16) finely crafted social media icons. They are free to use non-commercially. [via Komodo Media | Download]
komodo
Sweetie
2 sets of cute and clear icons to use in your nifty web application, respectively Sweetie BasePack and Sweetie WebCommunication. [via sublink]
sweetie
Vaga
60, semi-transparent .png icons (16 x 16) ready to use and available for free download. [via tenbytwenty | Download]
vaga