Javascript problem [Archive] - HTML Forums - Free Webmaster Forums and Help Forums

celticstown

07-11-2009, 11:59 AM

I am trying to create a frontpage with a main image that is replaced by other images that can be clicked as thumbnails. I have succeeded in doing that, but am now looking to have a headline that links to another page in my site that would change as the images change. Here's my code, please help.

<script language="javascript">
function swapPhoto(photoSRC) {
document.images.imgPhoto.src = photoSRC;
}
</script>
<table width=550 height=45 style="background-color: #000000" style="color: #ffffff">
<tr><td><center><p><font size=5 style="color: #ffffff">New Articles</p></font></center></tr></td>
</table>
<table width=550 style="text-align:center" border=3 style="border-color: #000000">
<tr><td border=5 style="border-color:#000000">
<img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" id="imgPhoto" width="510" height="340" alt="Main Image" /></tr></td>
<tr><td border=5 style="border-color:#000000"><a href="javascript:swapPhoto
('http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg')"; return false;"><img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" width="123" height="82" border=0 /></a></a>
<a href="javascript:swapPhoto
('http://cdn.picapp.com/ftp/Images/4/a/f/a/NBA_MAY_10_5253.JPG?adImageId=1825421&imageId=4792284')"; return false;"><img src="http://cdn.picapp.com/ftp/Images/4/a/f/a/NBA_MAY_10_5253.JPG?adImageId=1825421&imageId=4792284" width="123" height="82" border=0 /></a>
<a href="javascript:swapPhoto
('http://cdn.picapp.com/ftp/Images/3/e/3/5/NBA_Summer_League_1d14.JPG')"; return false;"><img src="http://cdn.picapp.com/ftp/Images/3/e/3/5/NBA_Summer_League_1d14.JPG" width="123" height="82" border=0 /></a>
<a href="javascript:swapPhoto
('http://cdn.picapp.com/ftp/Images/5/b/b/e/Kansas_State_v_d9d1.jpg?adImageId=1819870&imageId=3772329')"; return false;"><img src="http://cdn.picapp.com/ftp/Images/5/b/b/e/Kansas_State_v_d9d1.jpg?adImageId=1819870&imageId=3772329" width="123" height="82" border=0 /></a></tr></td>
</table>

Mandarin

07-11-2009, 02:11 PM

I'm including a complete rework of your front page, with simplified JavaScript and valid markup. On Firefox 3.5 and Internet Explorer 8, it's a pixel-for-pixel match to the code you posted. When you click on a thumbnail it replaces the large photo as before, but it also replaces the headline with the alt text from the thumbnail. I didn't really understand why you wanted your headline to link to other pages, so I left it out. Headlines describe the content on this page, they shouldn't generally be used as links. I'd recommend including a "Read more..." link below the headline that leads to an in-depth story.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Celtics Town</title>

<style type="text/css">
h1 {
width: 550px;
margin: 0;
padding: .8em 0;
background: #000;
font-size: 18pt;
font-weight: normal;
color: #fff;
text-align: center;
}

#PhotoSection {
border: 3px outset #000;
width: 544px;
}

#PhotoSection div {
margin: 2px;
padding: 1px;
border: 1px inset #000;
text-align: center;
}

#Thumbnails img {
cursor: pointer;
}
</style>

<script type="text/javascript">
function swapPhoto(photo) {
document.getElementById("imgPhoto").src = photo.src;
document.getElementById("Headline").innerHTML = photo.alt;
}
</script>

</head>

<body>

<h1 id="Headline">New Articles</h1>

<div id="PhotoSection">
<div>
<img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" id="imgPhoto" width="510" height="340" alt="Main Image" />
</div>
<div id="Thumbnails">
<img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" alt="Celtics" width="123" height="82" onclick="swapPhoto(this);" />
<img src="http://cdn.picapp.com/ftp/Images/4/a/f/a/NBA_MAY_10_5253.JPG" alt="NBA" width="123" height="82" onclick="swapPhoto(this);" />
<img src="http://cdn.picapp.com/ftp/Images/3/e/3/5/NBA_Summer_League_1d14.JPG" alt="NBA Summer League" width="123" height="82" onclick="swapPhoto(this);" />
<img src="http://cdn.picapp.com/ftp/Images/5/b/b/e/Kansas_State_v_d9d1.jpg" alt="Kansas State" width="123" height="82" onclick="swapPhoto(this);" />
</div>
</div>

</body>
</html>

Whatever tutorial you're using to learn HTML, I'd recommend you stop using it and find one from this millenium. The <font> and <center> tags have been deprecated since 1999, and tables should only be used to display tabular data, not for layouts. Nested tags must close before their parent elements are closed, like this:
Right: <outer><inner>Stuff</inner></outer>
Wrong: <outer><inner>Stuff</outer></inner>

You can keep using all of this stuff and it will probably work for years to come, but since you're just starting out it's the perfect time to learn things the right way. Also, when posting HTML to this forum it's easier to read when you wrap it in code tags like these:
HTML goes here

celticstown

07-12-2009, 09:34 AM

Can I put the read more right into the alt text? Or do I have to do something else to change to a different read more link for every photo?

Mandarin

07-12-2009, 06:02 PM

We'll define the target for the "Read more..." link by sending the target URL as a second variable to the swapPhoto function. I made two changes to swapPhoto, a change to each of the four image onclick events, and added the ReadMore link. I'm reposting the entire sample from before, with additions in blue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Celtics Town</title>

<style type="text/css">
h1 {
width: 550px;
margin: 0;
padding: .8em 0;
background: #000;
font-size: 18pt;
font-weight: normal;
color: #fff;
text-align: center;
}

#PhotoSection {
border: 3px outset #000;
width: 544px;
}

#PhotoSection div {
margin: 2px;
padding: 1px;
border: 1px inset #000;
text-align: center;
}

#Thumbnails img {
cursor: pointer;
}
</style>

<script type="text/javascript">
function swapPhoto(photo, link) {
document.getElementById("imgPhoto").src = photo.src;
document.getElementById("Headline").innerHTML = photo.alt;
document.getElementById("ReadMore").href = link;
}
</script>

</head>

<body>

<h1 id="Headline">New Articles</h1>
<div id="PhotoSection">
<div>
<img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" id="imgPhoto" width="510" height="340" alt="Main Image" />
<a id="ReadMore" href="one.html">Read more...</a>
</div>
<div id="Thumbnails">
<img src="http://blog.masslive.com/parquetpride/2008/08/large_jr-giddens-huge.jpg" alt="Celtics" width="123" height="82" onclick="swapPhoto(this,'one.html');" />
<img src="http://cdn.picapp.com/ftp/Images/4/a/f/a/NBA_MAY_10_5253.JPG" alt="NBA" width="123" height="82" onclick="swapPhoto(this,'two.html');" />
<img src="http://cdn.picapp.com/ftp/Images/3/e/3/5/NBA_Summer_League_1d14.JPG" alt="NBA Summer League" width="123" height="82" onclick="swapPhoto(this,'three.html');" />
<img src="http://cdn.picapp.com/ftp/Images/5/b/b/e/Kansas_State_v_d9d1.jpg" alt="Kansas State" width="123" height="82" onclick="swapPhoto(this,'four.html');" />
</div>
</div>

</body>
</html>

You can style and position the ReadMore link as you see fit.

celticstown

07-12-2009, 08:21 PM

I've been trying to work on that for weeks. I am completely html illiterate. Thank you so much.