How to put image url into Input Text element and into Img Scr?

[al9]

Hello guys,

I have a page with an iframe where I've placed few images. I want to create onMouseClick event which will put clicked image's url into Input Text element in parent frame (main page frame) and at the same time it will put image itself into some <div> or <img src> element (if possible) or maybe in some other small iframe, created for this image.

Is that possible to do using JavaScript (with function)? If yes, how can I do that?

[Raju Gautam]

I am not sure to show the url in the text box that is in the main frame but you for changing the image src you need to assign an ID attribute in the image

<img id="myimg"....>

And when onClick just do like this

document.getElementById('myimg').src='your/path/to/image';

This will change the image path.

[al9]

I am not sure to show the url in the text box that is in the main frame but you for changing the image src you need to assign an ID attribute in the image

<img id="myimg"....>

And when onClick just do like this

document.getElementById('myimg').src='your/path/to/image';

This will change the image path.

Thanks for quick reply.

I wonder will this code work with frames? How can I get path to clicked image?

[al9]

I've added id="image" to an img element (which is in parent frame).

I've added onClick="putImage();" to <a href> of every image (which are in child frame).

I've added putImage(); function to parent frame code:

function putImage(){
	document.getElementById('image').src='http://www.example.com/1.jpg';
}

But this code doesn't work. I mean when I click any image, it doesn't appears in <img src> of the parent frame.

[al9]

I've added some code regarding frames and code works fine, but one last thing.

How can I get URL of clicked image?

[linspirell]

why you using so many frames??
a iframe is good enough for containing your pictures list.
use

window.parent.document

for accessing outside element of iframe.

so.. you can define a variabel like this

var parel = window.parent.document;
parel.formname.type_form_name.value = 'path/to/
yourimage'+'image_name.jpg'

with assumption your html is like this :

<iframe name="whatever" src="whatever"></iframe>
<form name="whatever" method="post" action="whatever.php">
<input type="text" name="whatever_name" />
</form>

that's just an illustration

[al9]

Yes, I wrote above that I found the solution. It is almost the same you described. And it works. But I still can't find the way to get clicked image's URL.

[linspirell]

hello sorry i don't understand about your mean. that's mean if you click an image, then will show the complete url of your image ??

maybe you can to try fetching the SRC attribute value of img element

[al9]

hello sorry i don't understand about your mean. that's mean if you click an image, then will show the complete url of your image ??

Yes.

maybe you can to try fetching the SRC attribute value of img element

How can I do it?

[linspirell]

hey..., did u had trying to learn it by finding by yourself in google? try first and if there is an error,, that is good moment for question.

ok..., not too much talking...as example i got this from here
http://www.w3schools.com/htmldom/dom_obj_image.asp

so for further and complete information u can explore that page.

the summary is just using the getElementById or getElementsByTagName() method for getting access trough the DOM.

example :
var parel = window.parent.document;
var t_img = document.getElementById("an_id_of_img").src;
parel.formname.txtfieldname.value = t_img;