Clicky

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
 

asked 12/14/2011 08:35

egoselfaxis's gravatar image

egoselfaxis ♦♦


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

http://www.vivalogo.com/vl-resources/javascript-slideshows-sliders-carousels.htm
link

answered

Bardobrave's gravatar image

Bardobrave

Hi,

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

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
<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>
link

answered 2011-12-15 at 04:51:47

rajapandian_81's gravatar image

rajapandian_81

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
link

answered 2011-12-15 at 05:33:13

egoselfaxis's gravatar image

egoselfaxis

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

Hope you got!!!
link

answered 2011-12-15 at 05:46:34

rajapandian_81's gravatar image

rajapandian_81

Hmm .. I'm not quite sure I follow.  Can you show me an example?
link

answered 2011-12-15 at 06:04:24

egoselfaxis's gravatar image

egoselfaxis

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:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
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);   
    }


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.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
<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>
link

answered 2011-12-15 at 06:21:43

nap0leon's gravatar image

nap0leon

Thanks guys!

- yg
link

answered 2011-12-15 at 08:15:15

egoselfaxis's gravatar image

egoselfaxis

Your answer
[hide preview]

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×104
×8
×125
×10

Asked: 12/14/2011 08:35

Seen: 431 times

Last updated: 12/15/2011 01:36