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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Location
    New York
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question how do you change a var by mouse over?

    background:

    display 3-4 pictures and a generic parargraph. when you mouseover a picture the parargragh changes to the bio of the person pictured and doesn't change until a different picture is mouseovered or a reset butten is clicked.

    current code:
    i have adapted some code I found (thank you, donator) to basicly hide and unhide a span ID on mouseover. if functions as i want but the element id is hardcoded and i would like it to be dynamic on mouse location. not being that familair w/ coding and / or javascript; i'm stuck.
    Code:
    <script type="text/javascript">
       var el;
       var cpic; //elementId via mouse position
    window.onload=function() {
       el=document.getElementById('pic1');
       el.onmouseover=function() {
       changeText('hide','show')
     }
       
     }
    function changeText(cl1,cl2) {
       document.getElementById('span1').className=cl1;
       document.getElementById('span2').className=cl2;
    }
    </script>
    so the above works for 1 image, but as you can see "pic1" is hard coded. i figured i could define "cpic" to takes it's place, but i'm not sure how to get the elementId (i'm assuming it would be from the mouse position). if the above code is totaly the wrong approach let me know. it was just the first thing i found that seemed to do what i needed.

    on the HTML side "span1" is the default text and "span2" is the hidden mouseover text. i'm assuming that by adding 2 more pictures i'll need to add "span3" and "span4".
    i'll also have to find a way of hiding the other spans. I.E. if i go from pic2 to pic3 then, the pic2 text will have to be hidden before pic3 text is displayed.

    one thing i don't want to do is restrict the mouse to be focused on the picture to display the text. the text should change only when another picture is in focus or the rest button is clicked.

    any direction / suggestions would be a big help.
    regards,
    Fatmann66

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Code:
    <script>
    function showBio(which)
    {
        for ( var b = 1; b <= 4; ++b )
        {
            document.getElementById("bio" + b).style.display = 
                b == which ? "block" : "none";
        }
    }
    </script>
    <style>
    span.bio { display: none; }
    </style>
    ....
    <span class="bio" id="bio1">first person...</span>
    <span class="bio" id="bio2">second person...</span>
    <span class="bio" id="bio3">third person...</span>
    <span class="bio" id="bio4">last person...</span>
    ...
    ...
    <img ... onmouseover="showBio(1);">
    ...
    You can, of course, do it by changing className values, but if the only thing that needs to change is the display part of the style, why muck with two separate classes?


    Depending on how you want the stuff to appear, you might find the using "inline" in place of "block" is better.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Oh, and if you really want/need a "reset" link:
    Code:
    <a href="#" onclick="showBio(0); return false;">Reset</a>
    See? It will turn off all bios except number 0...but there isn't any zero! Cute.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Another way to do this:
    Code:
    <script>
    function showBio(which)
    {
        var spans = document.getElementById("BIOS").getElementsByTagName("SPAN");
        for ( var s = 0; s <= spans.length; ++s )
        {
            spans[s].style.display = ( s == which-1) ? "inline" : "none";
        }
    }
    </script>
    <style>
    span.bio { display: none; }
    </style>
    ....
    <div id="BIOS">
        <span class="bio">first person...</span>
        <span class="bio">second person...</span>
        <span class="bio">third person...</span>
        <span class="bio">last person...</span>
    </div>
    ...
    ...
    <img ... onmouseover="showBio(1);">
    ...
    Has the advantage that you don't have to know ahead of time how many <span>s you will use.

  • Users who have thanked Old Pedant for this post:

    fatmann66 (08-22-2009)

  • #5
    New to the CF scene
    Join Date
    Aug 2009
    Location
    New York
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Old Pedant,

    your code is exactly what i needed! Thanks for the lesson the first code was sufficient for my purposes.

    I can see the benefits of your second code, though; not knowing ahead of time how many img's will be needed. if I’m reading it correctly your using a for loop to count the span tags within the "bios" DIV. this loop is labeling the span ID consecutively so 'bio (5)' would be the 5th span tag within the bios div tag.

    Thanks for taking the time to help me out. Sooner or later things will start to stick for me and this will become old hat. Right now it's a struggle to figure out what functions to use to accomplish the task at hand.

    I'm not sure how anyone teaches themselves how to program, but I’m sure going to give it a try.

    Thanks again,
    Fatmann66

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    After I posted the second version, I realized I could have easily made the first version "self-adapting" so far as the number of images and spans is concerned.

    Thus:
    Code:
    <script>
    function showBio(which)
    {
        for ( var b = 1; b <= 999999; ++b ) /* use any really large number */
        {
            var bio = document.getElementById("bio" + b);
            if ( bio == null ) break; // simply quit when we don't find more!
            bio.style.display = ( b == which ) ? "block" : "none";
        }
    }
    </script>
    <style>
    span.bio { display: none; }
    </style>
    ....
    <span class="bio" id="bio1">first person...</span>
    <span class="bio" id="bio2">second person...</span>
    <span class="bio" id="bio3">third person...</span>
    ...
    <span class="bio" id="bio17">last one...</span>
    ...
    ...
    <img ... onmouseover="showBio(1);">
    ...
    <img ... onmouseover="showBio(17);">
    Just something to remember for the future.

    Re teaching yourself to program: You can do it. I did, a couple of years back. Let's see...1969, I guess it was.


  •  

    Tags for this Thread

    Posting Permissions

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