Need suggestion on what kind of horizontal scroller to use for website

If you take a look at the bottom of this page:

http://www.colorshoutconcepts.com/

.. you'll see that I have a small logo image (with a gray arrow on each side of it) ... as well as a "GO" button.

What I'd like to do is have it so that when you click on either of the gray arrows, .. a different logo image slides into place.  You can then either click on the logo image -- or click on the GO button -- and it will take you to a specific page URL on the same site.

If the "sliding into place" effect is too complicated, .. then I'm open to just instead having the logo image quickly change out to a different image.  It's just important that whatever solution I implement can be configured to work with however many logo images are necessary.

How would I accomplish something like this?  Please advise.

Thanks,
- Yvan
 
egoselfaxisAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BardobraveCommented:
What you explain seems like an image carousel, check this site:

http://www.vivalogo.com/vl-resources/javascript-slideshows-sliders-carousels.htm
0
rajapandian_81Commented:
Hi,

Store all image names in Array and load one by one after button click. Try below code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

<table id="MyTable">    
    <tr>
        <td>
            <button id="btnPrevious" onclick="ChangeImage(this.id);" />
        </td>
        <td>    
            <img id="Image1" src="Coffee Bean.bmp" alt="" onclick="redirectPage();" /> 
        </td>
        <td>                        
            <button id="btnNext" onclick="ChangeImage(this.id);" />
        </td>
        <td>
            <button id="btnGo" onclick="redirectPage();" />
        </td>
    </tr>
</table>
<script language="javascript" type="text/javascript" >
    var myImages = new Array("Coffee Bean.bmp", "Blue Lace 16.bmp", "FeatherTexture.bmp", "Gone Fishing.bmp");
    var totalImages = 4;
    var imageNo = 0;

    function ChangeImage(btnId) {       
        
        if (btnId == "btnPrevious")
            imageNo -= 1;
        else
            imageNo += 1;

        if (imageNo == totalImages)
            imageNo = 0;
        else if (imageNo < 0)
            imageNo = totalImages - 1;
            
        document.getElementById("Image1").src = myImages[imageNo];
    }

    function redirectPage() {

        var imageSrc = document.getElementById("Image1").src;
        alert("Redirect to URL based on src. SRC: " + imageSrc);   
    }
</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
egoselfaxisAuthor Commented:
This seems like it will work great -- only how do I specify a different url to redirect to based on which logo image is being displayed?

- yg
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

rajapandian_81Commented:
For images, you can give page name + .bmp. In redirectPage function you can replace bmp with html and redirect.

Hope you got!!!
0
egoselfaxisAuthor Commented:
Hmm .. I'm not quite sure I follow.  Can you show me an example?
0
nap0leonCommented:
In this solution you would have your target URL be the same name/location as the image and use a "replace" function to replace "jpg", "bmp", "gif", etc with "html", "asp", "aspx","php", etc.

I like the basics of the function but have customized it so that it uses a two dimensional array for myImages.  The first dimension is the location of the image, the second dimension is the URL that the user should go to when they click the "Go" button.

Here is the JS for a carousel with 5 images:
	var totalImages = 5;
	var imageNo = 0;  //which image do you want to show first?

	var myImages = new Array(totalImages);
	for (i=0; i<totalImages; i++){
		myImages[i] = new Array(2)
	}

	myImages[0][1] = "images/staging/photo-belem.jpg";
	myImages[0][2] = "belem/url/here.asp";

	myImages[1][1] = "images/staging/photo-construction.jpg";
	myImages[1][2] = "construction/url/here.asp";

	myImages[2][1] = "images/staging/photo-field-of-flowers.jpg";
	myImages[2][2] = "field-of-flowers/url/here.asp";

	myImages[3][1] = "images/staging/photo-mountain-sunset.jpg";
	myImages[3][2] = "mountain-sunset/url/here.asp"

	myImages[4][1] = "images/staging/photo-rotors.jpg";
	myImages[4][2] = "rotors/url/here.asp";


    function ChangeImage(btnId) {
        if (btnId == "btnPrevious")
            imageNo -= 1;
        else
            imageNo += 1;

        if (imageNo == totalImages)
            imageNo = 0;
        else if (imageNo < 0)
            imageNo = totalImages - 1;
        document.getElementById("Image1").src = myImages[imageNo][1];
    }

    function redirectPage() {
        var gotoURL = myImages[imageNo][2];
        alert("Redirect to URL " + gotoURL);   
    }

Open in new window


I also put labels on the buttons and moved them below the images because I like them better that way, but that's just me.
		<table id="MyTable">    
		    <tr>
		        <td><img id="Image1" src="images/staging/photo-belem.jpg" alt="" onclick="redirectPage();"/></td>
		    </tr>
		    <tr>
		        <td align="center">
			<button id="btnPrevious" onclick="ChangeImage(this.id);">Previous</Button> 
			<button id="btnNext" onclick="ChangeImage(this.id);" />Next</Button> 
			<button id="btnGo" onclick="redirectPage();">Go</button>
			</td>
		    </tr>
		</table>

Open in new window

0
egoselfaxisAuthor Commented:
Thanks guys!

- yg
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.