I am new to javascript. I have managed to get a slideshow together but I my horizontal slides appear distorted in a vertical format. There is a vertical image in place before the slideshow begins so I'm assuming it's orientation becomes the norm. At one point, I removed the hieght and width attributes from the initial static image and it worked! But I'm using FrontPage 2000 which inserted the height and width back in on it's own and even if I delete them again it doesn't work anymore. I also cannot get rid of the grey band under the image?! The slideshow is at <br><A HREF=" TARGET="_new"> the Before and the Demolition texts will start a slide show. My code for the page follows below.<br>Thank you in advance to any suggestion one might offer me!<br>Tracy<br><br><html><br><br><head><br><br><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><br><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><br><meta name="ProgId" content="FrontPage.Editor.Document"><br><br><title>RAC Design ¦ Build</title><br><br><SCRIPT LANGUAGE="JavaScript"><br><!-- Beginning of JavaScript - Slideshow<br> <br>if (document.images) {<br><br> bef = new Array()<br> <br> bef[1] = new Image(280, 210);<br> bef[1].src = "images/blackman/backclip.jpg";<br><br> bef[2] = new Image(280, 210);<br> bef[2].src = "images/blackman/before/ext1.jpg";<br> <br> bef[3] = new Image(210, 280);<br> bef[3].src = "images/blackman/before/ext2.jpg";<br> <br> bef[4] = new Image(210, 280);<br> bef[4].src = "images/blackman/before/ext3.jpg";<br><br> bef[5] = new Image(210, 280);<br> bef[5].src = "images/blackman/before/ext4.jpg";<br><br> bef[6] = new Image(210, 280);<br> bef[6].src = "images/blackman/before/ext5.jpg";<br> <br> bef[7] = new Image(210, 280);<br> bef[7].src = "images/blackman/before/int1.jpg";<br><br> bef[8] = new Image(210, 280);<br> bef[8].src = "images/blackman/before/int2.jpg";<br><br> bef[9] = new Image(280, 210);<br> bef[9].src = "images/blackman/backclip.jpg";<br>}<br><br>var timer = null<br>var counter = 1<br><br>function slideshowBefore() {<br> timer=setTimeout("slideshowBefore()", 2000);<br> counter++;<br> if (counter >= 10) <br> endtimerBefore();<br> document.pics.src = bef[counter].src;<br>}<br><br>function endtimerBefore() {<br> <br> document.pics.src = bef[8].src;<br> clearTimeout(timer);<br> counter = 1;<br>}<br><br>if (document.images) {<br><br> dem = new Array()<br> <br> dem[1] = new Image(280, 210);<br> dem[1].src = "images/blackman/backclip.jpg";<br><br> dem[2] = new Image(210, 280);<br> dem[2].src = "images/blackman/demo/demo1.jpg";<br> <br> dem[3] = new Image(210, 280);<br> dem[3].src = "images/blackman/demo/demo2.jpg";<br> <br> dem[4] = new Image(210, 280);<br> dem[4].src = "images/blackman/demo/demo3.jpg";<br><br> dem[5] = new Image(210, 280);<br> dem[5].src = "images/blackman/demo/demo4.jpg";<br><br> dem[6] = new Image(210, 280);<br> dem[6].src = "images/blackman/demo/demo5.jpg";<br> <br> dem[7] = new Image(280, 210);<br> dem[7].src = "images/blackman/demo/demo6.jpg";<br><br> dem[8] = new Image(280, 210);<br> dem[8].src = "images/blackman/demo/demo7.jpg";<br><br> dem[9] = new Image(280, 210);<br> dem[9].src = "images/blackman/backclip.jpg";<br>}<br><br>var timer = null<br>var counter = 1<br><br>function slideshowDemo() {<br> timer=setTimeout("slideshowDemo()", 2000);<br> counter++;<br> if (counter >= 10) <br> endtimerDemo();<br> document.pics.src = dem[counter].src;<br>}<br><br>function endtimerDemo() {<br> <br> document.pics.src = dem[8].src;<br> clearTimeout(timer);<br> counter = 1;<br>}<br><br>// - End of JavaScript - Slideshow --><br></SCRIPT><br><br><br></head><br><br><BODY BGCOLOR="#999966"><br><DIV ALIGN="center"><br><br><TABLE BGCOLOR="999966" WIDTH="685" HEIGHT="494" BORDER="0" CELLSPACING="0" CELLPADDING="0"><br><br><!--[1_Horiz_top_border_outer_table]--> <br> <TR><br> <TD BGCOLOR="#ffffcc" COLSPAN="5" WIDTH="685" HEIGHT="1"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD><br> </TR><br><!--[/1_Horiz_top_border_outer_table]--><br> <br><!--[2_Vert_left_border_outer_table]--> <br> <TR><br> <TD BGCOLOR="#ffffcc" ROWSPAN="3" WIDTH="1" HEIGHT="492"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD><br><!--[/2_Vert_left_border_outer_table]--><br><!--[3_MENU_TOP]--> <br> <TD BGCOLOR="#999966" COLSPAN="3" ALIGN="LEFT" VALIGN="top" WIDTH="683" HEIGHT="60"><br> <img border="0" src="images/mainMenuWp.gif" width="683" height="60"></TD><br><!--[/3-MENU_TOP]--><br><!--[4-Vert_right_border_outer_table]--><br> <TD BGCOLOR="#ffffcc" ROWSPAN="3" WIDTH="1" HEIGHT="492"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD><br> </TR><br><!--[/4-Vert_right_border_outer_table]--><br><br><!--[5_MENU_LEFT]--><br> <TR><br> <TD BGCOLOR="#999966" ALIGN="LEFT" VALIGN="top" WIDTH="175" HEIGHT="412"><br> </TD><br><!--[/5_MENU_LEFT]--><br><br><!--[6_Cell_Containing_Inner_Table]--><br> <TD WIDTH="468" HEIGHT="412"><br> <TABLE WIDTH="468" HEIGHT="412" BORDER="0" CELLSPACING="0" CELLPADDING="0"><br> <br> <!--[A)_Horiz_top_border_inner_table]--> <br> <TR><br> <TD BGCOLOR="FFFFCC" WIDTH="468" HEIGHT="1" COLSPAN="3"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD><br> </TR><br> <!--[/A)_Horiz_top_border_inner_table]--><br> <br> <!--[B)_Vert_left_border_inner_table]--><br> <TR><br> <TD BGCOLOR="FFFFCC" WIDTH="1" HEIGHT="410" ROWSPAN="5"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD> <br> <!--[/B)_Vert_left_border_inner_table]--><br> <!--[C)_Horiz_menu_cell_inner_table]--><br> <TD BGCOLOR="660000" ALIGN="left" WIDTH="466" HEIGHT="20"><br> <a href="Javascript:void(slideshowBefore())"><img alt="before" border="0" src="images/blackman/before_off.gif" width="50" height="20"></a><br> <a href="Javascript:void(slideshowDemo())"><img alt="demo" border="0" src="images/blackman/demo.gif" width="70" height="20"></a><br> <img border="0" src="images/blackman/concrete.gif" width="65" height="20"><br> <img border="0" src="images/blackman/framing.gif" width="58" height="20"><br> <img border="0" src="images/blackman/windows.gif" width="62" height="20"><br> <img border="0" src="images/blackman/crew.gif" width="32" height="20"><br> </TD><br> <!--[/C)_Horiz_menu_cell_inner_table]--><br> <!--[D)_Vert_right_border_inner_table]--><br> <TD BGCOLOR="FFFFCC" WIDTH="1" HEIGHT="410" ROWSPAN="5"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD><br> </TR><br> <!--[/D)_Vert_right_border_inner_table]--> <br> <br> <!--[E)_Horiz_top_cell_inner_table]--><br> <TR><br> <TD BGCOLOR="#333333" ALIGN="center" WIDTH="466" HEIGHT="10"><br> <img border="0" src="images/blackman/back1.gif" width="466" height="10"></TD><br> </TR><br> <!--[/E)_Horiz_top_cell_inner_table]--> <br> <br> <!--[F)_Horiz_image_cell_inner_table]--><br> <TR><br> <TD BGCOLOR="#333333" Background="images/blackman/back2.gif" ALIGN="center" WIDTH="466" HEIGHT="280" NAME="slides"><br> <img border="0" src="images/blackman/backclip.jpg" NAME="pics"><br> </TD><br> </TR><br> <!--[/F)_Horiz_image_cell_inner_table]--><br> <br> <!--[G)_Horiz_navigate_cell_inner_table]--><br> <TR><br> <TD BGCOLOR="#333333" ALIGN="center" WIDTH="466"><br> <img border="0" src="images/blackman/back3.gif" width="466" height="20"></TD><br> </TR><br> <!--[/G)_Horiz_navigate_cell_inner_table]--><br> <br> <!--[H)_Horiz_description_cell_inner_table]--><br> <TR><br> <TD BGCOLOR="#333333" ALIGN="center" WIDTH="466" HEIGHT="80"><br> <img border="0" src="images/blackman/back4.gif" width="466" height="80"></TD><br> </TR><br> <!--[/H)_Horiz_description_cell_inner_table]--><br> <br> <!--[I)_Horiz_bottom_border_inner_table]--> <br> <TR><br> <TD BGCOLOR="FFFFCC" WIDTH="468" HEIGHT="1" COLSPAN="3"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD><br> </TR><br> <!--[/I)_Horiz_bottom_border_inner_table]--><br> </TABLE><br> </TD><br><!--[/6_Cell_Containing_Inner_Table]--><br><br><!--[7_Vert_space_at_right_outer_table]--><br> <TD BGCOLOR="999966" WIDTH="40" HEIGHT="412"></TD><br> </TR><br><!--[/7_Vert_space_at_right_outer_table]--><br><br><!--[8_Horiz_space_at_bottom_outer_table]--><br> <TR><br> <TD BGCOLOR="999966" COLSPAN="3" WIDTH="683" HEIGHT="20"> </TD><br> </TR><br><!--[/8_Horiz_space_at_bottom_outer_table]--><br><br><!--[9_Horiz_bottom_border_outer_table]--><br> <TR><br> <TD BGCOLOR="FFFFCC" COLSPAN="5" WIDTH="685" HEIGHT="1"><br> <img src="images/1x1spacer.gif" width="1" height="1" border="0"></TD><br> </TR><br><!--[/9_Horiz_bottom_border_outer_table]--><br><br></table><br></body><br>
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!
-
Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
vertical and horizontal orientation in slideshow - how to get both?
- Thread starter tcortez
- Start date
First things first, trash Frontpage 2000, and buy HomeSite and Dreamweaver (or even just Homesite - it goes for about 100 bucks I think).<br><br>Secondly, pardon me, but I dont quite understand what you mean by vertical or horizontal orientation. Please explain...<br><br><A HREF="mailto:jared@aauser.com">jared@aauser.com</A>
- Thread starter
- #3
Hi jared, I thought someone might say that! I'll definitely take that into consideration. What I mean be vertical and horizontal orientation:<br>I have jpegs from my digital camera. Some were taken in the portrait or vertical orientation and some were taken in landscape or horizontal orientation. The vertical images are 280 tall x 210 wide, the horizontal images are 210 tall x 280 wide. You'll notice on my website that all images are showing up vertical 280 tall x 210 wide. You can tell which are supposed to be horizontal from my code or from the images themselves. The ones that are supposed to be horizontal are distorted with jagged edges.
tcortez,<br><br>Try this:<br><br>document.pics.width = nCorrectWidth;<br>document.pics.height = nCorrectHeight;<br><br>I've never done that so I don't know if it works. <br><br>If not you will need to provide separate image tags for each different height/width combination you have. Then control their visibility when you switch images into the img elements in the different layers.<br><br>Good luck<br>-pete<br><br>
If youre experiencing the problem in Netscape, it's because it cannot reflow a document, so an image replacement must be the same as the original, or else it will stretch or clip it to fit...<br><br><br><A HREF="mailto:jared@aauser.com">jared@aauser.com</A>
theEclipse
Programmer
You said that it worked if you remove the imags's width, and height tags (untill frontpage screwed with it). Well, a slideshow with different images will only work if the browser is ie 5.0, and no width, or height attributes are used in the original image.<br><br>We've all tried to do that, and for the most part failed.<br>Yet another flaw of netscape.<br> <p>theEclipse<br><a href=mailto:eclipse_web@hotmail.com>eclipse_web@hotmail.com</a><br><a href=robacarp.webjump.com>robacarp.webjump.com</a><br>**-Trying to build a documentation of a Javascript DOM, crossbrowser, of course. E-mail me if you know of any little known events and/or methods, etc.
- Thread starter
- #7
Thank you to everyone who commented. It helps to know when something you are trying to do can't be done or not easily at least. Jared, it doesn't work in IE 5.0 as well as Netscape. But since you let me know Netscape can't do it and theEclipse let me know that I could marginally pull it off but only in IE 5, I think it's time to try something simpler that will work on both platforms.
- Status
Similar threads
- Locked
- Question