Graphics and Multimedia

JPEG as a Container

Please support our Graphics and Multimedia advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2009

Posts: 130

Reputation: stevenpetersen is an unknown quantity at this point

Solved Threads: 1

stevenpetersen stevenpetersen is offline

Offline

Junior Poster

JPEG as a Container

-1

Sep 1st, 2009

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

Steven Petersen
Web Designer / Web Master

•

Join Date: Jul 2009

Posts: 178

Reputation: codejoust is an unknown quantity at this point

Solved Threads: 17

codejoust

Offline

Junior Poster

Re: JPEG as a Container

Sep 1st, 2009

Try this approach:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
$(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'});
});
});
$(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)

Last edited by codejoust; Sep 1st, 2009 at 2:18 pm.

CodeJoust! Design + Development - Proud User of Ubuntu

•

Join Date: Jun 2009

Posts: 130

Reputation: stevenpetersen is an unknown quantity at this point

Solved Threads: 1

stevenpetersen stevenpetersen is offline

Offline

Junior Poster

Re: JPEG as a Container

Sep 1st, 2009

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

This post is a current project

Last edited by stevenpetersen; Sep 1st, 2009 at 7:02 pm.

Steven Petersen
Web Designer / Web Master

•

Join Date: Jul 2009

Posts: 178

Reputation: codejoust is an unknown quantity at this point

Solved Threads: 17

codejoust

Offline

Junior Poster

Re: JPEG as a Container

Sep 1st, 2009

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 <script type="text/javascript">[my code]</script>
<script type="text/javascript" src="[scr of jquery]"></script>

CodeJoust! Design + Development - Proud User of Ubuntu

•

Join Date: Jul 2009

Posts: 178

Reputation: codejoust is an unknown quantity at this point

Solved Threads: 17

codejoust

Offline

Junior Poster

Re: JPEG as a Container

Sep 1st, 2009

Correction =

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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>
<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.

Last edited by codejoust; Sep 1st, 2009 at 8:07 pm.

CodeJoust! Design + Development - Proud User of Ubuntu

•

Join Date: Jun 2009

Posts: 130

Reputation: stevenpetersen is an unknown quantity at this point

Solved Threads: 1

stevenpetersen stevenpetersen is offline

Offline

Junior Poster

Re: JPEG as a Container

Sep 2nd, 2009

Project

Last edited by stevenpetersen; Sep 2nd, 2009 at 12:15 pm.

Steven Petersen
Web Designer / Web Master

•

Join Date: Jul 2009

Posts: 178

Reputation: codejoust is an unknown quantity at this point

Solved Threads: 17

codejoust

Offline

Junior Poster

Re: JPEG as a Container

Sep 2nd, 2009

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
$(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;});
});
$(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).

CodeJoust! Design + Development - Proud User of Ubuntu

•

Join Date: Jan 2009

Posts: 1,316

Reputation: almostbob has a spectacular aura about

Solved Threads: 161

almostbob

Offline

Nearly a Posting Virtuoso

Re: JPEG as a Container

Sep 2nd, 2009

Help with Code Tags

css Syntax (Toggle Plain Text)

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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<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'>
<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

Last edited by almostbob; Sep 2nd, 2009 at 9:54 pm.

Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved

•

Join Date: Jun 2009

Posts: 130

Reputation: stevenpetersen is an unknown quantity at this point

Solved Threads: 1

stevenpetersen stevenpetersen is offline

Offline

Junior Poster

Re: JPEG as a Container

Sep 3rd, 2009

•

Originally Posted by codejoust

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

javascript Syntax (Toggle Plain Text)
$(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;});
});
$(function(){ $('img').each(function(){ $('<div class="trans"> </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....

Steven Petersen
Web Designer / Web Master

•

Join Date: Jun 2009

Posts: 130

Reputation: stevenpetersen is an unknown quantity at this point

Solved Threads: 1

stevenpetersen stevenpetersen is offline

Offline

Junior Poster

Re: JPEG as a Container

#10

Sep 3rd, 2009

•

Originally Posted by almostbob

Help with Code Tags

css Syntax (Toggle Plain Text)
@media print { img { background:url('./images/copyright.jpg'); } }
@media print { img { background:url('./images/copyright.jpg'); } }
Help with Code Tags

html Syntax (Toggle Plain Text)
<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'>
<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