How can I get a link to be recognized by a search engine while being created in javascript?

I designed my own gallery which consists of a bunch of thumbnails on load, and when they are clicked on the image pops out to a bigger picture so the user can see it more clearly. On these pop out windows I have the ability to specify a UR开发者_JAVA技巧L which the user will be sent to if he/she clicks on the popped out image.

Because this whole gallery is being loaded by JavaScript, search engines will not be able to see the links that are attached to the pop out boxes. I thought about putting a text link also below the gallery thumbnails, but I think that would just make the gallery look sloppy. I have also thought about creating a hidden link, but I believe that will be ignored by the search engines and its frowned upon.

Anyone have any idea on how I can get this link to look good, and be visible by search engines?

Googlebot is able to construct much of the page and can access the onClick event contained in most tags. For now, if the onClick event calls a function that then constructs the URL, Googlebot can only interpret it if the function is part of the page (rather than in an external script).

Some examples of code that Googlebot can now execute include:

<div onclick="document.location.href='http://foo.com/'">
<tr onclick="myfunction('index.html')"><a href="#" onclick="myfunction()">new page</a>
<a href="javascript:void(0)" onclick="window.open('welcome.html')">open new window</a>

Put the link right around your thumbnail:

<a href="fullsized.htm" class="thumb"><img src="thumb.jpg" /></a>

Bind your expand function to the link and cancel the default behavior in your javascript:

$("a.thumb").click(function(e)
{
    // show the larger version
    e.preventDefault();
});

You could make your thumbnails link to the bigger picture and use JavaScript to ignore that actual link and open the popup with your current functionality. The thumbnails will get indexed and the links will get spider-ed as well.

use jquery event.preventDefault(); This will prevent the link action from happening, and you can do what you want to do with javascript. This is a good way of allowing sites to work for users without javascript enabled, but adding nice features for those that do. This way, the search engines will see the link and follow it, and users will still get the rich javascript experience you are creating.

<a href="link-to-page1.html" class="thumb-link">
  <img src="thumbnail1.png" alt="thumb 1" />
</a>

<a href="link-to-page2.html" class="thumb-link">
  <img src="thumbnail2.png" alt="thumb 2" />
</a>

<a href="link-to-page3.html" class="thumb-link">
  <img src="thumbnail3.png" alt="thumb 3" />
</a>

then in your javascript:

$(document).ready(function(){
  $(".thumb-link").click(function(event){
    event.preventDefault(); // cancel the hyperlink default action
    // do your javascript here
  });
});