View Full Version : Selecting link embedded in image

07-24-2012, 05:48 PM
So I'm just starting to learn Javascript. One thing hasn't been obvious to me at all in my google searches through code snippets: How do you write javascript code (for Greasemonkey) to basically "click" a picture, which is also a link? It should most likely just be a single line of code describing an image with the embedded link. I've worked with VBA and SAS in the past and mostly just started from scratch to learn from trying out random projects, but Javascript syntax just doesn't seem intuitive at all yet. I'm not familiar with what this syntax would be called, so I'm not exactly sure where to begin my search (and this has likely been posted about before). I'm really only confident in getting used to brackets and semi-colon format, so still plenty of learning to do. It's likely I've skimmed over the syntax I'm looking for, so if someone could just point me in the right direction it would be much appreciated.

I have a quick example from a recording in iMacros:

URL GOTO=http://www.wunderground.com/
TAG POS=1 TYPE=IMG ATTR=SRC:http://icons-ak.wunderground.com/data/images/us_sf.gif

This basically clicks on the image "Maps & Radar" at http://icons-ak.wunderground.com/data/images/us_sf.gif . What's the equivalent way to do this with Greasemonkey? I have a couple projects where I need to click on the picture because the embedded link can change, but the picture won't, so I can't do something like:
window.location.href = http://www.wunderground.com/maps/;

Also, any pointers on good sources / tutorials for learning common syntax for a beginner? I've checked out http://www.w3schools.com a bit, but I'm wondering if there are any favorite beginner sources out there. Thanks for the help in advance.

07-24-2012, 08:48 PM
you can use onclick to make images imitate links:

<img src="ThePicture.png" onclick="GetLink()" style="cursor:pointer">

Then you have to create the function GetLink which will handle the selection of the links Url. e.g.:

function GetLink(){

Something must be replaced with the call to get the right link.
This can be call to a server-side script, a selection from an array, etc.
whichever suits you best is hard to say.

07-24-2012, 09:26 PM
Correct me if I'm wrong, but doesn't a statement with onclick get triggered when the user actually clicks something? I've seen a lot of codes involving onclick, which seems to be the opposite of what I'm trying to do if I understand it correctly. In this case, the script will be triggered by page load (Greasemonkey again) and I'm trying to write code that will click the image rather than relying on the user to do it. Basically this results in the first page essentially being skipped instead of needing to click through each image link. The image in the example is already a link, so I don't think any link imitation is needed?

As I mentioned before, I'm avoiding using location.href = link; because the link often changes, but the image does not. The only reliable way to get to the next page appears to be clicking the image, so I'm thinking there has to be some way to get JS to do this with code similar to how the iMacro code I posted works. That one didn't require the link to the next page, just the identifying url for the .gif of the image to be selected. I've checked out .click a little bit, but I'll admit I've gotten a little lost in trying to figure out how to use jQuery correctly and how you would apply it to an image.

07-24-2012, 11:49 PM
Figured it out on my own afterall. For anyone looking at this later look in to XPath:


It varies depending on the structure of the page you're working with, but document.evaluate, snapshotItem, and figuring out nodes will get you there.

var item = document.evaluate('//b[. = "text to search for"'"]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
item = item.snapshotItem(0);
var selectedlink = item.previousSibling.previousSibling.firstChild (or whatever path is needed);

07-25-2012, 01:56 AM
So what you are looking for is a page that actually, automatically redirects to another page without any user action at all.

If so, I do not understand why you want to imitate a click onload, instead of doing a simple redirect

And I also do not understand why you wanna avoid location.href, as it does not require you to use the same url each time.

The url to go to is in you last example determine by the href of a link that are placed related to the tag that matches the search-string.

you can do it all without using any body tags at all.

['Gotta Go','Toilet.htm'],
['Have To Stay','Staying.htm'],
['Must Visit My Mother','Mother.htm']


for (x=1;x<Links.length;x++){
if (Links[x][0]==Searchstring){

will redirect to different pages depending on the location.search.

This is just one of many ways to pass the value to search for.

07-26-2012, 06:51 PM
The point of the code was to click the image more so than going to the next page (although it is a product of clicking the image). There are a few instances where I need to click the object in order to progress to the next page, while directly going to the provided link produces errors and other complications. Basically this was a case of asking a simple example questions instead of posing the entire task I'm working on and making you sort out what actually needed to be done. Either way, task accomplished, so thanks.