Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 7443

Jul 19th, 2006

Image Rotation w/Links

Expand Post »

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

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.

Similar Threads

image rotation in C
Rotation in Java

raywood5

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

10 posts
since Jan 2005

Permalink

Jul 19th, 2006

Re: Image Rotation w/Links

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Jul 19th, 2006

Re: Image Rotation w/Links

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.

raywood5

Reputation Points: 10

Solved Threads: 1

Newbie Poster

Offline

10 posts
since Jan 2005

Permalink

Jul 19th, 2006

Re: Image Rotation w/Links

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Var value is not passed

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Ajax instant chat example to download with source code

DaniWeb Message

Cancel Changes

User Name
Password