Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

loztboy99 · Jan 17th, 2005, 5:34 PM

Hi

I am trying to load ipix images - 360 degree pics - using javascript.
I am able to display the first image but want the next image to load on the same page. Most people seem to load an image on another html page but i would really like to be able to load my images on the same page.

Have a look at the basic code behind it and if you can please tell me were I am going wrong.
Cheers

<html>
<head>
<script type="text/javascript">
function change() {
document.getElementById('iPIX').innerHTML = newiPIX;
}

var newiPIX ='<OBJECT ID="IpixX2" WIDTH=350 HEIGHT=250 CLASSID="CLSID:11260943-421B-11D0-8EAC-0000C07D88CF"
CODEBASE="http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5">

<PARAM NAME="IPXFILENAME" VALUE="image4.ipx">
 <embed src="image4.ipx" WIDTH="350" HEIGHT="250" BORDER="0" PALETTE="FOREGROUND"
type="application/x-ipix" pluginsPage="http://www.ipix.com/cgi-bin/download.cgi"></embed>
</OBJECT>;'
</script>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

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

<div id="iPIX"><OBJECT ID="IpixX1" WIDTH=350 HEIGHT=250 CLASSID="CLSID:11260943-421B-11D0-8EAC-0000C07D88CF"
CODEBASE="http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5">

<PARAM NAME="IPXFILENAME" VALUE="image2.ipx">

<embed src="image2.ipx" WIDTH="350" HEIGHT="250" BORDER="0" PALETTE="FOREGROUND"
type="application/x-ipix" pluginsPage="http://www.ipix.com/cgi-bin/download.cgi">
</embed>
</OBJECT></div>


<a href="#" onclick="change();return false;">NEW</a>
</body>

</html>

EdSalamander · Jan 17th, 2005, 7:02 PM

Instead of using innerHTML to replace the text, give the <embed> tag an ID (ID="embedID" in my example) and write the script so it changes the source attribute. Like...

(Toggle Plain Text)

function change(){
  document.getElementById('embedID').src = 'image4.ipx';
}

(You'll probably need to do the same thing for the <PARAM> tag...)

loztboy99 · Jan 18th, 2005, 8:12 AM

Thanks for taking the time EdSalamander
theonly thing is the ipix image is used for virtual tours so if you can imagine i may have six or seven pics to be loaded. i have had a go at the code you gave me but am a it lost, not sure what to do with the <param>.

EdSalamander · Jan 18th, 2005, 8:33 AM

Glad to help.

Hope it works out for ya.

loztboy99 · Jan 18th, 2005, 8:41 AM

I think I have got lost now, you see I am not great at javascript, just bought a book on javascripting so that I could do this scripting for my pics.
Do you have any other suggestions? :

EdSalamander · Jan 18th, 2005, 7:40 PM

Ok, after a little experimentation I've decided to steer you back in the direction you were originally heading. And, I think I've figured out what your original problem was. Go back and take all of the line breaks out if the newiPIX string variable. I had forgotton that JavaScript strings can't have breaks in them. Don't worry about any auto-wrapping or extra spaces, just make absolutely sure that all the returns are taken out. This will make the string behind your newiPIX variable really long for just one line, but that's ok, it's necessary. Try it again and let me know how it works. Oh, and sorry about the confusion.

loztboy99 · Jan 19th, 2005, 8:18 AM

Hiya

I have changed the code to the following which now loads the image but have no idea how i am gonna load any other images. I need to be able to load anything from 4 to 8-10 images. For each image i know i need to do the <object id> and then the <href> would just be what ever the image is called but how do i make it so the script would change() according to what <href> is selected? :confused

<html>
<head>
<script type="text/javascript">
function change() {
document.getElementById('iPIX').innerHTML = newiPIX;
}

var newiPIX ="<OBJECT ID='IpixX2' WIDTH=350 HEIGHT=250 CLASSID='CLSID:11260943-421B-11D0-8EAC-0000C07D88CF' CODEBASE='http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5'>";

newiPIX+="<PARAM NAME='IPXFILENAME' VALUE='image4.ipx'>";

newiPIX+="<embed src='image4.ipx' WIDTH='350' HEIGHT='250' BORDER='0' PALETTE='FOREGROUND' type='application/x-ipix' pluginsPage='http://www.ipix.com/cgi-bin/download.cgi'></embed></OBJECT>;"
</script>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

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

<div id="iPIX"><OBJECT ID="IpixX1" WIDTH=350 HEIGHT=250 CLASSID="CLSID:11260943-421B-11D0-8EAC-0000C07D88CF"
CODEBASE="http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5">

<PARAM NAME="IPXFILENAME" VALUE="image2.ipx">

<embed src="image2.ipx" WIDTH="350" HEIGHT="250" BORDER="0" PALETTE="FOREGROUND"
type="application/x-ipix" pluginsPage="http://www.ipix.com/cgi-bin/download.cgi">
</embed>
</OBJECT></div>


<a href="#" onclick="change();return false;">NEW</a>
</body>
</html>

EdSalamander · Jan 19th, 2005, 10:22 AM

Give the change() function parameters, then use the values passed through that parameter to change what image you want to load. Something like..

(I've underlined the most important parts)

(Toggle Plain Text)

function change(iPIXimage) {

var newiPIX ="<OBJECT ID='IpixX2' WIDTH=350 HEIGHT=250 CLASSID='CLSID:11260943-421B-11D0-8EAC-0000C07D88CF' CODEBASE='http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5'>";
<!-- For MSIE 3,4+ -->
newiPIX+="<PARAM NAME='IPXFILENAME' VALUE='" + iPIXimage + "'>";
<!-- For Netscape 3,4 -->
newiPIX+="<embed src='" + iPIXimage + "' WIDTH='350' HEIGHT='250' BORDER='0' PALETTE='FOREGROUND' type='application/x-ipix' pluginsPage='http://www.ipix.com/cgi-bin/download.cgi'></embed></OBJECT>;" 

  document.getElementById('iPIX').innerHTML = newiPIX;
}

See how I used the iPIXimage variable in change(iPIXimage) to set which image is loaded? Now, without a value for iPIXimage, this functions doesn't do aythig particularly useful, so we'll pass that variable in with the links. Like so..

(Toggle Plain Text)

<a href="#" onclick="change("image2.ipx");return false;">Image 2</a>
<a href="#" onclick="change("image3.ipx");return false;">Image 3</a>
<a href="#" onclick="change("image4.ipx");return false;">Image 4</a>
<a href="#" onclick="change("image5.ipx");return false;">Image 5</a>

etc...

The key here is clearly the onClick() call in each link. You should understand that the href part isn't actually doing anything at all (and it shouldn't). You could put anything you wanted in there and it wouldn't matter because the "return false;" part in onClick disables the link. It still calls change() though, which is exactly what you want. Notice that the in each call of change is a string parameter that is later included in newiPIX up above. This allows you to chose which link loads which image. Give it a try and let me know if anything doen't make sense.

Oh, and one other thing. Don't worry about how I told you to give IDs to a bunch of stuff. They could be handy in the future, but they ended up not being necessary for right now after all.

loztboy99 · Jan 19th, 2005, 12:08 PM

dude you are seriously good,
i'll try it later tonight.

thanks a million

loztboy99 · Jan 19th, 2005, 5:02 PM

HI EdSalamander

I understand exactly what your code is for but I till can't get nything to load, I have checked it so many times but just can't see what i am doing wrong.
I am sorry to keep bothering you with this but this is becoming like a personal demon for me.

Jan 17th, 2005, 5:34 PM	#1
loztboy99 Newbie Join Date: Jan 2005 Posts: 12 Rep Power: 0	need some help please with scripting Hi I am trying to load ipix images - 360 degree pics - using javascript. I am able to display the first image but want the next image to load on the same page. Most people seem to load an image on another html page but i would really like to be able to load my images on the same page. Have a look at the basic code behind it and if you can please tell me were I am going wrong. Cheers <html> <head> <script type="text/javascript"> function change() { document.getElementById('iPIX').innerHTML = newiPIX; } var newiPIX ='<OBJECT ID="IpixX2" WIDTH=350 HEIGHT=250 CLASSID="CLSID:11260943-421B-11D0-8EAC-0000C07D88CF" CODEBASE="http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5"> <!-- For MSIE 3,4+ --> <PARAM NAME="IPXFILENAME" VALUE="image4.ipx"> <!-- For Netscape 3,4 --> <embed src="image4.ipx" WIDTH="350" HEIGHT="250" BORDER="0" PALETTE="FOREGROUND" type="application/x-ipix" pluginsPage="http://www.ipix.com/cgi-bin/download.cgi"></embed> </OBJECT>;' </script> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" text="#000000"> <!--applet starts here----------------------------- --> <div id="iPIX"><OBJECT ID="IpixX1" WIDTH=350 HEIGHT=250 CLASSID="CLSID:11260943-421B-11D0-8EAC-0000C07D88CF" CODEBASE="http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5"> <!-- For MSIE 3,4+ --> <PARAM NAME="IPXFILENAME" VALUE="image2.ipx"> <!-- For Netscape 3,4 --> <embed src="image2.ipx" WIDTH="350" HEIGHT="250" BORDER="0" PALETTE="FOREGROUND" type="application/x-ipix" pluginsPage="http://www.ipix.com/cgi-bin/download.cgi"> </embed> </OBJECT></div> <!--applet ends here------------------------------- --> <a href="#" onclick="change();return false;">NEW</a> </body> </html>

Jan 17th, 2005, 7:02 PM	#2
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	Instead of using innerHTML to replace the text, give the <embed> tag an ID (ID="embedID" in my example) and write the script so it changes the source attribute. Like... (Toggle Plain Text) function change(){ document.getElementById('embedID').src = 'image4.ipx'; } function change(){ document.getElementById('embedID').src = 'image4.ipx'; } (You'll probably need to do the same thing for the <PARAM> tag...) __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose?

Jan 18th, 2005, 8:12 AM	#3
loztboy99 Newbie Join Date: Jan 2005 Posts: 12 Rep Power: 0	Thanks for taking the time EdSalamander theonly thing is the ipix image is used for virtual tours so if you can imagine i may have six or seven pics to be loaded. i have had a go at the code you gave me but am a it lost, not sure what to do with the <param>. Last edited by loztboy99; Jan 18th, 2005 at 8:35 AM.

Jan 18th, 2005, 8:33 AM	#4
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	Glad to help. Hope it works out for ya. __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose?

Jan 18th, 2005, 7:40 PM	#6
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	Ok, after a little experimentation I've decided to steer you back in the direction you were originally heading. And, I think I've figured out what your original problem was. Go back and take all of the line breaks out if the newiPIX string variable. I had forgotton that JavaScript strings can't have breaks in them. Don't worry about any auto-wrapping or extra spaces, just make absolutely sure that all the returns are taken out. This will make the string behind your newiPIX variable really long for just one line, but that's ok, it's necessary. Try it again and let me know how it works. Oh, and sorry about the confusion. __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose?

Jan 18th, 2005, 8:41 AM	#5
loztboy99 Newbie Join Date: Jan 2005 Posts: 12 Rep Power: 0	I think I have got lost now, you see I am not great at javascript, just bought a book on javascripting so that I could do this scripting for my pics. Do you have any other suggestions? :

Jan 19th, 2005, 8:18 AM	#7
loztboy99 Newbie Join Date: Jan 2005 Posts: 12 Rep Power: 0	Hiya I have changed the code to the following which now loads the image but have no idea how i am gonna load any other images. I need to be able to load anything from 4 to 8-10 images. For each image i know i need to do the <object id> and then the <href> would just be what ever the image is called but how do i make it so the script would change() according to what <href> is selected? :confused <html> <head> <script type="text/javascript"> function change() { document.getElementById('iPIX').innerHTML = newiPIX; } var newiPIX ="<OBJECT ID='IpixX2' WIDTH=350 HEIGHT=250 CLASSID='CLSID:11260943-421B-11D0-8EAC-0000C07D88CF' CODEBASE='http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5'>"; <!-- For MSIE 3,4+ --> newiPIX+="<PARAM NAME='IPXFILENAME' VALUE='image4.ipx'>"; <!-- For Netscape 3,4 --> newiPIX+="<embed src='image4.ipx' WIDTH='350' HEIGHT='250' BORDER='0' PALETTE='FOREGROUND' type='application/x-ipix' pluginsPage='http://www.ipix.com/cgi-bin/download.cgi'></embed></OBJECT>;" </script> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF" text="#000000"> <!--applet starts here----------------------------- --> <div id="iPIX"><OBJECT ID="IpixX1" WIDTH=350 HEIGHT=250 CLASSID="CLSID:11260943-421B-11D0-8EAC-0000C07D88CF" CODEBASE="http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5"> <!-- For MSIE 3,4+ --> <PARAM NAME="IPXFILENAME" VALUE="image2.ipx"> <!-- For Netscape 3,4 --> <embed src="image2.ipx" WIDTH="350" HEIGHT="250" BORDER="0" PALETTE="FOREGROUND" type="application/x-ipix" pluginsPage="http://www.ipix.com/cgi-bin/download.cgi"> </embed> </OBJECT></div> <!--applet ends here------------------------------- --> <a href="#" onclick="change();return false;">NEW</a> </body> </html>

Jan 19th, 2005, 10:22 AM	#8
EdSalamander Programmer Join Date: Dec 2004 Location: Tucson, AZ, USA Posts: 80 Rep Power: 4	Give the change() function parameters, then use the values passed through that parameter to change what image you want to load. Something like.. (I've underlined the most important parts) (Toggle Plain Text) function change(iPIXimage) { var newiPIX ="<OBJECT ID='IpixX2' WIDTH=350 HEIGHT=250 CLASSID='CLSID:11260943-421B-11D0-8EAC-0000C07D88CF' CODEBASE='http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5'>"; <!-- For MSIE 3,4+ --> newiPIX+="<PARAM NAME='IPXFILENAME' VALUE='" + iPIXimage + "'>"; <!-- For Netscape 3,4 --> newiPIX+="<embed src='" + iPIXimage + "' WIDTH='350' HEIGHT='250' BORDER='0' PALETTE='FOREGROUND' type='application/x-ipix' pluginsPage='http://www.ipix.com/cgi-bin/download.cgi'></embed></OBJECT>;" document.getElementById('iPIX').innerHTML = newiPIX; } function change(iPIXimage) { var newiPIX ="<OBJECT ID='IpixX2' WIDTH=350 HEIGHT=250 CLASSID='CLSID:11260943-421B-11D0-8EAC-0000C07D88CF' CODEBASE='http://www.ipix.com/viewers/ipixx.cab#version=6,2,0,5'>"; <!-- For MSIE 3,4+ --> newiPIX+="<PARAM NAME='IPXFILENAME' VALUE='" + iPIXimage + "'>"; <!-- For Netscape 3,4 --> newiPIX+="<embed src='" + iPIXimage + "' WIDTH='350' HEIGHT='250' BORDER='0' PALETTE='FOREGROUND' type='application/x-ipix' pluginsPage='http://www.ipix.com/cgi-bin/download.cgi'></embed></OBJECT>;" document.getElementById('iPIX').innerHTML = newiPIX; } See how I used the iPIXimage variable in change(iPIXimage) to set which image is loaded? Now, without a value for iPIXimage, this functions doesn't do aythig particularly useful, so we'll pass that variable in with the links. Like so.. (Toggle Plain Text) <a href="#" onclick="change("image2.ipx");return false;">Image 2</a> <a href="#" onclick="change("image3.ipx");return false;">Image 3</a> <a href="#" onclick="change("image4.ipx");return false;">Image 4</a> <a href="#" onclick="change("image5.ipx");return false;">Image 5</a> etc... <a href="#" onclick="change("image2.ipx");return false;">Image 2</a> <a href="#" onclick="change("image3.ipx");return false;">Image 3</a> <a href="#" onclick="change("image4.ipx");return false;">Image 4</a> <a href="#" onclick="change("image5.ipx");return false;">Image 5</a> etc... The key here is clearly the onClick() call in each link. You should understand that the href part isn't actually doing anything at all (and it shouldn't). You could put anything you wanted in there and it wouldn't matter because the "return false;" part in onClick disables the link. It still calls change() though, which is exactly what you want. Notice that the in each call of change is a string parameter that is later included in newiPIX up above. This allows you to chose which link loads which image. Give it a try and let me know if anything doen't make sense. Oh, and one other thing. Don't worry about how I told you to give IDs to a bunch of stuff. They could be handy in the future, but they ended up not being necessary for right now after all. __________________ I can pick my friends. And I can pick my nose. So, why can't I pick my friend's nose? Last edited by EdSalamander; Jan 19th, 2005 at 12:37 PM.

Jan 19th, 2005, 12:08 PM	#9
loztboy99 Newbie Join Date: Jan 2005 Posts: 12 Rep Power: 0	dude you are seriously good, i'll try it later tonight. thanks a million

Jan 19th, 2005, 5:02 PM	#10
loztboy99 Newbie Join Date: Jan 2005 Posts: 12 Rep Power: 0	HI EdSalamander I understand exactly what your code is for but I till can't get nything to load, I have checked it so many times but just can't see what i am doing wrong. I am sorry to keep bothering you with this but this is becoming like a personal demon for me.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > JavaScript and Client-Side Browser Scripting

need some help please with scripting