SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Guru
    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?

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    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"....>
    And when onClick just do like this
    Code:
    document.getElementById('myimg').src='your/path/to/image';
    This will change the image path.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rajug View Post
    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"....>
    And when onClick just do like this
    Code:
    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?

  4. #4
    SitePoint Guru
    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';
    }
    But this code doesn't work. I mean when I click any image, it doesn't appears in <img src> of the parent frame.

  5. #5
    SitePoint Guru
    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?

  6. #6
    SitePoint Enthusiast
    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.
    use
    Code JavaScript:
    window.parent.document
    for accessing outside element of iframe.

    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'
    with assumption your html is like this :
    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

  7. #7
    SitePoint Enthusiast
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •