Solved

image viewer

Posted on 2012-04-09
1
294 Views
Last Modified: 2012-04-10
Hello,

I have the following in an HTML table:

<td align="center" valign="middle">
                            Our Services<br />
                            <br />
                            &nbsp;<img src="art/webWorld.jpg" name="slide" width="120" height="100" alt="" onclick="location.href='forms/Vison.aspx'"
                                style="cursor: pointer;" />
                            <br />
                            <br />
                            <script type="text/javascript">
<!--
                                //variable that will increment through the images
                                var step = 1
                                function slideit() {
                                    //if browser does not support the image object, exit.
                                    if (!document.images)
                                        return
                                    document.images.slide.src = eval("image" + step + ".src")
                                    if (step < 3)
                                        step++
                                    else
                                        step = 1
                                    //call function "slideit()" every 2.5 seconds
                                    setTimeout("slideit()", 2500)
                                }
                                slideit()
//-->
                            </script>
                        </td>

It works very well. I would however like an additional feature. I would like to tie the image to a differant link everytime it cycles. Each image should have it's own seperate link. Additionaly I need to set a text field below the image with a uniques description based on the image.

Thank you
0
Comment
Question by:thenrich
1 Comment
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 500 total points
Comment Utility
Try this idea, it is very flexible


<table align="center">
  <tr>
    <td align="center" valign="middle">Our Services<br />
    <a href="#" id="iLink"><img name="slide" width="120" height="100" alt
    onclick="location.href='forms/Vison.aspx'" style="cursor: pointer;" /> </a><div id="iDiv"
    width="120"></div></td>
  </tr>
</table>
<script type="text/javascript">

<!--
                              ourImages = new Array ("http://www.google.com/images/logo.gif",
                                                     "http://col.stb01.s-msn.com/i/B7/EB75D45B8948F72EE451223E95A96.gif",
                                                     "https://www.google.ca/intl/en_ALL/images/logos/images_logo_lg.gif",
                                                     "http://edibleapple.com/wp-content/uploads/2009/04/apple_rainbow_logo.jpeg")

                              ourLinks = new Array ("http://www.google.com",
                                                    "http://msn.com",
                                                     "https://www.google.ca/imghp",
                                                     "http://apple.com") 
 
                              ourText = new Array ("Go to google.com",
                                                    "This for MSN, go at your own risk",
                                                     "NSFW!!!",
                                                     "Yet another apple link") 



                                //variable that will increment through the images
                                var step = 0
                                function slideit() {
                                    //if browser does not support the image object, exit.
                                    if (!document.images)
                                        return
                                    document.images.slide.src = ourImages[step]
                                    document.getElementById("iLink").href = ourLinks[step]
                                    document.getElementById("iDiv").innerHTML = ourText[step]
                                    step =(step+1)%(ourImages.length)

                                    //call function "slideit()" every 2.5 seconds
                                    setTimeout("slideit()", 2500)
                                }
                                slideit()
//-->
                            </script>

Open in new window

0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now