JPEG as a Container

[stevenpetersen]

I was told by one of my friends in a high place that you can make a JPEG into a Container to carry what every you need..... My idea is to put a Java Script in the Container that makes the picture uncopyable to print page and right click..... Also would like to put a note pad into the Image for copywrites information. The Question is........ HOW DO YOU MAKE A JPEG IMAGE A CONTAINER......

[codejoust]

Try this approach:

$(function(){
$('img').each(function(){
$(this).bind("rightclick mouseover mouseout drag",function(){return false;});
$('body').append('<div class="trans">&nbsp;</div>').css({'width':$(this).width()+'px',
'height':$(this).height()+'px',
'position':'absolute',
'top':$(this).offset().top+'px',
'left':$(this).offset().left+'px',
'background':'transparent'});
});
});

(this example using jquery )

[stevenpetersen]

Where does this go? Into the jpeg container, header, or JS file?

This post is a current project

[codejoust]

I'd you can give me a link (Or pm) I might be able to help.
To answer your question, you add it in a

[codejoust]

Correction =

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="path/to/my.js"></script>

and probably in the header.

[stevenpetersen]

Project

[codejoust]

Did you add the code?
My JS file is (sorry, I made a mistake).

$(function(){
$('img').each(function(){
$('<div class="trans">&nbsp;</div>').appendTo('body').css({
'width':($(this).width() + 20)+'px',
'height':($(this).height() + 20)+'px',
'position':'absolute',
'top':$(this).offset().top+'px',
'left':$(this).offset().left+'px',
'background':'transparent'});});
$('img, .trans').bind("rightclick mousedown contextmenu mouseover mouseout drag",function(){return false;});
});

Take that code and put it in a .js file, using the html I provided above in the header to use it (the 2 script tags).

[almostbob]

@media print { img { background:url('./images/copyright.jpg'); } }

<img style="background:url('./images/realpic.jpg')" src='./images/blank.gif' width='width of realpic' height='height of realpic'>
<img style="background:url('./images/anotherpic.jpg')" src='./images/blank.gif' width='width of anotherpic' height='height of anotherpic'>

blank.gif is a 1px transparent .gif image
all images have the same src, the background is the real image
the print styling is generic, can be refined to take a class or id of image to copyright, and allow non-copyright images to print

[stevenpetersen]

Did you add the code? My JS file is (sorry, I made a mistake).

$(function(){
$('img').each(function(){
$('<div class="trans">&nbsp;</div>').appendTo('body').css({
'width':($(this).width() + 20)+'px',
'height':($(this).height() + 20)+'px',
'position':'absolute',
'top':$(this).offset().top+'px',
'left':$(this).offset().left+'px',
'background':'transparent'});});
$('img, .trans').bind("rightclick mousedown contextmenu mouseover mouseout drag",function(){return false;});
});

Did not work for me..... ill leave it up here
im going to try this other one here as well thank you....

[stevenpetersen]

@media print { img { background:url('./images/copyright.jpg'); } }

<img style="background:url('./images/realpic.jpg')" src='./images/blank.gif' width='width of realpic' height='height of realpic'>
<img style="background:url('./images/anotherpic.jpg')" src='./images/blank.gif' width='width of anotherpic' height='height of anotherpic'>

blank.gif is a 1px transparent .gif image all images have the same src, the background is the real image the print styling is generic, can be refined to take a class or id of image to copyright, and allow non-copyright images to print

Got It props too you my friend.....

What about the Print Screen

[stevenpetersen]

Got It props too you my friend.....

there was a problem with the code.......... I did not see at first problem here

left side is your code........ and my first code is on the right......

[almostbob]

What about the Print Screen

dunno how to disable printscreen
don't want to interfere with someones hardware
bad mojo

the background image is in the tif,
it has to download to display,
can make it harder to copy,
but not impossible
I watermark all images, and dump copyright info throughout the exif tables (Irfanview, batch edit and resize)
cant do much more.
the ones that really **expletive deleted** me,
are those who want to link to my files, on my server, and send me dirty email because they cant pull images from the databasethere was a problem with the code.......... I did not see at first problem here

left side is your code........ and my first code is on the right...... You are using width/height to resize an image, bad idea
the image on the server should be optimised, stored on the server at the size it is to display
download a 300k large image, and resize it small
or download a 30k small image
much more efficient
my code was width='width of realpic' height='height of realpic' meant to show resizing wasnt available

[almostbob]

dunno what I did to post the same answer twice

[codejoust]

OK, for what you need, if you wish to resize your pictures in HTML (not recommended, try using PHP gd or Photoshop ETC), you need to use javascript.
And use a print stylesheet to make the .trans class background image a copyright image.

@media print { .trans { background:url('./images/copyright.jpg'); } }

Ensure the path to the Javascript is correct. Currently, it is incorrect.

[stevenpetersen]

I do thank you both and if i get both working I will use witch one sues my needs at the time or both...... i still have not be able to it in the JS. way. What is the name of the JS file just so i have it write?

Thank you steven petersen,

P.S. i keeped on asking about the info you provided do to i wanted to no..... but the tread was asking How to put files or docs into a JPEG like a container.... Meaning if i move the image around on my computer and/or website the docs are in it and cant be seen unless you no how to find them... I will give props to the JS. script if it works, and i will give props for the Jpeg container.

Thanks again

[HI2Japan]

Here is a fast simple way to do it. Rename the extension from .doc to .jpg. Now it wont do anything unles syou change it back to the correct extension ;)

[codejoust]

I do thank you both and if i get both working I will use witch one sues my needs at the time or both...... i still have not be able to it in the JS. way. What is the name of the JS file just so i have it write?

Thank you steven petersen,

P.S. i keeped on asking about the info you provided do to i wanted to no..... but the tread was asking How to put files or docs into a JPEG like a container.... Meaning if i move the image around on my computer and/or website the docs are in it and cant be seen unless you no how to find them... I will give props to the JS. script if it works, and i will give props for the Jpeg container.

Thanks again

The js will work with multiple images, and if they are moved around.
It will not work for those with js disabled, though.