/    Sign up×
Community /Pin to ProfileBookmark

Combobox and iFrame

Hi,
I am very, very little in Javascript
But, I need to solve this pb.

Have a combobox, with 3 article: A, B, C
When select A, I want to display a .jpeg file into a iFrame.
Then when select B, want display another .jpg file in the same Iframe.
I don’t know to make this.

Please, any ideas?
Thanks, a lot
Radu

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Untitled Page</title>
<script type=”text/javascript”>
<!–
function FindObject(id, doc)
{
var child, elem;
if(!doc)
doc=document;
if(doc.getElementById)
elem=doc.getElementById(id);
else
if(doc.layers)
child=doc.layers;
else
if(doc.all)
elem=doc.all[id];
if(elem)
return elem;
if(doc.id==id || doc.name==id)
return doc;
if(doc.childNodes)
child=doc.childNodes;
if(child)
{
for(var i=0; i<child.length; i++)
{
elem=FindObject(id,child[i]);
if(elem)
return elem;
}
}
var frm=doc.forms;
if(frm)
{
for(var i=0; i<frm.length; i++)
{
var elems=frm[i].elements;
for(var j=0; j<elems.length; j++)
{
elem=FindObject(id,elems[i]);
if(elem) return elem;
}
}
}
return null;
}
// –>
</script>
<script language=”JavaScript” type=”text/javascript”>
<!–
function SetImage(id, filename)
{
var elem=FindObject(id);
if(elem)
{
elem.src=filename;
}
}
//–>
</script>
<style type=”text/css”>
a:hover
{
color: #0000FF;
}
</style>
</head>
<body bgcolor=”#FFFFFF” text=”#000000″>
<select name=”Combobox1″ size=”1″ id=”Combobox1″ onSELECT=”LoadImage(‘InlineFrame1′,’DD_S.jpg’));return false;” style=”position:absolute;left:10px;top:139px;width:304px;font-family:Courier New;font-size:16px;z-index:3″>
<option value=”A”>A</option>
<option value=”B”>B</option>
<option value=”C”>C</option>
</select>
<iframe name=”InlineFrame1″ id=”InlineFrame1″ style=”position:absolute;left:450px;top:195px;width:300px;height:246px;z-index:1″ src=”cant.JPG” frameborder=”0″></iframe>
</body>
</html>

to post a comment
JavaScript

14 Comments(s)

Copy linkTweet thisAlerts:
@redhatlookMay 27.2007 — Hi Suteanu.. where is your LoadImage function?
Copy linkTweet thisAlerts:
@suteanuauthorMay 27.2007 — Yes,

You have right. Have not LoadImage function.

But I don't know how to use....
Copy linkTweet thisAlerts:
@redhatlookMay 27.2007 — Okay, try change this code:


<select name="Combobox1" size="1" id="Combobox1" onSELECT="LoadImage('InlineFrame1','DD_S.jpg'));return false;" style="position:absolute;left:10px;top:139px;width:304px;font-family:Courier New;font-size:16px;z-index:3">
[/QUOTE]


To this code:

<select name="Combobox1" size="1" id="Combobox1" onchange="SetImage('InlineFrame1',this.value+'.jpg');" style="position:absolute;left:10px;top:139px;width:304px;font-family:Courier New;font-size:16px;z-index:3">
[/QUOTE]


Note that A.jpg B.jpg and C.jpg files must exist
Copy linkTweet thisAlerts:
@suteanuauthorMay 27.2007 — Thanks,

In fact I think that I need somethig like this:

if Select 1

display image1 in frame 1

endif

if Select 2

display image2 in frame 1

endif

if Select 3

display image3 in frame 1

endif


I am very new in JS. In Vfox, that I used it's very simple, but, in Javascript.....
Copy linkTweet thisAlerts:
@redhatlookMay 27.2007 — I know I changed my script
Copy linkTweet thisAlerts:
@redhatlookMay 27.2007 — What's going on? Did you try this code? It works for me.. ?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Untitled Page</title>

<script type="text/javascript">

<!--

function FindObject(id, doc)

{

var child, elem;

if(!doc)

doc=document;

if(doc.getElementById)

elem=doc.getElementById(id);

else

if(doc.layers)

child=doc.layers;

else

if(doc.all)

elem=doc.all[id];

if(elem)

return elem;

if(doc.id==id || doc.name==id)

return doc;

if(doc.childNodes)

child=doc.childNodes;

if(child)

{

for(var i=0; i<child.length; i++)

{

elem=FindObject(id,child[i]);

if(elem)

return elem;

}

}

var frm=doc.forms;

if(frm)

{

for(var i=0; i<frm.length; i++)

{

var elems=frm[i].elements;

for(var j=0; j<elems.length; j++)

{

elem=FindObject(id,elems[i]);

if(elem) return elem;

}

}

}

return null;

}

// -->

</script>

<script language="JavaScript" type="text/javascript">

<!--

function SetImage(id, filename)

{

var elem=FindObject(id);

if(elem)

{

elem.src=filename;

}

}

//-->

</script>

<style type="text/css">

a:hover

{

color: #0000FF;

}

</style>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<select name="Combobox1" size="1" id="Combobox1" onchange="SetImage('InlineFrame1',this.value+'.jpg');" style="position:absolute;left:10px;top:139px;width:304px;font-family:Courier New;font-size:16px;z-index:3">

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

</select>

<iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:450px;top:195px;width:300px;height:246px;z-index:1" src="cant.JPG" frameborder="0"></iframe>

</body>

</html>

[/QUOTE]




A.jpg B.jpg and C.jpg files must exist
Copy linkTweet thisAlerts:
@suteanuauthorMay 27.2007 — I think that I am so stupid.

Load the .jpg files, when selected, but, don't display into Iframe.
Copy linkTweet thisAlerts:
@redhatlookMay 27.2007 — When select A, I want to display a .jpeg file into a iFrame.[/QUOTE]

later

Load the .jpg files, when selected, but, don't display into Iframe.[/QUOTE]

I don't understand you
Copy linkTweet thisAlerts:
@suteanuauthorMay 27.2007 — When select A, I want to display a .jpeg file into a iFrame.

But, don't display the jpeg file.

Select B, and don't see my jpeg file.

I think that i miss something

[upl-file uuid=092541eb-3a84-401f-968d-cfb7f4c2f0a6 size=19kB]select_a.jpg[/upl-file]

[upl-file uuid=815e160b-f301-4872-b547-47682eab884a size=18kB]select_b.jpg[/upl-file]
Copy linkTweet thisAlerts:
@redhatlookMay 27.2007 — Have you A.jpg B.jpg and C.jpg files in the same directory as the script? I mean exactly A.jpg not a.jpg or a.JPG
Copy linkTweet thisAlerts:
@suteanuauthorMay 27.2007 — Yes, but don't appear my iFrame.
Copy linkTweet thisAlerts:
@P-entertainmentMay 27.2007 — Okey here is what I do to solve a related task:

Inside the <head> tag:
&lt;script language="JavaScript"&gt;&lt;!--
function show(imageSrc,myImage)
{
if (document.images) document.images[myImage].src = imageSrc;
}
function sizex(imageSizex,myImage)
{
if (document.images) document.images[myImage].height = imageSizex;
}
function sizey(imageSizey,myImage)
{
if (document.images) document.images[myImage].width = imageSizey;
}
//--&gt;&lt;/script&gt;


In the HTML code:
&lt;A onmouseover="show('http://arneme.cs.uit.no/8d/TST/screenshot1.PNG','myImage');sizex('242','myImage');sizey('320','myImage')" onmouseout="show('blank.gif','myImage');sizex('0','myImage');sizey('0','myImage')"&gt;Screenshot 1&lt;/A&gt;

And to draw the image:
&lt;img src="blank.gif" name="myImage" width="0" height="0"&gt;

I know that this isn't exactly what you need but if you are able to reference the iframe it should be quite easy to edit the script.
Copy linkTweet thisAlerts:
@suteanuauthorMay 27.2007 — Thanks,

I will try to solve my request.
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...