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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

JS variable works to display pictures but not file names

Status
Not open for further replies.
peteschulte

peteschulte

IS-IT--Management
Nov 21, 2008
41
US
Hello Coders and Problem-Solvers!

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

On an old web 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 same variable is called for both operations, but only works for the picture display, not for the filename.
________________________________

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 the filename, to display its image in 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">

    <!-- We don't want to display the numbers, so remove from the following line after "460>" <CENTER>'+picNameArray[0]+'</CENTER> PJS 9-7-2013 !-->

    <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>
</td>


It displays only the first file name. You can change it manually.

How come the variable 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?

Thank you,
Peter


smiletiniest.gif
Pete S
 
Sort by date Sort by votes
Give the caption element an ID and change the .innerHTML property in the same script that sets the image .src

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Chris, thanks!

For my benefit, I'm noting some W3 Schools code here to explain your directions.

Code: 
<html>
<head>
<script type="text/javascript">
function displayResult()
{
document.getElementById("myHeader").innerHTML="Have a nice day!";
}
</script>
</head>

<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
</body>

</html>

[URL unfurl="true"]http://www.w3schools.com/tags/att_global_id.asp[/url]

As time permits, I'll return to your solution of this.

Thanks again,
Peter Schulte



smiletiniest.gif
Pete S
 
Upvote 0 Downvote
ChrisHirst,

Thanks again for taking an interest and in advance for your reply to the following.

You wrote, "Give the caption element an ID" and I don't know what caption element you are referring to. Are you referring to the following?

Code: 
<SCRIPT>
     document.write('<DIV ID="caption"><LAYER ID="cap" pagex=0 pagey=460>
     <CENTER>'+picNameArray[0]+'</CENTER></Layer></DIV>');
</SCRIPT>

I think not because this DIV is assigned the ID "caption" -- your instruction would be circular somehow.

Are you referring to the HTML <caption> element, which displays a title above a table? We're not using a separate table to display the titles. We have only 2 nested tables, one for the thumbs and one for the right nav.
_________________________________

You also wrote, "change the .innerHTML property in the same script that sets the image .src."
I can see where to do this,

Code: 
<!TARGET  >
   <td width=300 height=300 border=0>
     <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>

but I don't know how. I would really enjoy learning it, if you have time to explain. (Wish I could find a way to PM this to you and draw your attention to it.)

BTW, I'm not doing this for pay, though Kevin Schafer has been a lucrative client over the years -- just for love of a puzzle and learning more JS.

Thanks again!



smiletiniest.gif
Pete S
 
Upvote 0 Downvote
Caption" as in the abstract publishing meaning of "Text that goes with an image"

(Wish I could find a way to PM this to you and draw your attention to it.)
Click to expand...
The thread sends a notification by email.


And you really should get rid of the "<layer>" element, it never has been a 'real' element in ANY W3c specification, it was invented by Netscape for their browser back in the days when HTML was new.



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Thanks again Chris! I was on a wild goose chase.

Next to figure out the implementation, maybe over the weekend.

smiletiniest.gif
Pete S
 
Upvote 0 Downvote
Hi Chris,

I took your advice to get rid of the <layer> element like this. No joy. Any suggestions?

Code: 
<script>
<!--
document.write('<DIV ID="caption"><layer ID="cap" pagex=0 pagey=460><CENTER>'+picNameArray[2]+'</CENTER></layer></DIV>');
--!>
document.write('<DIV ID="caption" pagex=0 pagey=460><CENTER>'+picNameArray[0]+'</CENTER></DIV>');
document.write('<DIV ID="cap" pagex=0 pagey=460><CENTER>'+picNameArray[0]+'</CENTER></DIV>');
</script>

Thank you,
Peter

smiletiniest.gif
Pete S
 
Upvote 0 Downvote
Replace "<layer" and "</layer" with "<div" and "</div" or "<p" and "</p"

And instead of "<CENTER> apply text-align: center; to the parent

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
Thank you Chris.

I made those changes, then viewing source in Chrome I saw a lot of messed up tags, unrelated to the changes you advised.

It's time to "zoom out" conceptually and correct other errors that may be breaking the page.

[URL unfurl="true"]http://www.kevinschafer.com/penguinplanet/gallery_10-1-2013_v2.html[/url]

I'll do this before asking anything more, then give you an update. Off to work now.

Thanks again,


smiletiniest.gif
Pete S
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
293
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
407
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
237
rogerte
rogerte
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
321
Kennelbloke
Kennelbloke
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
363
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top