Can I do this in JS??

@twice_redeemedJun 28.2005

Below is an example of what I need to do. I have small gifs of 200 of my art paintings and 5 transparent gifs of 5 different picture frame styles. I want to overlay the picture frame gif over the gif of the painting just like they do on the below site so that potential buyers of art can see various picture frame styles.

Click on example below, and when you get to the page just click on a picture frame style and see what happens:

~~[url]~~http://www.overstockart.com/poofmaha19co.html#order[/url]

Do I need to make an image of each painting with each picture frame style (5X200=1000) (I hope not!), or is there some way through scripting to overlay just the transparent picture frame part on the image?

If anyone knows of a way or you have a snippet pls let me know.

to post a comment

JavaScript

31 Comments(s) _↴

@vwphillipsJun 28.2005 — #if this is of interest let me kow and can sort out different frames and sizes

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 
 var zxcThumbDirectory='StdImages';
 var zxcMainDirectory='StdImages';
 
 var zxcImg;
 var zxcImgAry=new Array();
 var zxcImage=new Array();
 var zxcCnt=-1;
 
 function zxcInit(){
 zxcImg=document.getElementById('ThumbNails').getElementsByTagName('IMG');
 for (zxc0=0;zxc0<zxcImg.length;zxc0++){
 zxcImgAry[zxc0]=zxcImg[zxc0];
 zxcImg[zxc0].nu=zxc0-1;
 zxcImg[zxc0].onclick=function(){ zxcCnt=this.nu; zxcSSFwd(); }
 }
 }
 
 function zxcSSBack(){
 zxcCnt--;
 if (zxcCnt<0){ zxcCnt=zxcImg.length-1; }
 zxcLoad();
 }
 
 function zxcSSFwd(){
 zxcCnt++;
 if (zxcCnt==zxcImg.length){ zxcCnt=0; }
 zxcLoad();
 }
 
 function zxcLoad(){
 if (zxcImage[zxcCnt]){
 zxcDoIt();
 }
 else {
 document.getElementById('zxcMessage').innerHTML='Please Wait';
 zxcImage[zxcCnt]=new Image();
 zxcImage[zxcCnt].onload=function(){ document.getElementById('zxcMessage').innerHTML=''; zxcDoIt(); }
 zxcImage[zxcCnt].src=zxcImg[zxcCnt].src.replace('zxcThumbDirectory','zxcMainDirectory');
 }
 }
 
 function zxcDoIt(){
 document.getElementById('zxcMainImg').src=zxcImage[zxcCnt].src;
 }
 
 
 //-->
 </script></head>
 
 <body onload="zxcInit()" >
 <div style="position:relative;top:0px;left:0px" >
 <img  src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width=220 height=220 style="position:absolute;top:0px;left:0px;" >
 <img id="zxcMainImg" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=200 height=200 style="position:absolute;top:10px;left:10px;"  >
 </div>
 <table border=1  style="position:relative;top:230px;left:0px" >
 <tr>
 <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="zxcSSBack();" ></td>
 <td id="zxcMessage" width=60 align="center" style="font-Size:12px;" ></td>
 <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="zxcSSFwd();" ></td>
 </tr>
 </table>
 <table id="ThumbNails"  style="position:relative;top:260px;left:0px">
 <tr>
 <td width="50"><img  src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=50 height=50 ></td>
 <td width="50"><img  src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=50 ></td>
 <td width="50"><img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=50 ></td>
 <td width="50"><img  src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=50 height=50 ></td>
 </tr>
 <tr>
 <td width="50"><img  src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=50 height=50 ></td>
 <td></td>
 <td width="50"><img  src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=50 ></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 <td></td>
 <td></td>
 </tr>
 </table>
 </body>
 
 </html>
 [/CODE]

@acorbelliJun 28.2005 — #Below is an example of what I need to do. I have small gifs of 200 of my art paintings and 5 transparent gifs of 5 different picture frame styles. I want to overlay the picture frame gif over the gif of the painting just like they do on the below site so that potential buyers of art can see various picture frame styles.

Click on example below, and when you get to the page just click on a picture frame style and see what happens:

http://www.overstockart.com/poofmaha19co.html#order

Do I need to make an image of each painting with each picture frame style (5X200=1000) (I hope not!), or is there some way through scripting to overlay just the transparent picture frame part on the image?

If anyone knows of a way or you have a snippet pls let me know.[/QUOTE]

There's another thread just like this one posted yesterday.

Basically, line a frame (any frame) up on your page so it looks like the painting is in the frame. Then use javascript to change the source of the frame via basic image swapping.

@twice_redeemedauthorJun 28.2005 — #Hey Vic, that's cool. I think I could adapt it to what I need to do. For example, say I have 2 picture frame gif's, picframe1.gif and picframe2.gif, and two picture gifs pic1.gif and pic2.gif. What would I need to modify in the code to stick those 4 gif's into the code. If I can get it working with 2 combinations, I can get it to work with any number of them.

@vwphillipsJun 28.2005 — #Basically, line a frame (any frame) up on your page so it looks like the painting is in the frame. Then use javascript to change the source of the frame via basic image swapping.[/QUOTE]

or look at the code I posted, which has preloading, thumbnails and slideshow

@twice_redeemedauthorJun 28.2005 — #Vic - Could you sned those individual gifs to me that are in your code? You could just put those as attachments and email to:

[email][email protected][/email]

@vwphillipsJun 28.2005 — #you can pick up my images by mouseover and save image

but better still, send me some frames and pics and i will sort the auto sizing

and positioning.

Could chose frames from thumbnails/slideshow as well.

and with 3 levels the pic backing can be selectable as well.

note that it is better to have a set of small thumbnails and a set of large main images with each pair having the same file name(different directories)

also as the pic is on top of the frame, good quality jpgs can be used.

Should look good.

@vwphillipsJun 28.2005 — #very rough but see

[URL]http://www.vicsjavascripts.org.uk/SS/ss1.htm[/URL]

I need to do more work on this

@twice_redeemedauthorJun 28.2005 — #Vic - That's exactly what I need to do. Could you post the code for that?

@twice_redeemedauthorJun 28.2005 — #Never mind posting the code, I am a server-side scripting guy (ASP) I forget that JS is just lurking there all the time. When you created the picture frames, did you make the inside of them transparent in a graphics prog?

@twice_redeemedauthorJun 29.2005 — #Vic - First off I really appreciate you helping me with this. If you could help me with a slight modification:

Let's simplify, I don't think I need the slideshow, I just need to display the 3 frames. The 3 frames will always come up, the only thing that will change is the picture. The buyer selects the picture they want, and say we have only a selection of the 3 frames. How can this JS script be called from another page which is passing in the picture name as a param.

That way this main page would always put up 3 static frames, and overlay them onto various pictures.

@vwphillipsJun 29.2005 — #The pic filename can be sent to the 'Frames' page using server side code, a url? string or cookie.

the pic can the be loaded and displayed in one or all three frames.

the easiest way would be by using the url? string althought the ? string would be displayed in the address bar.

Not as interesting but I can assist with ?string or cookie method if required

post a link to a page with the three frames(6 if portrate & landscape frames required).

I assume that the frame material will require changing

will this be selected on the pic select or frame page.

There will be some distortion using the portrate frame for landscape.

with two types of frame available the correct type of frame could be selected according to pic size.

@twice_redeemedauthorJun 29.2005 — #Hi Vic - I placed your JS code in an ASP page on my server. I modifed it to accpt a picture name as a passed-in parameter into the asp page, and the JS code will accept any picture passed in. The frame images will be static, the only variable thing will be the picture image that is passed in . Take a look at the code. I kinda screwed it up because if you click on the image it causes an error:

http://www.awesome-art.biz/awesome/frmovl.asp?pict=pic3

The whole purpose of this thing is for my eBay store, I sell art on it and I want the potential buyers to be able to preview about 5 different picture frames on an image

@twice_redeemedauthorJun 29.2005 — #Vic - Could you help me to modify the JS code slghtly so that when I call the asp page with a passed in pic name, it would put up that picture image in the center and display the 3 pic frames below it or to the side of it. Then when the user clicks on a frame styule, it will overlay the frame on the pic or the pic into the frame, either way, just as long as they see the two together.

I know ASP well, but don't know JS at all, except for some really basic stuff. They work so well together though. The ASP can handle the database stuff really well and the JS is great for these kind of effects.

I reaally appreciate your help, I never would have figured out the JS stuff on my own, and you can't do stuff like that with only ASP.

http://www.awesome-art.biz/awesome/frmovl.asp?pict=pic3

@vwphillipsJun 29.2005 — #

[CODE]
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 pic3.jpg
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 
 var zxcThumbDirectory='Thumbs';
 var zxcMainDirectory='';
 
 var zxcImg;
 var zxcImgAry=new Array();
 var zxcImage=new Array();
 var zxcCnt=-1;
 
 function zxcInit(){
 zxcImg=document.getElementById('ThumbNails').getElementsByTagName('IMG');
 for (zxc0=0;zxc0<zxcImg.length;zxc0++){
 zxcImgAry[zxc0]=zxcImg[zxc0];
 zxcImg[zxc0].nu=zxc0-1;
 zxcImg[zxc0].onclick=function(){ zxcCnt=this.nu; zxcSSFwd(); }
 }
 }
 
 function zxcSSBack(){
 zxcCnt--;
 if (zxcCnt<0){ zxcCnt=zxcImg.length-1; }
 zxcLoad();
 }
 
 function zxcSSFwd(){
 zxcCnt++;
 if (zxcCnt==zxcImg.length){ zxcCnt=0; }
 zxcLoad();
 }
 
 function zxcLoad(){
 if (zxcImage[zxcCnt]){
 zxcDoIt();
 }
 else {
 //  document.getElementById('zxcMessage').innerHTML='Please Wait';
 zxcImage[zxcCnt]=new Image();
 zxcImage[zxcCnt].onload=function(){  zxcDoIt(); }
 zxcImage[zxcCnt].src=zxcImg[zxcCnt].src.replace(zxcThumbDirectory,zxcMainDirectory);
 }
 }
 
 function zxcDoIt(){
 document.getElementById('zxcMainImg').src=zxcImage[zxcCnt].src;
 document.getElementById('zxcFrame').width=document.getElementById('zxcMainImg').width+100;
 document.getElementById('zxcFrame').height=document.getElementById('zxcMainImg').height+100;
 document.getElementById('zxcFrame').style.top=(parseInt(document.getElementById('zxcMainImg').style.top)-50)+'px';
 document.getElementById('zxcFrame').style.left=(parseInt(document.getElementById('zxcMainImg').style.left)-50)+'px';
 }
 
 
 //-->
 </script></head>
 
 <body onload="zxcInit()" >
 <div style="position:relative;top:60px;left:400px" >
 <img  id="zxcFrame" src="frame1.jpg" width=220 height=220 style="position:absolute;top:0px;left:0px;" >
 <img id="zxcMainImg" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" style="position:absolute;top:0px;left:0px;"  >
 </div>
 <table id="ThumbNails"  style="position:relative;top:260px;left:0px">
 
 <tr>
 <td width="50"><img src="pic3.jpg" height=50 width=65  ></td>
 </tr>
 </table>
 <table style="position:relative;top:50px;left:0px" >
 <tr>
 <td><img  src="frame1.jpg" height=50 width=75  onclick="document.getElementById('zxcFrame').src='frame1.jpg';"></td>
 <td><img  src="frame2.jpg" height=50 width=75 onclick="document.getElementById('zxcFrame').src=this.src;"></td>
 <td><img  src="frame3.jpg" height=50 width=75 onclick="document.getElementById('zxcFrame').src=this.src;"></td>
 <td>&nbsp;</td>
 
 </tr>
 </table>
 </body>
 
 </html>
 [/CODE]

If you are going to use this script I will tidy it

thought you wanted the image passed to a separate page

@twice_redeemedauthorJun 29.2005 — #Vic - Thanks a bunch, below is the link to an item for sale in my eBay store. If you scroll down just under the 'Awesome Art' logo, you will see a 'click here' link that goes to my ASP page with the passed in picture. I just need to add some more frame types, and pass in the correct picture, but it's really close, and I appreciate all the help. If you ever need any asp/database help give me a holler.

Allen

http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&category=20144&item=7324367049&tc=photo

@twice_redeemedauthorJun 29.2005 — #Vic- Here are the actual frame sizes and image sizes I will be using. Can these sizes be accomodated so that I don't have to create hundreds of thumbnails?

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=mn_promenade2024

Do you have any idea why when I run it with a different image being passed in, the frames don't display. I wish I understood your code better.

See what happens with this image:

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_trees2024

And then if run with this image it puts up too many frames. What is causing it to run differently each time?

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_trees2024

@twice_redeemedauthorJun 29.2005 — #Vic - Here's my latest incarnation of your prog. It is really close, I will just have to fit the frames and the pict to the correct sizes and not have the frames extend so far over.

By the way, what is the link to your site for 'blank.gif', does the program need that for anything??

Test out these links:

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_wheatfield2024sm

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_harvest2024sm

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_nightcafe2024sm

Any of your wisdom would be appreciated.

Thanks Allen

@vwphillipsJun 29.2005 — #looks good

but prefer chosing from multiple pics as well as frames

I allowed for a standard size frame

your frames appear to be different sizes

if the center dimensions equal then I can work out a formula to fit the image in the center.

may be best to fit the pic to frame rather than frame to pic

as previosly stated you will need a set of portrait and landscape frames and script will chose which to use.

will try and look at your frames tomorrow

@twice_redeemedauthorJun 29.2005 — #1.On the eBay site they will already have chosen a picture they like, they will just need to preview it in a variety of frames.

2.Some of the pictures are in landscape and some in portrait, can we account for this?

3.Later today I will post the Frames I want to use and some sample images

4. In your JS you have a link to one of your pages (blank.gif), do I need to keep that?

Here is what I have so far:

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_wheatfield2024sm

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_harvest2024sm

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_nightcafe2024sm

@twice_redeemedauthorJun 30.2005 — #Vic - Now that I think of it, the best thing for me would be just a script that fills in the 5 frames with the image. All hard-coded stuff except for the variable picture name being passed in. That way a potential buyer can see how it looks in all the frames. No mouseover or any of that required. Just something really simple that I could maintain.

What is zxcMainImg (blank.gif)?? What's it used for? CDan I get a copy of it?

@vwphillipsJun 30.2005 — #Ok, I will leave you with it then.

Blank.gif is a small transparent .gif

I use this for the image src until replaced, when loaded, with the required image

@twice_redeemedauthorJun 30.2005 — #Vic - Just a couple more questions if you don't mind. First off could I get a copy of 'blank.gif' since the prog doesn't run without it, and I can't seem to grab it out of the code.

Also, I will stick with the code you created because I am not going to be able to recrreate it on my own. Let me ask you this though:

Take a look at this link, what would I need to do to have the frame fill the image without the white are showing? Should I just adjust the frames to be smaller?

http://www.awesome-art.biz/awesome/images/os/frmovl1.asp?pict=vg_wheatfield2024sm

@vwphillipsJun 30.2005 — #twice_redeemed

I think the best way forward is for you to specify exactly what you want.

zip and send some decent images of pictures and frames and I will do the code.

You will get what you want and I will know the jobs done.

It will not take me long and you will be able to support it.

Vic

@twice_redeemedauthorJun 30.2005 — #Vic - All I really need is to get this working where the picture fills the frame, and something I could maintain.

Thanks,

Allen

[upl-file uuid=03756a6a-9930-4dd9-9636-da556da461d1 size=92kB]picture_frames.zip[/upl-file]

@vwphillipsJun 30.2005 — #The picture picasso.gif has a different aspect ratio to the frames

I assumed the frame and picture would have the same ascpect ratio.

If I force the aspect ratios to be equal one will be distorted.

please advise on the range of sizes (the center dimensions of the frames and the picture sizes)

@twice_redeemedauthorJun 30.2005 — #The inner dimensions of PORTRAIT frames are: 185 pix high by 155 pix wide

LANDSCAPE frames are the reverse.

All picture images will be able to fit into either one of these, the are all ~185X155 or vice versa.

Is this what you need?

thanks

@vwphillipsJul 01.2005 — #yes - back later

@twice_redeemedauthorJul 01.2005 — #thanks

@vwphillipsJul 01.2005 — #Allen

You Frame inner dimensions were not what you thought so I have changed them

jpgs - smaller than the gifs

Vic

@twice_redeemedauthorJul 02.2005 — #Vic - Wow! Great job, I really appreciate all of your help. I've never really came across anyone who does so much to help, and with such quality work. All I can say is thanks a lot.

Allen

Windsor, CA

@vwphillipsJul 02.2005 — #Allen

I was not satisfied with having two pages for the frames

and have added code to use a cookie in place of the ? string, the user will not see the ? string in address bar

There are a number of other improvements

I have featured the script on my site see

[URL]http://homepage.ntlworld.com/vwphillips//FramePicSSlideShow/Opener.htm[/URL]

Also in #JavaScript _↴

[RESOLVED] Dynamically-loaded content results in incorrect page length in IE and Firefox Javascript Clock (plz help)dynamic links problem

Success!

Help @twice_redeemed spread the word by sharing this article on Twitter...

Tweet This

Can I do this in JS??

31 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Can I do this in JS??

31 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

31 Comments(s) _↴

Also in #JavaScript _↴