The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Rotating Images with Links
P3 on Code
post Oct 7 2014, 09:31 PM
Post #1





Group: Members
Posts: 2
Joined: 7-October 14
Member No.: 21,637



Hi all,

I'm new to the world of HTML. Would appreciate your help smile.gif

I grabbed the below code from google to use on our website but I don't know where to place the link (href) so you can click on the image and be directed to that page. If it's possible, how would I do that?

Also - It's only displaying 2 of the images not 3. I may have removed something from code but I don't have the original code to reference back to. Any thoughts on that too?

<table align="center">
<tr>
<td><head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-GroupX.jpg"
var image2 = new Image()
image2.src = "/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-TP.jpg"
var image3 = new Image()
image3.src = "/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-BAC.jpg"
</script>
</head>
<body>
<p><img src="/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-GroupX.jpg" width="971" height="271" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",5500);
}
slideit();
</script>
</body></td>
</tr>
</table>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 8 2014, 05:05 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Put the link around the IMG inside P. See http://htmlhelp.com/faq/html/images.html#linked-image .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
P3 on Code
post Oct 8 2014, 09:06 PM
Post #3





Group: Members
Posts: 2
Joined: 7-October 14
Member No.: 21,637



But the images are setup to rotate so the code is different. Where would I place it in the below code:

<table align="center">
<tr>
<td><head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-GroupX.jpg"
var image2 = new Image()
image2.src = "/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-SwimSchool.jpg"
var image3 = new Image()
image3.src = "/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-SGT.jpg"
</script>
</head>
<body>
<p><img src="/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-SGT.jpg" width="971" height="271" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()",3500);
}
slideit();
</script>
</body></td>
</tr>
</table>


QUOTE(Frederiek @ Oct 8 2014, 11:05 PM) *

Put the link around the IMG inside P. See http://htmlhelp.com/faq/html/images.html#linked-image .

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 9 2014, 03:03 AM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



CODE
<p><a href="LINK_URL_HERE"><img src="/PublishingImages/Centre%20Websites/Homepage%20Banners/Y0775-SGT.jpg" width="971" height="271" name="slide" /></a></p>

Oh, wait! You probably want each image to link to a different URL. Then go see http://www.javascriptkit.com/script/script2/jsslide.shtml or any of the other free slider/slideshow scripts

This post has been edited by Frederiek: Oct 9 2014, 03:39 AM
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: 12th November 2018 - 04:51 PM