onMouseOver & arrays - using style to modify border

Discussion in 'Javascript' started by bundaism@gmail.com, Aug 22, 2006.

  1. Guest

    The code below is meant to go through all images on the page, and add a
    red border on the mouseover, and a white border on the mouseout. It's
    not working and I've spend too many hours on this - please help!

    Thanks... code below....

    <img src="someImage.jpg">

    <script type="text/javascript">
    var img_elems = document.getElementsByTagName("img");

    for (var i=0;i<img_elems.length;++i)
    {
    var img_src = img_elems.src;
    img_elems.onmouseover="this.style.borderColor='red'";
    img_elems.onmouseout="this.style.borderColor='white'";

    }
    </script>
    , Aug 22, 2006
    #1
    1. Advertising

  2. web.dev Guest

    wrote:
    > The code below is meant to go through all images on the page, and add a
    > red border on the mouseover, and a white border on the mouseout. It's
    > not working and I've spend too many hours on this - please help!
    >
    > Thanks... code below....
    >
    > <img src="someImage.jpg">
    >
    > <script type="text/javascript">
    > var img_elems = document.getElementsByTagName("img");
    >
    > for (var i=0;i<img_elems.length;++i)
    > {
    > var img_src = img_elems.src;
    > img_elems.onmouseover="this.style.borderColor='red'";
    > img_elems.onmouseout="this.style.borderColor='white'";
    >
    > }
    > </script>


    Try the following:

    <script type = "text/javascript">
    function setup()
    {
    var len = document.images.length;

    for(var i = 0; i < len; ++i)
    {
    assignEvent(i);
    }

    }

    function assignEvent(index)
    {
    document.images[index].onmouseout = mOut;
    document.images[index].onmouseover = mOver;
    }

    function mOut()
    {
    this.style.border = "1px solid white";
    }

    function mOver()
    {
    this.style.border = "1px solid red";
    }

    window.onload = setup;
    </script>

    For border color to work, you'll need border width. That's the reason
    for using border instead of assigning all of those separate css values.
    web.dev, Aug 23, 2006
    #2
    1. Advertising

  3. Guest

    THanks it works!
    web.dev wrote:
    > wrote:
    > > The code below is meant to go through all images on the page, and add a
    > > red border on the mouseover, and a white border on the mouseout. It's
    > > not working and I've spend too many hours on this - please help!
    > >
    > > Thanks... code below....
    > >
    > > <img src="someImage.jpg">
    > >
    > > <script type="text/javascript">
    > > var img_elems = document.getElementsByTagName("img");
    > >
    > > for (var i=0;i<img_elems.length;++i)
    > > {
    > > var img_src = img_elems.src;
    > > img_elems.onmouseover="this.style.borderColor='red'";
    > > img_elems.onmouseout="this.style.borderColor='white'";
    > >
    > > }
    > > </script>

    >
    > Try the following:
    >
    > <script type = "text/javascript">
    > function setup()
    > {
    > var len = document.images.length;
    >
    > for(var i = 0; i < len; ++i)
    > {
    > assignEvent(i);
    > }
    >
    > }
    >
    > function assignEvent(index)
    > {
    > document.images[index].onmouseout = mOut;
    > document.images[index].onmouseover = mOver;
    > }
    >
    > function mOut()
    > {
    > this.style.border = "1px solid white";
    > }
    >
    > function mOver()
    > {
    > this.style.border = "1px solid red";
    > }
    >
    > window.onload = setup;
    > </script>
    >
    > For border color to work, you'll need border width. That's the reason
    > for using border instead of assigning all of those separate css values.
    , Aug 23, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,241
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,331
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    685
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,489
    Adrienne Boswell
    Jul 30, 2006
  5. deko
    Replies:
    1
    Views:
    294
Loading...

Share This Page