frames

Imar · March 16th, 2004, 06:18 AM

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.

joefawcett · March 16th, 2004, 07:26 AM

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

twinkle · March 16th, 2004, 07:34 AM

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

twinkle · March 16th, 2004, 08:14 AM

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

joefawcett · March 16th, 2004, 08:54 AM

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

twinkle · March 16th, 2004, 10:22 AM

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

Imar · March 16th, 2004, 10:30 AM

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.

joefawcett · March 16th, 2004, 10:35 AM

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

twinkle · March 16th, 2004, 11:00 AM

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)

joefawcett · March 16th, 2004, 11:12 AM

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

--

Joe