SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Aug 5, 2007, 04:09 #1
- Join Date
- Mar 2004
- Posts
- 639
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to put image url into Input Text element and into Img Scr?
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?
-
Aug 5, 2007, 04:18 #2
- Join Date
- Oct 2006
- Location
- Kathmandu, Nepal
- Posts
- 4,013
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
Code:<img id="myimg"....>
Code:document.getElementById('myimg').src='your/path/to/image';
Mistakes are proof that you are trying.....
------------------------------------------------------------------------
PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5
-
Aug 5, 2007, 04:29 #3
- Join Date
- Mar 2004
- Posts
- 639
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 5, 2007, 05:08 #4
- Join Date
- Mar 2004
- Posts
- 639
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
HTML Code:function putImage(){ document.getElementById('image').src='http://www.example.com/1.jpg'; }
-
Aug 5, 2007, 07:57 #5
- Join Date
- Mar 2004
- Posts
- 639
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I've added some code regarding frames and code works fine, but one last thing.
How can I get URL of clicked image?
-
Aug 5, 2007, 11:35 #6
- Join Date
- Jul 2007
- Location
- Indonesia - Bali
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
why you using so many frames??
a iframe is good enough for containing your pictures list.
useCode JavaScript:window.parent.document
so.. you can define a variabel like this
Code JavaScript:var parel = window.parent.document; parel.formname.type_form_name.value = 'path/to/ yourimage'+'image_name.jpg'
Code HTML4Strict:<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
-
Aug 5, 2007, 11:42 #7
- Join Date
- Mar 2004
- Posts
- 639
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 5, 2007, 12:01 #8
- Join Date
- Jul 2007
- Location
- Indonesia - Bali
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Aug 5, 2007, 13:36 #9
- Join Date
- Mar 2004
- Posts
- 639
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Aug 5, 2007, 14:45 #10
- Join Date
- Jul 2007
- Location
- Indonesia - Bali
- Posts
- 38
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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;
Bookmarks