help with iframe

allstarbajan · May 23, 2005

I am trying to link a picture for to an iframe. the website background is black and so is the iframe background. ie shows a white background around the pic but netscape shows the black around the pic. how do i get ie to show the black around the pic. see sample code below!

<iframe name="cwindow" frameborder="0" width="285" height="360" align="middle" marginwidth="0" marginheight="0" scrolling="no" src="start.htm"></iframe>

<a href="step correct/001.gif" target="cwindow">image 1</a>

Thanks

JamesLean · May 23, 2005

Try this:

Code:

<a href="step correct/001.gif" target="cwindow"><img src="image1.gif" [red]border="0"[/red] /></a>

--James

allstarbajan · May 23, 2005

that didn't work

any other suggestions?

BabyJeffy · May 23, 2005

I used your code to make a simple page and then tested it. I cannot reproduce the problem you are reporting using IE6 on Windows (nor using IE 5.2 on MacOSX).

Test this yourself:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>Test Harness</title>
<style type="text/css">
body { background-color:black; }
</style>
</head>
<body>
<iframe name="cwindow" frameborder="0" width="285" height="360" align="middle" marginwidth="0" marginheight="0" scrolling="no" src="start.htm"></iframe>
<a href="sample1.jpg" target="cwindow">image 1</a>
</body>
</html>

I wonder if it has something to do with your DOCTYPE (or the lack there-of)? See how you go.

Cheers,
Jeff

allstarbajan · May 24, 2005

still not working...here's the full code...maybe this'll clear it up some more

<td width="285" height="360" align="center" valign="middle">
<span align="center" valign="middle" style="background-color:#000000">
<iframe name="cwindow" frameborder="0" width="285" height="360" align="middle" marginwidth="0" marginheight="0" scrolling="no" src="start.htm" style="background-color:#000000"></iframe>
</span>
</td>
<td width="285" height="360" align="center" valign="middle">
<div style="text-align:left;width:285px;height:330px;border:#000000 1px;overflow:auto;padding: 5">
<span align="center" valign="middle" style="background-color:#000000">
<a href="step correct/001.gif" target="cwindow" style="background-color:#000000" border="0">image1</a>
<br /><a href="step correct/002.jpg" target="cwindow">image 2</a>
<br /><a href="step correct/003.jpg" target="cwindow">image 3</a>
<br /><a href="step correct/004.jpg" target="cwindow">image 4</a>
<br /><a href="step correct/005.jpg" target="cwindow">image 5</a>
<br /><a href="step correct/006.jpg" target="cwindow">image 6</a>
</span>
</div>
</td>

ChrisHunt · May 24, 2005

Maybe it's the <span> it doesn't like. You could try this:

Code:

<td width="285" height="360" align="center" valign="middle" style="background-color:#000000">
<iframe name="cwindow" frameborder="0" width="285" height="360" align="middle" marginwidth="0" marginheight="0" scrolling="no" src="start.htm" style="background-color:#000000"></iframe>
</td>

Failing that, are you sure that the white area is appearing on the outer page, and not on start.htm?

Is this page online? Can you post a URL?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

BillyRayPreachersSon · May 24, 2005

here's the full code

If that is the full code then I would expect things to not work for you. You've no open or close html tag, body tag, or table tag.

Is it really the full code?

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

BabyJeffy · May 24, 2005

Have you used the copy+paste function of your computer to take the code I posted, and paste it into a NEW (empty) document? Did you then save the document and try and run it in your browser?

You say "still not working" -- and I find that very very very hard to believe. The code I posted works if you copy+paste it and test it as I have suggested you do.

I really wonder why we bother helping people who just don't bother to help themselves.

Jeff

allstarbajan · May 24, 2005

Yes I copied and pasted it into a new document and saved it and tried it. I get the same result. Here is the link

http://students.syr.edu/nphc/dst/new/test.html

to BabyJeffy's suggestion.

Here is the link to the original site that i'm working with

http://students.syr.edu/nphc/dst/new/pictest.html

Hope someone can help me!

BillyRayPreachersSon · May 24, 2005

If you're only using the iframe to show images, I suggest changing your code to not use an iframe.

Just use a transparent image, and set the src to be that of the image you want to show.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

BabyJeffy · May 24, 2005

I see the difference. The image I used to test was larger than the iframe dimensions. I never imagined you were loading images smaller than the dimension of the iframe. A wonderful example of how sometimes it's the trivial stuff that breaks things.

Since there is no reason to use an iframe, it would seem Dan's suggestion is the way to go.

Jeff

allstarbajan · May 24, 2005

BillyRayPreachersSon, can you post an example of what you are telling me?

Thanks

BillyRayPreachersSon · May 24, 2005

Sure. Have an image on the page, with an ID:

Code:

<img src="trans.gif" id="myImage" />

where trans.gif is a 1x1 pixel transparent GIF.

Then, use getElementById to return the image object to access the src property:

Code:

document.getElementById('myImage').src = 'newFilename.jpg';

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

allstarbajan · May 24, 2005

Dan, is it possible for you to insert it into the code because I'm still not following what you're trying to say.

Thanks

BillyRayPreachersSon · May 25, 2005

Take the two lines you gave in your original post. Replace the first with the first one from my post. Replace the second one with a mix of your second line and mine:

Code:

<a href="javascript:void(0);" onclick="document.getElementById('myImage').src = 'newFilename.jpg';">image</a>

You should be able to manage the rest from that.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

ChrisHunt · May 25, 2005

Dan, could you not just do this?:

Code:

<a href="javascript:document.getElementById('myImage').src = 'newFilename.jpg';">image</a>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

BillyRayPreachersSon · May 25, 2005

Definately. I think the only reason I went with the long-hand method was to save having to think about data being returned to the page (like "[object]" when you open a new window without assiging the result to a variable).

But enough about my sheer laziness ;o)

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

allstarbajan · May 25, 2005

Dan, your suggestion works for Netscape but only half of the pic shows up in IE when I view it on my comp. I've posted on the internet what I've done. After I posted it, I realized that it does not work completely in IE and still works correctly in netscape.

Can't figure out what I'm doing wrong...can anyone?

I should mention that the pics are different sizes

http://students.syr.edu/nphc/dst/new/pictest.html

BillyRayPreachersSon · May 26, 2005

Try replacing this:

Code:

<a href="javascript:void(1);" onclick="document.getElementById('myImage').src = 'step correct/002.jpg';">image 2</a>

with this:

Code:

<span style="cursor:pointer;" onclick="document.getElementById('myImage').src = 'step correct/002.jpg';">image 2</span>

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

allstarbajan · May 28, 2005

Dan you are the man!!! Thanks everyone for your help!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

help with iframe

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Programmer

Programmer

Programmer

Technical User

Programmer

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor