Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Displaying images with mouseover...

    I'm just starting to try javascript, and I wanted to have a list of names down the left side of a screen, and an image box on the right with titles abd various other data, all these changing as you mouseover the different names. That was easy to do, with each name being a hyperlink and using the 'onmouseover' command to run a little script which used the 'document.getelement' command to change the src of the image box.

    The names are made up from lines looking like this:

    <code><a href="" onmouseover="preview('Kestrel','18 in','Marinecraft','Balsa cabin Cruiser','nodata.jpg','Dummy.zip')" title="Click to find Kestrel on the Web">Kestrel</a><br /></code>

    and the script is:

    <code>function preview(a,b,c,d,e,f){
    document.getElementById('name').innerHTML=a
    document.getElementById('size').innerHTML=b
    document.getElementById('author').innerHTML=c
    document.getElementById('desc').innerHTML=d
    document.getElementById('image').setAttribute('src',e)
    document.getElementById('link').href=f
    }
    </code>

    This works fine. Now, I am trying to expand it to include a button above the image which will give me a different view of the same image when clicked on. I though that I could simply make the button as a hypertext link, and alter it in the same way as the other fields using the script. It would be altered to use the 'onclick' command to change the image source, as in the 6th line down of the function above. So I added an extra text box, and extra variable, and and an extra line in the script:

    <code>
    document.getElementById('box').innerHTML="" onclick ="document.getElementById('image').setAttribute('src',g)""
    </code>

    The text box is simply:

    <code>
    <div class="text16"><a href="" id="box" title="Click to display box art">box art</a>
    </div>
    </code>

    and, of course, it doesn't work. I don't know if what I want can be done this way, and, if it can, how to set all the quote marks so that they are correct. Can anyone please see if I'm doing anything obviously wrong?

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,157
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Makes no sense at all on a couple of fronts.

    (1) you have misused quotes here:
    Code:
    document.getElementById('box').innerHTML="" onclick ="document.getElementById('image').setAttribute('src',g)""
    What you have, effectively, written by doing that is
    Code:
    document.getElementById('box').innerHTML="";
    onclick ="document.getElementById('image').setAttribute('src',g)";
    ";
    That is, you have created 3 JS statements, of which the second two are clearly bogus.

    ***********

    But beyond that... Give that the element with id="box" is your
    Code:
    <a href="" id="box" title="Click to display box art">box art</a>
    When you change the innerHTML of an <a> element, you are changing *ONLY* the part *BETWEEN* the <a> and the </a> !!!

    So...

    I *think* what you wanted was
    Code:
    document.getElementById('box').onclick =
        function() { document.getElementById('image').setAttribute('src',g); };
    Though I have no idea where your variable g is going from.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the rapid reply!

    As you can see from my misuse of the code tabs, I'm rather new to all this, so it will take me a bit of time to understand what you have said.

    Let me see if I can explain what I'm trying to do in a simpler way.

    1 - I'm making a column of html links. As you mouseover each one, the 'preview' script above shows an image and 5 other text fields associated with that link. (That's simple, and it took me a couple of days to get that right!)

    2 - I then wanted to let the user see different images. So I thought that I could just create another text box and, instead of writing a text string to it, write an 'onclick' command to it. So each time a new image was displayed, that box would contain a new 'onclick' secondary image.

    The problem seems to be that javascript can write some fields to an element, like image source, for instance, but it doesn't seem to be able to be able to add a variable 'onclick' field.


    The 'g' variable would be the actual jpg image to be displayed by the new 'onclick' field which is to be added to the 'box' element. So the new script would read:

    Code:
    function preview(a,b,c,d,e,f,g){ 
    document.getElementById('name').innerHTML=a
    document.getElementById('size').innerHTML=b
    document.getElementById('author').innerHTML=c
    document.getElementById('desc').innerHTML=d
    document.getElementById('image').setAttribute('src',e) 
    document.getElementById('link').href=f
    document.getElementById('box').onclick =
        function() { 
    document.getElementById('image').setAttribute('src',g); };
    }
    I don't know how much this helps - one problem I have is that I don't know enough technical terms to communicate effectively.. Your correction made the script function (thanks for that), but it still doesn't set the 'box' element to display the new image when an onclick is made....) I wonder if that's actually possible....

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    A bit of experimentation shows that the 'box' element HAS been changed. However, it seems to display the second image for a fleeting moment, and then the element changes to a blank.

    Does the 'onclick' mean that the action only occurs during the click, and reverts back to the way it was? I find that the page now works as I had intended if I change the 'onclick' to 'onmouseover'. But the click just displays it during the 'click' period.

    However - thanks a lot for moving me so far forward. I can now examine a bit of code that works and try to understand why!

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh, and all the other text fields that I had put up in the first part of the script disappear when the new image is selected. I wonder why this is......

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,157
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Oh, that's because g has gone OUT OF SCOPE by the time the onclick occurs.

    g only exists for so long as your preview function is executing.

    Try this simple trick:
    Code:
    function preview(a,b,c,d,e,f,g){ 
        var image = g; // this helps create a "closure"!!
        document.getElementById('name').innerHTML=a
        document.getElementById('size').innerHTML=b
        document.getElementById('author').innerHTML=c
        document.getElementById('desc').innerHTML=d
        document.getElementById('image').setAttribute('src',e) 
        document.getElementById('link').href=f
        document.getElementById('box').onclick =
            function() { 
                document.getElementById('image').setAttribute('src',image);
                return false; 
            };
    }
    I forgot the return false before. It is needed to prevent the <a> tag from doing its normal thing, which in this case would be to reload the page. (Its href is blank, which is the same thing as "this same page".)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for sticking with a newbie so long!

    Is that 'g' a global variable once you have done that?

    I shall have to sign off and do some more experimenting tomorrow - it's coming up to midnight here...

  • #8
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    "An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is."

    ...and an engineer points out that the glass has been designed 100% over spec....

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,157
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by dodgy geezer View Post
    Is that 'g' a global variable once you have done that?
    NO. g hasn't changed. It's still just a parameter to the function. All function parameters have only function scope.

    Even image is not a GLOBAL variable. It is, as I stated, a "closure variable". Closures are something nearly unique to JavaScript. A way of extending the life of a variable so long as it is needed by a function that is enclosed in another function. I'll let you google "javascript closure". Fascinating subject.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    dodgy geezer (12-06-2012)

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,157
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Quote Originally Posted by dodgy geezer View Post
    "An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is."

    ...and an engineer points out that the glass has been designed 100% over spec....
    And a pragmatist points out the engineer has, as usual, made a faulty assumption. To wit in this case, that the drinker will always want or need only half a glass.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And a pragmatist points out the engineer has, as usual, made a faulty assumption. To wit in this case, that the drinker will always want or need only half a glass.

    Half a glass is all the drinker ever seems to get in this scenario, so you could claim that the assumption is within acceptable tolerances..

    Thanks again for the assistance - I think I am sorted now, and will start investigating how functions inside functions work....


  •  

    Posting Permissions

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