#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Location
    Seattle
    Posts
    2
    Rep Power
    0

    JS variable works, then doesn't


    Hello Coders and Problem-Solvers!

    At the end of this, see the code for the entire page.

    Six thumbnails are visible on the right. On the left, one of them is displayed bigger, changing as the mouse moves over the thumbs.

    We would like for the correct file name to appear under the big image as it changes. Instead, only the first file name appears and does not change.
    ________________________________

    The JavaScript variable is
    Code:
    picNameArray[]
    Here is what picNameArray[] looks like, containing the file names of the thumbs.

    Code:
    picNameArray = ['0865-02','172649','0863-11','172696','0863-28','0080-18']
    ________________________________
    A script appends A.jpg to display the original 330 x 300 pixels.

    Code:
    <td border="0" height="300"
     width="300">
                <center>
                <script>document.write('<img src=images/gallery/'+picNameArray[0]+'A.jpg name="display" border=0 width=300 height=300 vspace=25 hspace=25>');
    	</script>
                </center>
                </td>
    ________________________________

    The following code is intended display the file name of the thumbnail images that has mouseOver focus

    Code:
                <td alignment="bottom" width="350"><font
     monaco="" helvetica="" verdana="" face="arial,"
     size="-1"><!-- We don't want to display the numbers, so remove from the following line after 460> 
    			<CENTER>'+picNameArray[0]+'</CENTER>
    			PJS 9-7-2013
    		!--> </font>
                <center><font monaco="" helvetica=""
     verdana="" face="arial," size="-1"><br>
                <script>
    			document.write('<DIV ID="caption"><LAYER ID="cap" pagex=0 pagey=460><CENTER>'+picNameArray[0]+'</CENTER></Layer></DIV>');
    		</script>
                <br>
                </font></center>
                <font monaco="" helvetica="" verdana=""
     face="arial," size="-1"> </font></td>
    It sticks with the first file name. How come the code works to display the picture but not the file name? How can I make it display the correct file name that is under the mouse pointer?
    ________________________________

    Below is the code for the entire page.

    Enjoy the puzzle and thank you for helping me!
    Peter
    ________________________________
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
      <title>Penguin Planet - photographic book by Kevin Schafer</title>
      <script language="javascript">
    <!--
    
    /*Code generated by the onMouseover whipper
    Visit http://wsabstract.com for more info*/
    
    b26=new Image(133,22)
    b26.src="images/buttons/book.gif"
    b804=new Image(133,22)
    b804.src="images/buttons/bookb.gif"
    
    a672=new Image(133,22)
    a672.src="images/buttons/aboutp.gif"
    a60=new Image(133,22)
    a60.src="images/buttons/aboutpb.gif"
    
    e356=new Image(133,22)
    e356.src="images/buttons/links.gif"
    e336=new Image(133,22)
    e336.src="images/buttons/linksb.gif"
    
    e357=new Image(133,22)
    e357.src="images/buttons/prints.gif"
    e600=new Image(133,22)
    e600.src="images/buttons/printsb.gif"
    
    b27=new Image(133,22)
    b27.src="images/buttons/stock.gif"
    b966=new Image(133,22)
    b966.src="images/buttons/stockb.gif"
    
    a639=new Image(133,22)
    a639.src="images/buttons/aboutks.gif"
    a808=new Image(133,22)
    a808.src="images/buttons/aboutksb.gif"
    
    e613=new Image(133,22)
    e613.src="images/buttons/contact.gif"
    e107=new Image(133,22)
    e107.src="images/buttons/contactb.gif"
    
    c794=new Image(133,22)
    c794.src="images/buttons/home.gif"
    c654=new Image(133,22)
    c654.src="images/buttons/homeb.gif"
    
    b460=new Image(133,62)
    b460.src="images/buttons/kids.gif"
    b875=new Image(133,62)
    b875.src="images/buttons/kidsb.gif"
    //-->
    
    <!--
    function filter(imagename,objectsrc){
    if (document.images)
    document.images[imagename].src=eval(objectsrc+".src")
    }
    //-->
    
    /* peBo JScript for mouseover display 
    Image Names go in Quotes WITHOUT the A or B and without the '.jpg'
    '0863-11','0863-18','0863-19','0863-20','0863-21','0863-23','0863-28','0863-29'
    */
    
    picNameArray = ['0865-02','172649','0863-11','172696','0863-28','0080-18']
    
    <!-- removed 0865-15, 0863-18 added 172649, PJS 9-7-2013--!>  
    
    bName = navigator.appName;
    loader=new Image();
    loader.src='loadingA.gif';
        
    var bigShots = new Array(picNameArray.length);
    
    function loadDisplayImages() {
    	for(var l = 0;l<picNameArray.length;l++){
    		bigShots[l]=new Image();
    		bigShots[l].src = "images/gallery/"+picNameArray[l]+"A.jpg";
    		}
    	}	
    
    function makeShot(position){
    	document.write('<A HREF="#" onMouseOver="show('+position+')"><img src="images/gallery/thumbs/'+picNameArray[position]+ 'B.jpg" border=0 vspace=5></A>');
    	
    	}
    
    function show(pos) {
    	if (bigShots[pos]) {
    		document.display.src=bigShots[pos].src;
    		if (bName=="Microsoft Internet Explorer"){caption.innerText=picNameArray[pos];}
    	
    		else if (bName=="Netscape") {
    			document.cap.document.open();
    			document.cap.document.write("<CENTER>"+picNameArray[pos]+"</CENTER>");
    			document.cap.document.close();
    			}
    		else {document.display.src='loadingA.gif';}	
    	}
    }	
    //-->
    	</script>
    </head>
    <body topmargin="0" leftmargin="0"
     onload="loadDisplayImages()" alink="#ffff33"
     background="images/bg.gif" link="#ff9900"
     marginheight="0" marginwidth="0" text="white"
     vlink="#ffcc00">
    <table align="left" border="0" cellpadding="0"
     cellspacing="0" width="750">
      <tbody>
        <tr>
          <td colspan="2" align="left" valign="top"><img
     src="images/pp.gif" alt="Penguin" planet=""
     align="left" border="0" height="90" width="700"></td>
          <td rowspan="2" bgcolor="white" valign="top"><img
     src="images/spacer.gif" border="0" width="1"></td>
        </tr>
        <tr>
          <td align="left" valign="top" width="600"><font
     monaco="" helvetica="" verdana="" face="arial,">
          <img src="images/titles/gallery.gif" alt="The"
     gallery="" border="0" height="33" hspace="25"
     width="133">
          <table border="0" cellpadding="0" cellspacing="0"
     width="600">
            <tbody>
              <tr>
    <!--TARGET  --> <td border="0" height="300"
     width="300">
                <center>
                <script>document.write('<img src=images/gallery/'+picNameArray[0]+'A.jpg name="display" border=0 width=300 height=300 vspace=25 hspace=25>');
    	</script>
                </center>
                </td>
    <!--THUMBNAILS --> <td rowspan="2" width="250">
                <table border="0" width="250">
                  <tbody>
                    <tr>
                      <td>
                      <center>
                      <script>makeShot(0)</script></center>
                      </td>
                      <td>
                      <center>
                      <script>makeShot(1)</script></center>
                      </td>
                    </tr>
                    <tr>
                      <td>
                      <center>
                      <script>makeShot(2)</script></center>
                      </td>
                      <td>
                      <center>
                      <script>makeShot(3)</script></center>
                      </td>
                    </tr>
                    <tr>
                      <td>
                      <center>
                      <script>makeShot(4)</script></center>
                      </td>
                      <td>
                      <center>
                      <script>makeShot(5)</script></center>
                      </td>
                    </tr>
                  </tbody>
                </table>
                </td>
              </tr>
              <tr>
                <td alignment="bottom" width="350"><font
     monaco="" helvetica="" verdana="" face="arial,"
     size="-1"><!-- We don't want to display the numbers, so remove from the following line after 460> 
    			<CENTER>'+picNameArray[0]+'</CENTER>
    			PJS 9-7-2013
    		!--> </font>
                <center><font monaco="" helvetica=""
     verdana="" face="arial," size="-1"><br>
                <script>
    			document.write('<DIV ID="caption"><LAYER ID="cap" pagex=0 pagey=460><CENTER>'+picNameArray[0]+'</CENTER></Layer></DIV>');
    		</script>
                <br>
                </font></center>
                <font monaco="" helvetica="" verdana=""
     face="arial," size="-1"> </font></td>
              </tr>
              <tr>
                <td align="bottom" width="350"><font
     monaco="" helvetica="" verdana="" face="arial,"
     size="-1"> </font>
                <center><font monaco="" helvetica=""
     verdana="" face="arial," size="-1"> 1 | <a
     href="gallery2.html">2</a> | <a
     href="gallery3.html">3</a> | <a
     href="gallery4.html">4</a> | <a
     href="gallery5.html">5</a> | <a
     href="gallery6.html">6</a> |</font></center>
                <font monaco="" helvetica="" verdana=""
     face="arial," size="-1"> </font></td>
                <td><img src="images/spacer.gif"></td>
              </tr>
              <tr>
                <td colspan="2" align="bottom" width="600"><font
     monaco="" helvetica="" verdana="" face="arial,"
     size="-1"> <br>
                </font>
                <blockquote><font monaco="" helvetica=""
     verdana="" face="arial," size="-1"> </font>
                  <p align="justify"><font monaco=""
     helvetica="" verdana="" face="arial," size="-1">
    All of these images from PENGUIN PLANET are available as fine-art
    prints, or for commercial stock photo use. Please contact us for more
    information. </font></p>
                </blockquote>
                </td>
              </tr>
            </tbody>
          </table>
          <br clear="all">
          </font>
          <blockquote><font monaco="" helvetica=""
     verdana="" face="arial,"> <br>
            <br>
            </font>
            <p align="justify"><font monaco=""
     helvetica="" verdana="" face="arial,"> </font></p>
            <center><font monaco="" helvetica=""
     verdana="" face="arial,"><img src="images/line.gif"
     border="0" height="1" width="520"></font></center>
            <font monaco="" helvetica="" verdana=""
     face="arial,"> <font color="#ffcc00" size="-1"><i>Please
    note that all of the images on this site are protected by copyright law
    and permission is required to use them in any way - on-line or off -
    please respect this and contact us for any usage.</i> <br>
            <br>
            </font></font></blockquote>
          <font monaco="" helvetica="" verdana=""
     face="arial,"><font color="#ffcc00" size="-1">
          </font></font></td>
          <td valign="top" width="150">
          <table valign="top" align="right" cellpadding="0"
     cellspacing="0" width="10">
            <tbody>
              <tr>
                <td height="22" width="133"><img
     src="images/buttons/galleryb.gif" name="c674"
     alt="The Gallery" border="0" height="22"
     width="133"></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="book.html" onmouseover="filter('b379','b804')"
     onmouseout="filter('b379','b26')"><img
     src="images/buttons/book.gif" name="b379" alt="The Book"
     border="0" height="22" width="133"></a></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="aboutp.html" onmouseover="filter('a812','a60')"
     onmouseout="filter('a812','a672')"><img
     src="images/buttons/aboutp.gif" name="a812"
     alt="About Penguins" border="0" height="22"
     width="133"></a></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="links.html" onmouseover="filter('e918','e336')"
     onmouseout="filter('e918','e356')"><img
     src="images/buttons/links.gif" name="e918"
     alt="Penguin Links" border="0" height="22"
     width="133"></a></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="prints.html" onmouseover="filter('e898','e600')"
     onmouseout="filter('e898','e357')"><img
     src="images/buttons/prints.gif" name="e898"
     alt="Penguin Prints" border="0" height="22"
     width="133"></a></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="stock.html" onmouseover="filter('b284','b966')"
     onmouseout="filter('b284','b27')"><img
     src="images/buttons/stock.gif" name="b284"
     alt="Stock Photography" border="0" height="22"
     width="133"></a></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="aboutks.html" onmouseover="filter('a96','a808')"
     onmouseout="filter('a96','a639')"><img
     src="images/buttons/aboutks.gif" name="a96"
     alt="About Kevin Schafer" border="0" height="22"
     width="133"></a></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="contact.html" onmouseover="filter('e684','e107')"
     onmouseout="filter('e684','e613')"><img
     src="images/buttons/contact.gif" name="e684"
     alt="Contact Us" border="0" height="22"
     width="133"></a></td>
              </tr>
              <tr>
                <td height="22" width="133"><a
     href="index.html" onmouseover="filter('c849','c654')"
     onmouseout="filter('c849','c794')"><img
     src="images/buttons/home.gif" name="c849" alt="Home"
     border="0" height="22" width="133"></a></td>
              </tr>
    <!-- removed a <tr>  with link to kids.html. The code is preserved in Work Log.txt PJS 9-8-2013 !-->
              <tr>
                <td>
                <center><a href="order.html"><img
     src="images/order_2013.jpg" alt="Penguin" planet=""
     cover="" border="0" height="100" vspace="15"
     width="102"></a></center>
                </td>
              </tr>
            </tbody>
          </table>
          </td>
        </tr>
      </tbody>
    </table>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    22
    Rep Power
    0
    I am sorry, I am not trying being rude but your code is wrong and messy on so many level. It is not just Javascript but your HTML is not even following any HTML rule. I am even surprise that this code actually runs.

    As advise of the code, I suggest (for any beginner) try to use HTML image rendering rather then using javascript to dynamically render the code.

    That is

    Code:
    <img src="image_url" alt="image text description">
    That will render an image when HTML DOM is created.

    FYI, if you are using XHTML or strict HTML doctype, you may need to close your image tag
    Code:
    <img src="image_url" alt="image text description" />
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Location
    Seattle
    Posts
    2
    Rep Power
    0

    Thank you, jkdev


    Yeah, the code is really a mess.

    It's not mine, I'm just "the plumber" whom Kevin calls to fix things.

    We did some of that recently, part of which was to hide the file names, since they are not displaying properly. He doesn't want to spend any more, so I'm just trying to correct as a friend and to enjoy the puzzle.

    Thank you for your time!
    Peter



    Originally Posted by jkdev
    I am sorry, I am not trying being rude but your code is wrong and messy on so many part. It is not just Javascript but your HTML is not even following any HTML rule. I am even surprise that this code actually runs.

    As advise of the code, I suggest for your level, try to use HTML image rendering rather then using javascript to dynamically render the code.

    That is

    Code:
    <img src="image_url" alt="image text description">
    That will render an image when HTML DOM is created.

    FYI, if you are using XHTML or strict HTML doctype, you may need to close your image tag
    Code:
    <img src="image_url" alt="image text description" />

IMN logo majestic logo threadwatch logo seochat tools logo