The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image slider hlep
smtymagoo
post May 8 2012, 03:04 PM
Post #1





Group: Members
Posts: 3
Joined: 8-May 12
Member No.: 17,077



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 8 2012, 05:23 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,650
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
smtymagoo
post May 10 2012, 03:31 PM
Post #3





Group: Members
Posts: 3
Joined: 8-May 12
Member No.: 17,077



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 11 2012, 01:42 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,650
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
smtymagoo
post May 15 2012, 12:48 PM
Post #5





Group: Members
Posts: 3
Joined: 8-May 12
Member No.: 17,077



Yes, I'd want each image to have it's own separate link.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 15 2012, 04:22 PM
Post #6


.
********

Group: WDG Moderators
Posts: 9,650
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th April 2024 - 09:27 PM