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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Forcing title to match selected thumnail 1

Status
Not open for further replies.
SlowFlight

SlowFlight

Programmer
Jan 2, 2003
33
US
I have a photo gallery set up at:

When the mouse pointer rests over an image it displays the contents of the "title" tag. The large picture changes when each thunbnail is selected. However, the title for the large picture does not change as the picture changes. How can I force the displayed title of the large picture to match the title of the selected thumbnail?

Skip

SV "Slow Flight"
1977 Catalina 22 Swing Keel
 
Sort by date Sort by votes
Something like this. However, I suggest maybe creating a function for these, it'll cut down on code.


Code: 
<a href="#" onclick="switch('Barbara_and_David_Dickman.jpg', this); return false;"><img src="tn-Barbara_and_David_Dickman.jpg" width="80" height="60" alt="Barbara &amp; David Dickman s/v Fourth Chakra" title="Barbara &amp; David Dickman s/v Fourth Chakra" border="0" /></a>

Your function would look like this:

Code: 
function switch( picURL, picA ) {
    var i = document.PictureFrame;
    i.src = picURL;
    i.title = picA.firstChild.title;
}

Just notice no spaces between the <a> tag and the <img> tag.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
When I used your suggested code verbatim, it did not work. Did you leave something out?

SV "Slow Flight"
1977 Catalina 22 Swing Keel
 
Upvote 0 Downvote
Nope, didn't leave anything. It might not have liked the word "switch". The code below is tested and it works.

Code: 
<html>

<head>

<script>
<!--

function changeImage( url, obj ) {
    var img = document.getElementById('mainImage');
	img.src = url;
	img.title = obj.firstChild.title;
}

-->
</script>

</head>

<body>

<table border="1"><tr>
<td>
	<a href="#" onclick="changeImage('[URL unfurl="true"]http://www.ibm.com/i/v14/t/ibm-logo.gif',[/URL] this); return false;">
		<img src="[URL unfurl="true"]http://www.ibm.com/i/v14/t/ibm-logo.gif"[/URL] title="IBM" />
	</a><br />
	<a href="#" onclick="changeImage('[URL unfurl="true"]http://us.a1.yimg.com/us.yimg.com/i/ww/beta/y3.gif',[/URL] this); return false;">
		<img src="[URL unfurl="true"]http://us.a1.yimg.com/us.yimg.com/i/ww/beta/y3.gif"[/URL] title="Yahoo!" />
	</a><br />
	<a href="#" onclick="changeImage('[URL unfurl="true"]http://www.google.com/images/logo.gif',[/URL] this); return false;">
		<img src="[URL unfurl="true"]http://www.google.com/images/logo.gif"[/URL] title="Google" />
	</a><br />
</td>
<td>
	<img id="mainImage" src="[URL unfurl="true"]http://www.google.com/images/logo.gif"[/URL] title="Google" />
</td>
</tr></table>

</body>


</html>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
cLFlaVA,

It may be "proven". But it does not work. I copied your text EXACTLY (cut & paste) as a new html file. The images show up as desired. And each image initially displays the correct title with a mouse over. But once I change the right side image by clicking on another image, the title for the right side image is displayed as "undefined". Regardless of which image I click on, the image to the right displays the title of "undefined".

Skip

SV "Slow Flight"
1977 Catalina 22 Swing Keel
 
Upvote 0 Downvote
what browser

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
My HUMBLE apologies!
Please accept my thanks.
Your second code included spaces before the img tag. Once those were removed everything worked fine. Now I have to modify the code for all the gallery pages.

Again, thanks!

Skip

SV "Slow Flight"
1977 Catalina 22 Swing Keel
 
Upvote 0 Downvote
oh wow, sorry. i don't know why it worked for me. i'm glad you deciphered the problem :)

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
366
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
720
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
362
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
642
Mike Lewis
Mike Lewis
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
691
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top