Dynamically linking html pages with javascript

Question

This is the code to store five images for an HTML page and then the function is used to display those five images one at a time.

This code works and one can scroll through the five images.

My question is whether it is possible to direct to different HTML page on the basis of image shown at a particular time

<script type="text/javascript">
    var curImage = 0;
    var cImages = ['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'];

    function townHousePics(direction) {
        if (direction == 'next') {
            curImage++;
            if (curImage == 5) {
                curImage = 0;
            }        
        } 
        else 
        {
            curImage--;
            // even reset the counter here when
            // its getting 0
        }
        document.images[0].src = cImages[curImage];
    }
</script>

You mean you want to have a url associated with each image, and when the image is clicked, the page at the given url is loaded? — Jonathan M
– Jonathan M, Commented Apr 19, 2012 at 13:25
Wrap you image in anchor tag with href of the html page where you want to redirect!... and your work is done. — Murtaza
– Murtaza, Commented Apr 19, 2012 at 13:32
@ Jonathan M, Yes SIR, Kindly tell me how can those images be linked to different pages... @ Murtaza SIR, kindly let me know how can this be done... — user961690
– user961690, Commented Apr 19, 2012 at 13:37

DefyGravity · Accepted Answer · 2012-04-19 13:36:05Z

2

html setup

<a href='' id='my-anchor-name'><img id='my-image-name' src=''/></a>

javascript

<script type="text/javascript">
    var curImage = 0;
    var cImages = [{aHref:'target1.html',imgHref:'1.jpg'},{aHref:'target2.html',imgHref:'2.jpg'},
{aHref:'target3.html',imgHref:'3.jpg'},
{aHref:'target4.html',imgHref:'4.jpg'},
{aHref:'target5.html',imgHref:'5.jpg'}
];
         function townHousePics(direction) {
                     if (direction == 'next') {
                         curImage = (curImage++)%cImages.length ;
                      else {
                         curimage = (curImage--)%cImages.length;
                     }
                     var img = document.getElementById('my-image-name');
                     var anchor = document.getElementById('my-anchor-name')
                     img.src = cImages[curImage].imgHref;
                     anchor.href = cImage[curImage].aHref;
             }
</script>

answered Apr 19, 2012 at 13:36

DefyGravity

6,0915 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DefyGravity Over a year ago

I changed cImages into a json object to allow more freedom in the 'target' urls for the enclosing anchor tag. Also, feel free to load up the page with an initial jpg of course!!! i left the initial html setup blank on purpose.

DefyGravity Over a year ago

this solution requires your page is w3 standards compliant. Specifically, no duplicate ID attributes!

Sampson Over a year ago

+1 Good idea using objects to store references to the appropriate page.

user961690 Over a year ago

@Defy Gravity, SIR, thank you very very much for your kindness... SIR, kindly let me know how can I thank you... Have a very good day and may GOD bless all...

user961690 Over a year ago

@ Jonathan Sampson, SIR thank you very very much for your answer... Kindly accept my kind wishes for you... May God bless us all...

Community · Accepted Answer · 2020-06-20 09:12:55Z

Automatic file-name-based Replacement

Suppose you had a link like the following:

<a href="1.html" id="viewLarge">View Large</a>

That you wanted to dynamically change with each image. When image 2.jpg becomes the primary, we swap out 1.html for 2.html. We could modify the last line of your code to this:

// Updated Source of First Image
document.images[0].src = cImages[curImage];
// Parse Image Number from String
var currentNumber = parseInt( curImage, 10 ); // 2.jpg becomes 2
// Get a reference to our 'viewLarge' link
var ourLink = document.getElementById("viewLarge");
// 1.html becomes 2.html when 2 is the currentNumber;
ourLink.href = ourLink.href.replace( /^([0-9]+)/, currentNumber );

Note, though this works it restricts you to having a 1.html for your 1.jpg. This may be undesirable. You may want 1.jpg to go with CityLoft.html. If that's the case, you'd want to associate the image with the proper url in your cImages object:

Use Objects to store Related Data

var cImages = [{image: '1.jpg', page: 'cityLoft.html'},
               {image: '2.jpg', page: 'townhome.html'}];

Once you've made this change, you only need to restore the references in your code. For instance, we would change the following:

document.images[0].src = cImages[curImage];

To this:

document.images[0].src = cImages[curImage].image;

We would also need to update our code that links to the relevant page as well:

document.getElementById("viewLarge").href = cImages[curImage].page;

That's it!

Collectives™ on Stack Overflow

Dynamically linking html pages with javascript

2 Answers 2

html setup

javascript

5 Comments

Automatic file-name-based Replacement

Use Objects to store Related Data

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

html setup

javascript

5 Comments

Automatic file-name-based Replacement

Use Objects to store Related Data

Comments

Your Answer

Sign up or log in

Post as a guest

Related