Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Image slider hlep

Posted by: smtymagoo May 8 2012, 03:04 PM

I have code for an image slider but I want to add a hyperlink to each image as it comes up. How would I do that with this code part of the code?
Thanks so much!!

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="image2.jpg"

<img src="http://image1.jpg" name="slide" height="400" width="940">
<script>
<!--
//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>

Posted by: Christian J May 8 2012, 05:23 PM

QUOTE(smtymagoo @ May 8 2012, 10:04 PM) *

I have code for an image slider but I want to add a hyperlink to each image as it comes up. How would I do that with this code part of the code?

The script just changes the SRC of the IMG element. If you also want to change the URL of a link (to what?) it must be rewritten quite a bit.

CODE
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="image1.jpg"
var image2=new Image()
image2.src="image2.jpg"

<img src="http://image1.jpg" name="slide" height="400" width="940">
<script>

The above is incorrect: move the IMG element outside of the SCRIPT, and remove the second <script> start tag.

Posted by: smtymagoo May 10 2012, 03:31 PM

could you help me re-write it so that the I can get the image to be a hyperlink? I'm completely new to html and this is the final piece to my site. Any help would be greatly appreciated. Thanks, so much

Posted by: Christian J May 11 2012, 01:42 PM

Should the URL of the link change everytime the image SRC changes? If so that's the labor intensive part.

If you just want a static link URL then it's simple to do.

Posted by: smtymagoo May 15 2012, 12:48 PM

Yes, I'd want each image to have it's own separate link.

Posted by: Christian J May 15 2012, 04:22 PM

Something like this then?

CODE
<a href="" id="link"><img src="image1.jpg" id="slide" height="400" width="940"></a>

<script type="text/javascript">
var url=['foo.html', 'bar.html']; // link URLs
var pic=['dog.jpg', 'cat.jpg',]; // image URLs

for(var i=0; i<pic.length; i++)
{
    var preload=new Image();
    preload.src=pic[i];
}

var step=0;
function slideit()
{
    document.getElementById('link').href=url[step];
    document.getElementById('slide').src=pic[step];

    if(step<pic.length-1)
    {
        step++;
    }
    else
    {
        step=0;
    }
    setTimeout("slideit()",2500); // speed 2.5 seconds
}
slideit();
</script>

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)