Headline ticker help?

[chris_stfc]

Hi All,

I have a ticker that works well and shows a new section every 'x' seconds.

http://www.sloughtownfc.net/numbering.php

However, what i'd really like is the numbering to change colour depening on what the current ticker is, or number has been clicked on.

<input type="image" name="one" onClick="DisplaySlides(0)" src="numbers/1.jpg" value="First Story" />
<input type="image" name="two" onClick="DisplaySlides(1)" src="numbers/2.jpg" value="Second Story" />
<input type="image" name="three" onClick="DisplaySlides(3)" src="numbers/3.jpg" value="Third Story" />
<input type="image" name="four" onClick="DisplaySlides(4)" src="numbers/4.jpg" value="Fourth Story" />

Is this possible and would someone kindly be able to help me do this?

Thanks

[paul_wilkins]

You would change the active input element to a different src image, and change the rest back to their default image values.

[chris_stfc]

Hi,

Would it be possible to post an example?

Many Thanks

Chris

[paul_wilkins]

It would better if the images were in a div, because then we could do things like this

<div id="slides">
    <input type="image" ...>
    <input type="image" ...>
    ...
</div>

var slides = document.getElementById('slides');
var slideInputs = slides.getElementByTagName('input');
for (var i = 0; i < slideInputs.length; i++) {
    if (slideInputs.type === 'image') {
        // do stuff
    }
}

But with what we have here right now, we'll have to use a slightly different way.

What will work is to add the image for the active number to the array that already exists

 ['numbers/one.jpg', 'First Headline', '<span class="topstory">First Headline</span><br /><span class="text">Info goes here</span>', 'numbers/1active.jpg'],

Then use that active image information from the DisplaySlides() function, where you add the following

var inputs = document.getElementsByTagName('input');
var slideInput;
for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type === 'image') {
        slideInput = inputs[i];
        if (i === SNo) {
            slideInput.oldImage = slideInput.src;
            slideInput.src = imgArray[SNo][3];
        } else {
            if (slideInput.oldImage) {
                slideInput.src = slideInput.oldImage;
                slideInput.oldImage = null;
            }
        }
    }
}

[chris_stfc]

Magic! Thank you so much!

[chris_stfc]

Hi Paul,

Sorry to be a pain, but I can't seem to get it working. I've added the code, but it's not displaying the numbers as a different colour.

Please could you/anyone help?

http://www.sloughtownfc.net/numbering.php

Many Thanks

[paul_wilkins]

Sorry to be a pain, but I can't seem to get it working.

Pleas re-read the following.

Then use that active image information from the DisplaySlides() function, where you add the following

The code that was given should be added to the afore-mentioned function, not placed outside of it.

[chris_stfc]

Hi,

Thanks, i've tried adding that within the function displayslides() but it still does not seem to work (I tried that originally like so)?

http://www.sloughtownfc.net/numbering.php

Thanks

[paul_wilkins]

The numbers that show are images, such as "numbers/1.jpg"
For them to be a different colour, you need to show a different image that is of that different colour.

That different image is defined at the end of the imgArray array, "numbers/1active.jpg" for example.

If you haven't created those images of a different colour, there won't be anything to see, and those other images will instead show the alt attribute text.

[chris_stfc]

Hi Paul,

That's the bit I don't get though. I have created the images. I've tried the paths for the alternative images as asbolute and relative, and they are defintely there and uploaded to my server?

[paul_wilkins]

It looks like an array index is missing. Do you see what is being assigned to the image?
'http://www.sloughtownfc.net/numbers/four.jpg,Fourth%20Headline,%3Cspan%20class=%22topstory%22%3EFourth%20Headline%3C/span%3E%3Cbr%20/%3E%3Cspan%20class=%22text%22%3EMore%20info%20yet%20again%3C/span%3E,http://www.sloughtownfc.net/numbers/4active.jpg'

This means that the whole array is being assigned, instead of just part of it.
The appropriate line on your page looks like this:

slideInput.src = imgArray[3];

That [SNo] is missing from the code on your page.
Please update your code so that it looks like this:

slideInput.src = imgArray[SNo][3];