Trying to change pic from link with onclick

CodyJava · 11-09-2012, 03:31 PM

I'm having trouble using the onclick. What im trying to do is by clicking a link i want it to change a picture. I've tried using the onclick with the getElementById and i've also tried to send it pack to a function. Also after the link is clicked I need it to change to say view smaller image and I need it to display the smaller one when it is clicked. Would I do this by using the innerHTML? Any help is appreciated thank you.

Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Chapter 11</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript"> //function isn't active not sure if it works
var img1 = cottage_small.jpg;
var img2 = cottage_large.jpg;
var choice = 1;

function change(){
if (choice == 1){
document.getElementById('pic').src="img2";
choice = 2;
}else if(choice == 2){
document.getElementById('pic').src="img1";
choice = 1;
}
}
</script>
</head>
<body>
<h1>Pine Knoll Properties</h1>
<br>
<h2>Single Family Hours</h2>
<br>
<p>Cottage: <b>$149,00</b><br>
2 bed, i bath, 1,189 square feet, 1.11 acres
<br>
<br>
<a id="large" href="" onclick="document.getElementById('pic').src='cottage_large.jpg';">
View Larger image</a>
<br>
<br>
<img id="pic" alt="" src="cottage_small.jpg">
</p>

</body>
</html>

Once again thanks.

DanInMa · 11-09-2012, 04:18 PM

Code:

var img1 = cottage_small.jpg;
var img2 = cottage_large.jpg;

should be

Code:

var img1 = "cottage_small.jpg";
var img2 = "cottage_large.jpg";

Code:

document.getElementById('pic').src="img2";
document.getElementById('pic').src="img1";

should be

Code:

document.getElementById('pic').src=img2;
document.getElementById('pic').src=img1;

CodyJava · 11-09-2012, 04:45 PM

Thank you do you know how I would change the links. Originally it says larger image and after click i want it to say smaller image. Would I use innerHTML thanks again.

CodyJava · 11-09-2012, 06:50 PM

I have updated my code but still nothing. Any help is appreciated.

Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Chapter 11</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var img1 = "cottage_small.jpg";
var img2 = "cottage_large.jpg";
var choice = 1;

function change(){
if (choice == 1){
document.getElementById('pic').src=img2;
choice = 2;
}else if(choice == 2){
document.getElementById('pic').src=img1;
choice = 1;
}
}
</script>
</head>
<body>
<h1>Pine Knoll Properties</h1>
<br>
<h2>Single Family Hours</h2>
<br>
<p>Cottage: <b>$149,00</b><br>
2 bed, i bath, 1,189 square feet, 1.11 acres
<br>
<br>
<a id="large" href="" onclick="change();">
View Larger image</a>
<br>
<br>
<img id="pic" alt="" src="cottage_small.jpg">
</p>

</body>
</html>

DanInMa · 11-09-2012, 06:56 PM

Code:

function change(el){
var myPic = document.getElementById('pic');
if (choice == 1){
myPic.src="img2";
el.innerHTML = "Small"
choice = 2;
}else if(choice == 2){
myPic.src="img1";
el.innerHTML = "Large"
choice = 1;
}
}


<a id="large" href="" onclick="change(this);">

i think this will do it.

CodyJava · 11-09-2012, 09:30 PM

I know this is aggravating but here's the code now it's still not working in fact its opening up windows explorer and going to the file when i use IE when I use chrome it just does nothing. Can you explain thanks.

<!DOCTYPE HTML>
<html>
<head>
<title>Chapter 11</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var choice = 1;

function change(el){ //is el element?
var myPic = document.getElementById('pic');
if (choice == 1){
myPic.src=cottage_large.jpg; //do I need to change the id in img to myPic??
el.innerHTML = "Small"
choice = 2;
}else if(choice == 2){
myPic.src=cottage_small.jpg;
el.innerHTML = "Large"
choice = 1;
}
}

</script>
</head>
<body>
<h1>Pine Knoll Properties</h1>
<br>
<h2>Single Family Hours</h2>
<br>
<p>Cottage: <b>$149,00</b><br>
2 bed, i bath, 1,189 square feet, 1.11 acres
<br>
<br>
<a id="large" href="" onclick="change(this);">
View Larger image</a>
<br>
<br>
<img id="pic" alt="" src="cottage_small.jpg">
</p>

</body>
</html>

Thanks I'm not good at js at all.

Old Pedant · 11-09-2012, 09:37 PM

If you do not return false from the onclick in an <a> tag, then the NORMAL ACTION of the <a> tag *WILL* take place. Meaning that the browser will ask the server for the page specified by the href and load it, wiping out the current page.

In your <a>, the href is blank, which the browser interprets to mean "this same page". So it *WILL* go back to the server to get this page again, effectively wiping out the change to the image that you made.

The answer is simple:

Code:

<a id="large" href="" 
  onclick="document.getElementById('pic').src='cottage_large.jpg'; return false;">

(And DanInMa knows that...he just missed it in the code.)

CodyJava · 11-09-2012, 09:47 PM

Thanks I think i need to send the onclick back to a function though because I need to use the same <a> tag to change it from 1 picture to the other. Also change the text that the link says. Thats why i was trying to use a function. Doesn't just referencing to the 1 picture when using the onclick bypass all that?

Old Pedant · 11-09-2012, 10:55 PM

Two ways:

First:

Code:

<a onclick="whatever( ); return false;">...</a>

Second:

Code:

function whatever( ) 
{
    ... change images, etc. ...
   return false;
}

and then

<a onclick="return whatever( );">...</a>

Old Pedant · 11-09-2012, 10:56 PM

The point is that you SOMEHOW want to ensure the onclick returns false. It doesn't matter how.