SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2001
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onmouseover & functions

    ill try to explain as clear as i can(which might not be too good)

    how do you pass an argument to a function.


    for example if you have a <span id = "test" onMouseOver ="myfunc(x)>

    eg you have lots of differant span id's but you want then all to have a certain background-color with each individual on mouseover event without having to write separate code for each span id
    eg <span id=" test2"onmouseover ="this.style.background ='red'>


    cheers chris

  2. #2
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Let's see if I have this straight - you want the background colour of multiple <span>ned areas to change when you move the mouse over any one, right?

    In that case, you had the right idea about using a function like this:

    <span id="test2" onmouseover="changeColours()">

    I'll build it up so that you can see what's happening. The basic function (in the usual <script> tags) might look like:

    function changeColours()
    {
    document.getElementById('test1').style.background = "#ff0000";
    document.getElementById('test2').style.background = "#ff0000";
    document.getElementById('test3').style.background = "#ff0000";
    document.getElementById('test4').style.background = "#ff0000";
    }


    You could then improve upon that by specifying the colour as an argument:

    <span id="test2" onmouseover="changeColours('#ff0000')">

    and...

    function changeColours(newColour)
    {
    document.getElementById('test1').style.background = newColour;
    document.getElementById('test2').style.background = newColour;
    document.getElementById('test3').style.background = newColour;
    document.getElementById('test4').style.background = newColour;
    }


    ...and if you stick to numbered id attributes like test1, test2 you can automate it further with a for loop:

    function changeColours(newColour)
    {
    var firstID = 1;
    var lastID = 10;

    for(i = firstID; i <= lastID; i++)
    {
    document.getElementById('test' + i).style.background = newColour;
    }
    }


    ...and finally, throw in some browser checking:

    function changeColours(newColour)
    {
    var firstID = 1;
    var lastID = 10;

    if (document.getElementById)
    {
    for(i = firstID; i <= lastID; i++)
    {
    document.getElementById('test' + i).style.background = newColour;
    }
    }
    else if (document.all)
    {
    for(i = firstID; i <= lastID; i++)
    {
    document.all['test' + i].style.background = newColour;
    }
    }
    }

    The second chunk of code should ensure it works in IE4 as well as standards-compliant browsers. You could probably get NS4 to work too, but the code above should at least do enough to stop NS4 complaining, which is good enough IMO.

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    veeery nice...

    You need to write an article for the Crier...

    Sketch
    Aaron Brazell
    Technosailor



  4. #4
    We like music. weirdbeardmt's Avatar
    Join Date
    May 2001
    Location
    Channel Islands Girth: Footlong
    Posts
    5,882
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That just scared the crap out of me! I spent a while trying to do this, and was using a function called changeColours()! In the end I didn't submit it cos I didn't have time, but for a while I was like, er, did I actually submit this!?

    Nice script though, I have certainly learnt something!!
    I swear to drunk I'm not God.
    Matt's debating is not a crime
    Hint: Don't buy a stupid dwarf Clicky


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
  •