Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #11 (permalink)  
Old March 16th, 2004, 06:18 AM
Imar's Avatar
Wrox Author
Points: 72,019, Level: 100
Points: 72,019, Level: 100 Points: 72,019, Level: 100 Points: 72,019, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,075
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Hi there,

I never said you need an ID on all pictures on the right. All you need is an <img> tag with an ID attribute in the *left* frame.
This image will serve as a placeholder, so you can load the other images in it dynamically.

Can you define "it didnt work"? What code do you have? What did you try? What error do you get? If you're not using an ID, how do you know it doesn't work?

In short, here's the summary:

[frame.html]
Page with the two iframe tags, nothing more

[left.html]
An empty HTML page with just a single <img> tag in the body, like this:
<img src="spacer.gif" id="imgTest" />

[right.html]
Your list with images. Each image can be wrapped in an <a> tag, or have its onclick attribute call code like this:

<a href="#" onclick="parent.leftFrame.document.getElementById( 'imgTest').src = 'NewImage.gif';">Your image here</a>

Cheers,

Imar


---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Reply With Quote
  #12 (permalink)  
Old March 16th, 2004, 07:26 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Main page:
Code:
<html>
<head>
<title>Move Images</title>
</head>
<body bgcolor="#FFFFFF">
<iframe height="300px" width="400px" src="left.htm" name="left"></iframe>
<iframe height="300px" width="400px" src="right.htm" name="right"></iframe>
</body>
</html>
left.htm
Code:
<html>
<head>
<title>Left Frame</title>
</head>
<body bgcolor="#FFFFFF">
<img src="">
</body>
</html>
right.htm
Code:
<html>
<head>
<title>Right Frame</title>
<script type="text/jscript">
  function copyImage(Image)
  {
    var fraLeft = top.frames["left"];
    var oImage = fraLeft.document.images[0];
    oImage.src = Image.src;
    oImage.height = Image.height;
    oImage.width = Image.width;
  }  
</script>
</head>
<body bgcolor="#FFFFFF">
<img src="images/bigBen.gif" width="100" height="100" onclick="copyImage(this);">
<img src="images/beer.gif" width="100" height="100" onclick="copyImage(this);">
<img src="images/party.gif" width="100" height="100" onclick="copyImage(this);">
</body>
</html>

--

Joe
Reply With Quote
  #13 (permalink)  
Old March 16th, 2004, 07:34 AM
Authorized User
 
Join Date: Mar 2004
Location: , , .
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

so i just tried out ur given code, its not working!

the only thing i changed was the picture sapce.give to face5.jpg


Actually im creating a shopping site, were u can shop clothes, shoes and make-up. To make my shopping site a bit differtent from all the rest of the shopping sites was to
include a site for clothes, where u see a doll in left.html (frame 1)
that u can dress by clicking on images(pictures of tops,pants,shoes) in right.html (frame2)


really hope that u can give me somthing to create such a function

Reply With Quote
  #14 (permalink)  
Old March 16th, 2004, 08:14 AM
Authorized User
 
Join Date: Mar 2004
Location: , , .
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

THANX joe, its actually WORKING!

one thing more,
u c when the user dresses the doll, the doll must stay in the left.htm so when clicking at a top the top will appear ON THE doll and not replacing the image doll

i belive that the code that is working right now wont work in that way, because when u click on an image in right.htm it replaces the image in left.htm

how can i make the images appear on the doll instead of replacing the doll??

Reply With Quote
  #15 (permalink)  
Old March 16th, 2004, 08:54 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Well I don't know how your page looks at the moment, you will have to have one image placeholder for each article of clothing. Can you show an actual sample of your left and right frames?

--

Joe
Reply With Quote
  #16 (permalink)  
Old March 16th, 2004, 10:22 AM
Authorized User
 
Join Date: Mar 2004
Location: , , .
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

well right.html and left.html look just as u posted the code

but i can show u how the main page looks like:

<body onClick="show()" onLoad="textVisare = setTimeout('rullaText(100)',0);" bgcolor="#cccc99">


<div id="box">
<table width="550" height="450" bgcolor="#cccc99" align="center" border="1" bordercolor="#ff6633">

<div id="option">
<div id="1" onmouseover="show(1)"><p>OPTIONS</p></div>
<div id="show">
<IFRAME src="right.html" name=right align="center" width="320" height="370" frameborder="0" scrolling="yes"></IFRAME>
</div></div>

<div id="undermeny1" onClick="show(1)">
<table cellspacing="0" cellpadding="0" border="0" width="133" height="10">

<tr><td bgcolor="#bed0e4">a href="tops.html" target="right"><p>TOPS</a></div></td></tr>

<tr><td bgcolor="#bed0e4">a href="pant.html" target="right"><p>PANTS</a></div></td></tr>

<tr><td bgcolor="#bed0e4">a href="sh.html" target="right"><p>SHOES</a></div></td></tr>

<tr><td bgcolor="#bed0e4"><a href="bg.html" target="right"><p>BAGS</a></div></td></tr></table></div>




<div id="undermeny2">
<table cellspacing="0" cellpadding="0" border="1" bordercolordark="305073" bordercolorlight="305073" width="180">
<tr><td bgcolor="#bed0e4">a href="home.html target="_blank">HOME</a></div></td></tr></table>
</div></div>



<div id="dress">
<IFRAME src="left.html" name=left align="left" width="236" height="410" frameborder="0" scrolling="yes">
</IFRAME></div>

</body>
</html>

hope that u can help me
//Twinkle

Reply With Quote
  #17 (permalink)  
Old March 16th, 2004, 10:30 AM
Imar's Avatar
Wrox Author
Points: 72,019, Level: 100
Points: 72,019, Level: 100 Points: 72,019, Level: 100 Points: 72,019, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,075
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

Maybe this will offend some people, but the following link has a great example of what you're trying to accomplish:

http://www.jesusdressup.com/

It allows you to use dress up Jesus with some cool looking suits using DHTML drag and drop. Examine the source to learn how it is done.

Don't go there if you're way into Jesus and are offended quickly...

Cheers,

Imar


---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
Reply With Quote
  #18 (permalink)  
Old March 16th, 2004, 10:35 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Well your dummy will have to be made of four image place holders, one for each of 'tops', 'pants', 'shoes' and 'bags'. Your image tags containing the tops would have to have an attribute of clothingType equal to 'tops'. When you try to copy the image you check the clothingType and assign the src to the relevant placeholder. If you're still struggling email me two of each image type to my profile email address and I'll try to come up with an example.

--

Joe
Reply With Quote
  #19 (permalink)  
Old March 16th, 2004, 11:00 AM
Authorized User
 
Join Date: Mar 2004
Location: , , .
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
Default

two of each image type --- do u mean two pictures from each category?
(tops,pants,bags)

by the way, when u send an email to another member can u attach things, or view their email add.?? (the emailbox only show their names)

Reply With Quote
  #20 (permalink)  
Old March 16th, 2004, 11:12 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

My email is joefawcett AT hotmail.com, use your imagination. Two pictures from each category.

--

Joe
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Frames Simmy73 ASP.NET 2.0 Basics 1 May 26th, 2006 07:26 AM
Frames ricardo_s HTML Code Clinic 1 April 27th, 2006 02:37 PM
FRAMES twinkle Javascript 2 March 30th, 2004 02:04 AM
i frames and all that Adam H-W HTML Code Clinic 2 November 5th, 2003 12:24 PM



All times are GMT -4. The time now is 05:51 AM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.