Results 1 to 10 of 10

Thread: Help with Javascript and Frames

  1. #1
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with Javascript and Frames

    Hello, Im quite new to html and javascript and am in the process of building a page, however im stuck on getting it to work how I need. The page consists of two horizontal frames(rows). Within the top frame is a javascript that uses large images which are resized within the code to thumbnail size and on mouseover the full sized image is shown below it. For various reasons I need it this way rather than creating actual thumbnails. What I would like is that onmouse over of the smaller image in the top frame, the larger image is shown in the second frame(the bottom one). Im unsure how to acheive this and hope someone could please help point me in the right direction..any help is much appreciated. Please excuse any lack of clarity or information in my query. Many Thanks

  2. #2
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Very simple. First of all, I have a question. What is the name of your bottom frame? It depends. try this code in the script section:

    parent.whateveryourbottomframenameis.document.getElementById("whatevertheheckyourimageidis").src="whatevertheheckyourimgsrcis.extension". hope i help.

    -magicyte

  3. #3
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello magicyte and thank you for your reply. In the interest of simplicity the name of my bottom frame is "bottom.html". Also my image does not have an i.d...would I be wrong in assuming this is the way to give it one "<img name=flw src="flower.jpg">? Needless to say I couldnt get the code to work...obviously due to things Im doing...or not doing correctly...however I really appreciate your help

  4. #4
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ..yes i would be wrong...id="flw" seeing as thats what the code is referring to... / ?

  5. #5
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well I just thought Id follow up by saying I've finally achieved what I set out to do in regards to my page. Took alot of reading and researching and a whole lot of trial and error. Although the coding and method I used was a bit different to the way magicyte suggested, his suggestion was definately what set me off in the right direction and path to getting this to work finally. So again magicyte thank you for your help, it is very much appreciated. Take care, Sincerly Tifoso

  6. #6
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

    if you can share the code or a link everyone can have a look at it to know your method.

  7. #7
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well my site isnt online just yet so Ill try and explain it as best I can. I placed the Javascript code in the second frame(the bottom one) and in the first frame(top) I placed the image references and made them onmouseover point to the function in the second frame.
    <img src="chart1.gif"
    onmouseover="parent.lower.popImg(true, this);"
    onmouseout="parent.lower.popImg((false);"
    Hope that makes sense

  8. #8
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    I am going to code a little bit here so that I type less. Hope you understand it:
    try
    {
    Well, basically what you are wanting to do is this: you are wanting to have someone put thier mouse over an image which will then widen. In the bottom frame a large form of the image will show up. Am I correct?
    if(correct)
    {
    Here is an example code for the image-over thing:

    Code:
    <img src="some_img.jpg" onmouseover="this.style.width=200;this.style.height=200;parent.name_of_frame.document.getElementById('name_of_img').src=this.src;" onmouseout="this.style.width=150;this.style.height=150;parent.name_of_frame.document.getElementById('name_of_img').src=differing_source.jpg">
    }
    else
    {
    I am sorry that I couldn't help you. Please try the catch() statement.
    }
    }
    catch(e)
    {
    Well, if I am not, I guess you will have to reply once more for complete clarification.
    }

    -magicyte

  9. #9
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello magicyte. You are correct and your code does make sense and works. I was using a code that I copied from somewhere which took a bit of playing with but I managed to get working how I needed, however the code you supplied me with is definately useful to me and extremely good to know. Again I really appreciate your time and help and hope others can use this information to their benifit also. Thank you

  10. #10
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    You are very welcome. 'Tis a pleasure to help you!

    -magicyte

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
  •