...

View Full Version : Changing images when links are clicked.



LearningCoder
12-30-2011, 10:14 PM
Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need.

Here is the code relevant to my issue:

HTML:


<div id="faqBox">
<h1 id="faqHeader"><u>F.A.Q's</u></h1>
<ul>
<li><a href="#" onclick="">What is the purpose of this website?</a></li>
<li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li>
<li><a href="#">Why was this award created?</a></li>
<li><a href="#">How do we nominate somebody?</a></li>
<li><a href="#">How are people presented with this award?</a></li>
</ul>
</div>
<div id="faqInfoBox">
<img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
</div>


CSS:


#faqInfoBox {width: 40%;
border: 5px ridge;
height: 310px;
background: #606626;
float: right;
margin-right: 3%;}

#faqBox ul li{font-family: trebuchet ms;
line-height: 30px;
list-style-type: square;}


JS:


var imgArray = new Array(4);

imgArray[0] = 'images/content1.png';
imgArray[1] = 'images/content2.png';
imgArray[2] = 'images/content3.png';
imgArray[3] = 'images/content4.png';
imgArray[4] = 'images/content5.png';

var currIndex = 0;

function imgChange(that)
{
if(currIndex < myImages.length - 1) {
that.src = myImages[++currIndex];
}else {
currIndex = 0;
that.src = myImages[currIndex];
}
}


The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site here: http://abjava.host22.com/Site1/ if you would care to take a look.

I don't want to be fed the answer but just some pointers/tips on what I could do.

I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created).

I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me.

Thank you very much in advance if anyone can help.

Regards,

LC.:thumbsup:

xelawho
12-30-2011, 10:20 PM
pointers, eh?

I guess each link would have an onclick which would call a function and pass a variable to that function telling it which image to display.

or something like that :thumbsup:

LearningCoder
12-30-2011, 10:42 PM
Could I give every image an id and use the getElementById() method to get that certain image then store it in that.src or something?

Thanks for your reply

Regards,

LC.

xelawho
12-30-2011, 10:49 PM
something like that but not really. here is a related post (http://www.codingforums.com/showpost.php?p=1175552&postcount=2), maybe it will help, although it is more complicated than what you are trying to do - you don't really need to put your images into an array

Old Pedant
12-31-2011, 12:20 AM
Surely you don't mean you need something as simple as this, do you?


<script type="text/javascript">
function show(which)
{
var image = document.getElementById("infoImage");
image.src = "images/content" + which + ".png";
image.alt = "content" + which;
return false;
}
</script>
....
<div id="faqBox">
<h1 id="faqHeader"><u>F.A.Q's</u></h1>
<ul>
<li><a href="#" onclick="return show(1);">What is the purpose of this website?</a></li>
<li><a href="#" onclick="return show(2);">What type of achievements would someone of had to do to be eligible?</a></li>
<li><a href="#" onclick="return show(3);">Why was this award created?</a></li>
<li><a href="#" onclick="return show(4);">How do we nominate somebody?</a></li>
<li><a href="#" onclick="return show(5);">How are people presented with this award?</a></li>
</ul>
</div>
<div id="faqInfoBox">
<img id="infoImage" src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
</div>

...

You spelled "eligible" wrong, by the by.

Old Pedant
12-31-2011, 12:22 AM
If for some reason you can't add the ID to the <img> tag, as I showed, you could do without it thus:


function show(which)
{
var image = document.getElementById("faqInfoBox").getElementsByTagName("img")[0];
image.src = "images/content" + which + ".png";
image.alt = "content" + which;
return false;
}

Old Pedant
12-31-2011, 12:24 AM
And to live up to my moniker...

This phrase seems clumsy:
What type of achievements would someone of had to do to be eligible?

At a minimum, change "of" to "have".

But maybe something like this would be better?
What type of achievements would make an individual eligible for the award?

LearningCoder
12-31-2011, 12:45 PM
Ah thank you very much Old Pedant. I used the first code which does exactly what I needed. Looking at it, it is quite what you say, easy. It's just trying to figure out how to do it which is my problem. I was sure I only would have had to tweak the old script gained here but have gained a very simple, but useful script which I can now save in my library so thank you very much indeed.

Also that question was worded very badly shame on me. I woke up at around 2:30am and started working on the site so I was half asleep heh. What you re-wrote is much better.

Thank you all for your contributions.

Kind regards,

LC.:thumbsup:

LearningCoder
01-01-2012, 10:18 PM
I was wondering whether someone could explain why this function returns false?

Regards,

LC.:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum