Scrolling Banner Code?

Hi,
If you look at the website www.tesco.com there is a large central area where images auto scroll or can be chosen (1 2 or 3). If you then click one of the large displayed images (example Groceries) it navigates you to a relevant sub page. is there some code that would allow me to create this similar effect for my homepage?. Not sure of its javascript or css or whatever?.
Thankyou

The script used there, it is javascript, isn't well documented, which leads me to believe it's either proprietary or stolen. In either case we don't want to get involved with that. This script is pretty close:

http://www.dynamicdrive.com/dynamici...tentslider.htm

You can also browse through the library:

http://www.dynamicdrive.com/

to see if anything else in it might be better for your purposes.

Thanks for this information John.
I took a look at the link that you gave and subsequently downloaded and tested out the code. The only issue is that I will be wanting to href a html page to a specific frame in the web page via clicking an image (which works fine). The only issue is that clicking one of the images does do the href link but the cycling of images stops. Dont know how images can effectively be told to continue cycling in parallel?

My first idea would be to disable that in the script. Using a text only editor like NotePad, open up contentslider.js and find around line #110:

Code:

---

                /* sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
                        featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
                } */

---

and add the multiline comment delimiters (highlighted and red) as shown. Hit save and use that version.

You can easily find it by searching for:

["onclick"]

It appears only once in the script.

Thanks so much John ;-)
Your'e my new hero!

Hi again John,
With the images inside the main graphic window, the code lets you mouse click.. and I have made it so that it sends a url to a target frame with a name (example targets frame called newframe etc) BUT I WAS wondering if the frame could be targetted if the mouse is OVER the image as opposed to having to mouse CLICK?. Is there somewhere in the code that I could set or change this value to mouseover?. I dont mean mouseover for the lower little images but the currently visible main/large graphic being shown.

If I understand you correctly, since the content in each of the slider panels is ordinary HTML, you should be able to take a link like:

Code:

---

<a href="somepage.htm" target="someframename"><img . . . /></a>

---

and do:

Code:

---

<a href="somepage.htm" target="someframename" onmouseover="open(this.href, this.target);"><img . . . /></a>

---

Or instead you could just add this script to the page:

Code:

---

<script type="text/javascript">
(function(id){
        var add = (function(){return window.addEventListener? function(el, ev, f){
                        el.addEventListener(ev, f, false);
                }:window.attachEvent? function(el, ev, f){
                        el.attachEvent('on' + ev, f);
                }:function(){return;};
        })();
        function overthem(){
                var links = document.getElementById(id).getElementsByTagName('a');
                for(var i = 0; i < links.length; ++i){
                        (function(link){
                                var href = link.href, targ = link.target;
                                add(link, 'mouseover', function(){open(href, targ);});
                        })(links[i]);
                }
        }
        add(window, 'load', overthem);
})('slider1');
</script>

---

See the highlighted slider1? That's the id of the sliderwrapper division.

For faster execution (readiness), put it as the last thing before the closing </body> tag and change:

Code:

---

        add(window, 'load', overthem);

---

to:

Code:

---

        overthem();

---

John,
Apologies; I dont think i explained it too clearly.
If you go to http://www.dynamicdrive.com/dynamici...tentslider.htm
THEN look at top right slider. Yes it has text you can click (horses, scenery etc) which is ok.. BUT what I would like is to have the images I have defined (like the large image of horse etc) to be able to send a url to another html frame when the mouse is over rather than the image requiring a click. Dont know if this can be set somewhere in the slider js files etc (like you can alter the cycle speed etc) as its currently set for click.

I still don't get what you mean. Do you want mouseover of the large horse image to launch something in a targeted iframe?

The code in my previous post will do that.

Or do you want something else?

Ok.. got it working.. my apologies
THANKS ;-)