Changes In and Out Of Iframe

Forum Moderators: open

Message Too Old, No Replies

Changes In and Out Of Iframe

I need help! :( :( :(

Magpie

11:28 pm on Feb 27, 2004 (gmt 0)

Hi there!

First of all heres my site... To understand what im goin to be ranting on about here's the link I will be refering to...

[underjudgement.com...]

Basically, as u can see I have set up an Iframe... When you click on any of the links it only changes what is inside the iframe (makes it goto another page)

If u see, above the Iframe there is a tiny bit of red writing that says latest news and to the right of the Iframe there is a picture of an eye...
What i would like to do is.... When u click on one of the links, not only will the ifram change but I want those certian things to change aslo... Ive heard i can do this useing Java script...

I am new to this all and dont understand it all... so I would appreciate it very much if someone could give me some guidence on what to write in the HTML code or somin or a link to a website that has easy to folow instruction on it

Thank you very much

Martin

birdbrain

10:53 am on Feb 28, 2004 (gmt 0)

Hi there Magpie,

I have used your 'NEWS' link as an example

<a target="I1" href="latestnews.htm"
onclick="document.getElementById('one').src='some.jpg';
document.getElementById('two').innerHTML=
'This Text is now changed' ">

to avoid the possibility of errors notice
that I have removed the quotes from size="1" etc.

Now add the id's like this...

<td id="two" bgcolor="#000000" colspan="2" height="6" width="760">

Latest News</td>

and this...

<img id="one" border="0" src="images/Eyes%202.jpg" width="224" height="375"></td>

I hope that this will set you on your way.

birdbrain

Magpie

4:30 pm on Feb 28, 2004 (gmt 0)

Hey! Cheers for the help. Im stil a little confused... do i input that code u gave me there into each of my links... or do i have to customise it for my personal use

for instance i dont really understand

onclick="document.getElementById('one').src='some.jpg';
document.getElementById('two').innerHTML=

Magpie

4:45 pm on Feb 28, 2004 (gmt 0)

I think im getting it a little...

<a target="I1" href="latestnews.htm"
onclick="document.getElementById('one').src='some.jpg'

what does the ('one') mean
and do i just change where it says:
src='some.jpg' to the name of my jpg i want

If i am right... after i put that code in with my link it should change the picture to what I tell it to

______________________________________________________

With this code:

document.getElementById('two').innerHTML=
'This Text is now changed' ">

What does the ('two') mean?
and what does this do exacly?

Also i dont really understand what this code will do either

<td id="two" bgcolor="#000000" colspan="2" height="6" width="760">

Latest News</td>

and this...

All help is very much appreciated :D

Martin

Magpie

5:33 pm on Feb 28, 2004 (gmt 0)

tried it... and i dont knw what the hell im doing lol :'(

Martin

birdbrain

7:21 pm on Feb 28, 2004 (gmt 0)

Hi there Magpie,

What does ...

<a target="I1" href="latestnews.htm"
onclick="document.getElementById('one').src='some.jpg';

...do? Well, when you click on that link it says change
the src of the element whose id is 'one'
from 'images/Eyes%202.jpg' to 'some.jpg'

Likewise...

<a target="I1" href="latestnews.htm"
onclick=document.getElementById('two').innerHTML=
'This Text is
now changed'

says change the content of the element whose id is 'two' from
Latest News</td> to
This Text is now changed

You would then use the code for each link,
but would separate the two commands by a semicolon thus...

<a target="I1" href="latestnews.htm"
onclick="document.getElementById('one').src='some.jpg' ;
document.getElementById('two').innerHTML=
'This Text is now changed' ">

I know that this all sounds very complicated,
but hope that it will help. You might also like to check
this thread [webmasterworld.com] to see how innerHTML swapping works.

birdbrain

Magpie

7:47 pm on Feb 28, 2004 (gmt 0)

So basically... after nameing my image html i want to change to this:

and my text i want to change to this:

<td id="two" bgcolor="#000000" colspan="2" height="6" width="760">
Latest News</td>

this code here

<a target="I1" href="latestnews.htm"
onclick="document.getElementById('one').src='some.jpg' ;
document.getElementById('two').innerHTML=
'This Text is now changed' ">

should now do what i want it to do after putting it with each of my links?

Magpie

7:48 pm on Feb 28, 2004 (gmt 0)

So basically... after nameing my image html i want to change to this:

and my text i want to change to this:

<td id="two" bgcolor="#000000" colspan="2" height="6" width="760">
Latest News</td>

this code here

Magpie

7:58 pm on Feb 28, 2004 (gmt 0)

noting im am trying is working...

Would it be possible for you to view my source code and change it to what it needs to be and post it on here, so i can just cut and copy it into my html page... and where it ses 'some.jpg' and 'This Text...' ill change to what i want it to be etc

Thanks, I realy appreciate all the help

Martin

birdbrain

8:18 pm on Feb 28, 2004 (gmt 0)

Hi there Magpie,

I already have your source code so...
give me the image with which you wish
to replace the 'EYE' and the text that
will replace 'LATEST NEWS' and I will
code the first link for you...well I will
make an attempt at least ;)

birdbrain

Magpie

9:04 pm on Feb 28, 2004 (gmt 0)

right...

for and example I want when u click on the gigs page... i want the small red writing to change to 'Gigs'

and 1 want this picture to be inplace of the eyes

<snip>

this is a page i just set up to show u the picture i wanted

the thing is... i want a different picture for each link... but if u could just do the 'Gigs' link for me so the small text and the eyes picture changes... I can see what to do for the rest of the link... it should work the same right?

Regards

Martin

[edited by: eelixduppy at 7:44 pm (utc) on Feb. 18, 2009]

birdbrain

10:33 pm on Feb 28, 2004 (gmt 0)

Hi there Magpie,

Copy & Paste this...

<html>
<head>
<base target="_self">
<style type="text/css">

</style>
<script language="JavaScript">
function practice1Win(){
aWindow=window.open("tied.html","Tied",
"width=494,height=448");
}
</script>
<title>Under Judgement</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="_themes/under-judgement/unde1100.css"><meta name="Microsoft Theme" content="under-judgement 1100, default">
</head>
<body>
<div align="center">
<center>
<table border="1" cellspacing="0" width="478" bgcolor="#000000" style="border-collapse: collapse" cellpadding="0" height="840">

<tr>
<td width="809" height="187" align="center" valign="top" background="../imgs/topimage.jpg"><img border="0" src="../imgs/dot.jpg" width="758" height="1"><img border="0" src="images/Under%20Judgement%20Banner%202.gif" width="762" height="183"></td>
</tr><tr>
<td height="11" bgcolor="#000000" align="center" width="809" bordercolor="#C0C0C0">
<a target="I1" href="latestnews.htm"><img border="0" src="images/News.gif" width="41" height="8"></a>�
 

<a target="I1" href="gigs.htm"onclick="document.getElementById('one').src='images/Martin.jpg';
document.getElementById('two').innerHTML=
'Gigs' ">

<img border="0" src="images/Gigs.gif" width="34" height="8"></a>
 �
<a target="I1" href="downloads.htm">
<img border="0" src="images/Downloads.gif" width="92" height="8"></a>
� <a target="I1" href="discography.htm">
<img border="0" src="images/Discography.gif" width="105" height="8"></a>
� <a target="I1" href="bios.htm"> <img border="0" src="images/Bios.gif" width="34" height="8"></a>
� 

<a target="I1" href="pics.htm">
<img border="0" src="images/Pics.gif" width="34" height="8"></a> 
� <a target="I1" href="lyrics.htm">
<img border="0" src="images/Lyrics.gif" width="52" height="8"></a>
�
<a target="_blank" href="http://www.underjudgement.com/forum">
<img border="0" src="images/Forum.gif" width="51" height="8"></a> �
<a target="I1" href="reviews.htm">
<img border="0" src="images/Reviews.gif" width="68" height="8"></a><a href="action.html" target="_self">
</a>

� <a target="I1" href="contact.htm">
<img border="0" src="images/Contact.gif" width="66" height="8"></a>
� <a target="I1" href="links.htm">
<img border="0" src="images/Links.gif" width="41" height="8"></a></td>
</tr>
<tr>
<td height="3" width="809"><img border="0" src="../imgs/dot.jpg" width="758" height="1"></td>
</tr>
<tr>
<td height="609" valign="top" width="809">
<table border="1" width="762" cellspacing="0" style="border-collapse: collapse" cellpadding="0" height="603">

<tr>

<td id="two" bgcolor="#000000" colspan="2" height="6" width="760">
Latest News</td>

</tr><tr>
<td width="534" bgcolor="#000000" align="left" bordercolor="#000000" bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0" height="377" valign="top">
<iframe src="latestnews.htm" marginheight="0" marginwidth="0" width="522" height="366" name="I1"></iframe>  </td>
<td width="225" valign="top" background="../imgs/bg16.jpg" height="377">

<img id="one"border="0" src="images/Eyes%202.jpg" width="224" height="375"></td>

</tr><tr>
<td height="218" colspan="2" valign="top" width="760">
<img border="0" src="images/Lightning%2013.jpg" width="760" height="218"></td>
</tr></table></td>
</tr><tr>
<td align="right" valign="top" width="809" height="26">
<table border="1" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
<td width="100%" bgcolor="#000000" valign="top"> 

Copyright © 2004 Under Judgement. All
trademarks and logos are protected. All rights reserved. Unauthorised
copying, reproduction, public performance and broadcasting prohibited.</td>
</tr></table></td>
</tr></table>
</center>
</div>
</body>
</html>
 
<a href="index.htm">
<img border="0" src="images/Under%20Judgement%20Logo%202.gif" width="121" height="65"></a>

birdbrain

Magpie

11:33 pm on Feb 28, 2004 (gmt 0)

IT WORKED!

UR A GENIUS

I LOVE U DUDE

Thanks ever so much dor the help

Kindest Regards

Martin

Also if ur into that type of music... feel free to download the 2 tracks of our NEW EP

[edited by: tedster at 4:26 am (utc) on Feb. 18, 2009]