AJAX

Image Rotation w/Links

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jan 2005

Posts: 10

Reputation: raywood5 is an unknown quantity at this point

Solved Threads: 1

raywood5

Offline

Newbie Poster

Image Rotation w/Links

Jul 19th, 2006

I am building a site that has 3 main sections (Sec1, Sec2, Sec3) These 3 sections will be the main navigation going accross the top. On the home page will be a image approx 528 X 228. Each section will have a image relevant to the section. So when the user scrolls over the Sec1 navigation link that sections image will apear. An example of this can be seen here http://www.corkscrewsetc.com/

However, I would like each section pic to link to that section. I am using Javascript for this. Here is the code

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 <script language="JavaScript" type="text/JavaScript">
var image1= new Image();
var image2= new Image();
var image3= new Image();
 
 
 
image1.src = "img/image1.jpg";
image2.src = "img/image2.jpg";
image3.src = "img/image3.jpg";
 
 
 
function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");}
</script>
 <script language="JavaScript" type="text/JavaScript">
var image1= new Image();
var image2= new Image();
var image3= new Image();



image1.src = "img/image1.jpg";
image2.src = "img/image2.jpg";
image3.src = "img/image3.jpg";



function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");}
</script>

Then inserting the image using [HTML] <img name=picture src="img/iamge_main.jpg" width="528" height="228" border="0">[/HTML]

The rotation works fine but I would like to add links to each image.

Thanks in advance for any suggestions.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Image Rotation w/Links

Jul 19th, 2006

Simply add the href (anchor) tags around your image source. You can change the href property programatically, just as you are doing with the src property of the images.

Last edited by tgreer; Jul 19th, 2006 at 1:17 pm.

•

Join Date: Jan 2005

Posts: 10

Reputation: raywood5 is an unknown quantity at this point

Solved Threads: 1

raywood5

Offline

Newbie Poster

Re: Image Rotation w/Links

Jul 19th, 2006

Unfortunately I cannot figure out how to do that. I am not a real developer I know enough to get by. An example would really help.

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Image Rotation w/Links

Jul 19th, 2006

I mean, just do what you are already doing. Modify your image tag to be within an anchor tag:

[html]<img name=picture src="img/iamge_main.jpg" width="528" height="228" border="0">[/html]

That's what you have now. Add an anchor (I also removed the "name" tag as it is deprecated, changing it to the "ID" tag, and wrapped the value in quotes).

[html]<a id="picture_link" href=""><img id="picture" src="img/iamge_main.jpg" width="528" height="228" border="0"></a>[/html]

There, now you have a link. To change the link destination, you'd revise your JavaScript: function (you have to revise it anyway to be compliant and use the "id" property instead of "name"):

[html]function doButtons(picimage)
{
document.getElementById('picture').src = picimage + ".src";
document.getElementById('picture_link').href = "http://www.daniweb.com";
}
[/html]

That should work, though I haven't tested it.