Image and Link changing

bszen27

10-30-2009, 03:00 PM

First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link).

I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked.

Help please...

<script type="text/javascript">

</script>

</head>

<body>

<h3>Real Estate</h3>

<p><img src="images/cottage_small.jpg" id="thumbnail"></p>

<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>

</body>

</html>

itsallkizza

10-30-2009, 03:14 PM

You'll want to modularize this for larger-scope usage (e.g. if you want multiple links and multiple thumbs on the same page) but just to give you the idea:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
// <![CDATA[

window.onload = function()
{
var clink = document.getElementById("link");
var thumb = document.getElementById("thumbnail");
clink.text1 = clink.innerHTML;
clink.text2 = "View Smaller Image";
thumb.src1 = thumb.src;
thumb.src2 = "images/cottage_large.jpg";
clink.thumb = thumb;
clink.onclick = function()
{
if (this.innerHTML == this.text1)
{
this.thumb.src = this.thumb.src2;
this.innerHTML = this.text2;
}
else
{
this.thumb.src = this.thumb.src1;
this.innerHTML = this.text1;
}
return false;
}
}

// ]]>
</script>
</head>
<body>

<h3>Real Estate</h3>

<p><img src="images/cottage_small.jpg" id="thumbnail" /></p>

<a href="#" id="link">View Larger Image</a>

</body>
</html>

bszen27

10-30-2009, 03:23 PM

If you had a smiley that bowed to the knees of the poster, I would have inserted it into this reply. I knew it had to me some type of if-else statement, but what you did makes a lot of sense from a global perspective. THANKS!!!

In general, is it common for a coder to use <a href="#"> when a link is not needed? Is there an alternative if not?

Old Pedant

10-31-2009, 02:26 AM

It's good practice to use an href in the <A> tag. Not sure, but I think XHTML requires it.

It really doesn't matter WHAT you put there, though, so long as your onclick handler returns false, as he did there.

The return false *cancels* the normal effect of the <A> tag, which is to jump to the URL specified in the HREF.

itsallkizza

10-31-2009, 09:59 AM

The anchor tag needs an href (even if empty) for all anchor-related CSS styles and DOM properties to be assigned to it cross-browser.