Now I have recently been looking for a nice trick on hiding the image url, or source that I have put up on a page. Everyone who works online and posts their image/photo on their website or blog, are scared of the thought that their work may get stolen or get hot linked by anyone. Unfortunately there was no good way to do that (until now) and I decided to come for the rescue of other people like me.
In the following tutorial 'm gonna show how to completely protect a image in-spite of displaying the image into the webpage.
First create a .css file and paste the following code in it and save it:
#fp h1 a{background:url('/image.png') no-repeat;height:208px;width:155px;display:block;outline:none !important;}
#fp h1 a span{visibility:hidden;}
In the above code, change the "/image.png" with the location and name of your own image.
(For noobs) You can alter the height and width of the image by changing the variable in the 'height' and 'width' part of the second line.
I've named my .css file as style.css
Now at the <head> section of your webpage, where your image has to be displayed, we'll link our .css file we just created above, like this:
<link rel="stylesheet" href="/style.css">
Now finally we'll do the coding for displaying the image by Creating a <div> section at the place where you wanna display your image, the whole code may look something like as follows:
<div id="fp">
<h1><a href="/page" title="Some Title"><span>Some Text</span></a></h1>
</div>
Done.
Ofcourse you may dig around the above code and change it as your liking.
Now remember: There are soo many different ways to steal a image from a website, I've just shown to eliminate one (which is one of the most common way of stealing), That doesn't mean that its 100% safe. The above trick will repel all the noobs and newbies, or basically anyone whos not good with computers from copying, linking or downloading your image.
In the following tutorial 'm gonna show how to completely protect a image in-spite of displaying the image into the webpage.
First create a .css file and paste the following code in it and save it:
#fp h1 a{background:url('/image.png') no-repeat;height:208px;width:155px;display:block;outline:none !important;}
#fp h1 a span{visibility:hidden;}
In the above code, change the "/image.png" with the location and name of your own image.
(For noobs) You can alter the height and width of the image by changing the variable in the 'height' and 'width' part of the second line.
I've named my .css file as style.css
Now at the <head> section of your webpage, where your image has to be displayed, we'll link our .css file we just created above, like this:
<link rel="stylesheet" href="/style.css">
Now finally we'll do the coding for displaying the image by Creating a <div> section at the place where you wanna display your image, the whole code may look something like as follows:
<div id="fp">
<h1><a href="/page" title="Some Title"><span>Some Text</span></a></h1>
</div>
Done.
Ofcourse you may dig around the above code and change it as your liking.
Now remember: There are soo many different ways to steal a image from a website, I've just shown to eliminate one (which is one of the most common way of stealing), That doesn't mean that its 100% safe. The above trick will repel all the noobs and newbies, or basically anyone whos not good with computers from copying, linking or downloading your image.
