Javascript: Adding links to dynamically generated images

I've been playing around with some Javascript stuff for a personal project and created this:-

http://lab.2toria.com/scrabble.php

What I would like to do is to add a link to each of the images generated on the keypress.  For now it doesn't matter what the href is, I just want something like href="#" just to see it working - hopefully will be able to suss the rest out from there.

The code I'm using to generate the scrabble tiles as keys are pressed is this:-

var theLetter = document.getElementById("testtile");
var img = new Image();

//Don't run the rest of the code if non-alphabetical characters entered.
if(keynum<97||keynum>122) {
	return;
}


theLetter.appendChild(img);

img.src = '/scrabbletiles/' + keynum + '.gif';

Open in new window


Is there an easy way of then doing something like img.href="#"?  I've tried it that way but with no luck.

Any help would be appreciated.

TIA,
Matt
LVL 8
2toriaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Atique AnsariCommented:
You can use onclick attribute of image.
Please find the attached code for the same.

 
var theLetter = document.getElementById("testtile");
var img = new Image();

//Don't run the rest of the code if non-alphabetical characters entered.
if(keynum<97||keynum>122) {
        return;
}


theLetter.appendChild(img);

img.src = '/scrabbletiles/' + keynum + '.gif';
img.onclick = 'javascript:alert("hi")';

Open in new window

0
Atique AnsariCommented:
You can do it using jQuery also.
Please try the attached code and see if it works.

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($)
	{
		var image_path = '/scrabbletiles/';
		var image_ext  = '.gif';
		
		$("#element_name").live('keypress',function(keynum)
		{
			var keynum = e.keyCode;
			
			//Don't run the rest of the code if non-alphabetical characters entered.
			if( keynum < 97 || keynum > 122 )
			{
				return;
			}
			
			var append_html = '<a href="#" class="image_links" title="'+keynum+'"><img src="'+image_path+keynum+image_ext+'" alt="'+keynum+'" /></a>';
			
			$("#testtile").append(append_html);
		});
		
		$("a.image_links").live('click', function(e)
		{
			e.preventDefault();			
			alert( 'Clicked on image ==> ' + $(this).attr('title') );			
		});
	});
</script>

Open in new window

0
COBOLdinosaurCommented:
You should be able to do it using DOM methods.  Something like this should be close:

theLetter=document.getElementById('testtile');
img=document.createElement('img');
if (keynum<97 || >122)
{
    return;
}
srcStr='/scrabbletiles/' + keynum + '.gif';
img.setAttribute("src", srcStr);
a=document.createElement('a');
a.setAttribute('href','#');
a.appendChild(img);
theLetter.appendChild(a);

Open in new window




Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.