why can't I set a value on mouseover?

Discussion in 'Javascript' started by Jake Barnes, Apr 25, 2009.

  1. Jake Barnes

    Jake Barnes Guest

    This should be the easiest thing in the world - set a background image
    for a div on mouseover.

    I'm working on a color picker for a clothing store. The customer can
    choose any of 20 colors. The colors are represented on screen by 20
    tiny divs, each with a background color. When the customer wants to
    see a particular color variation, for the clothing, they mouse over
    the div with that color. A background image is then set that
    highlights that div, showing it is choosen. This background image
    should remain till another color div is mouseover-ed.

    The image appears on hover, then disappears on mouseout. I can not
    figure out why it disappears on mouseout.

    I've tried several variations of the following jQuery code, but the
    back ground image still disappears on mouseout. I also removed the
    background image from the hover rule in the style sheet - it made no
    difference.



    // 04-24-09 - the little color divs have this styling:
    //
    // div.color-row div:hover{
    // background: url(../img/bg-color.gif) no-repeat;
    // border:0px;
    // padding:2px;
    // margin:1px;
    // }
    //
    // but this style needs to more than onhover. It needs to be
    onmouseover, so
    // it can stick after mouseout. For this task, we can reuse almost
    the same
    // code as we used in "thumbnail_borders.js".
    $("div.color-row div").mouseover(function() {
    // first, lets get rid of this border that may be on any of
    // the other divs. Info on setting backgroundImage here:
    // http://www.webdeveloper.com/forum/archive/index.php/t-55226.html
    $("div.color-row div").css("backgroundImage", "");

    this.style.background = "url(img/bg-color.gif)";
    });


    $("div.color-row div").mouseout(function() {
    // first, lets get rid of this border that may be on any of
    // the other divs. Info on setting backgroundImage here:
    // http://www.webdeveloper.com/forum/archive/index.php/t-55226.html
    $("div.color-row div").css("backgroundImage", "");

    this.style.background = "url(img/bg-color.gif)";
    });
     
    Jake Barnes, Apr 25, 2009
    #1
    1. Advertising

  2. Jake Barnes

    SAM Guest

    Le 4/25/09 7:39 AM, Jake Barnes a écrit :
    > This should be the easiest thing in the world - set a background image
    > for a div on mouseover.


    With JS :

    JS :
    ====
    function changeColor(targetId, here) {
    var t = document.getElementById(targetId);
    t.style.backgroundImage = typeof here == 'string'?
    'none' : 'url('+here.href+')';
    }

    HTML :
    ======
    <div id="viewer"></div>
    <ul>
    <li><a href="green_cloth.jpg" class="green"
    onmouseover="changeColor('viewer',this)"
    onmouseout="changeColor('viewer','none')"
    onclick="return false"></a></li>
    <li><a href="pink_cloth.jpg" class="pink"
    onmouseover="changeColor('viewer',this)"
    onmouseout="changeColor('viewer','none')"
    onclick="return false"></a></li>
    <li><a href="purple_cloth.jpg" class="purple"
    onmouseover="changeColor('viewer',this)"
    onmouseout="changeColor('viewer','none')"
    onclick="return false"></a></li>
    </ul>

    > This background image
    > should remain till another color div is mouseover-ed.


    Ho ! ? so ... :

    <ul>
    <li><a href="green_cloth.jpg" class="green"
    onmouseover="changeColor('viewer',this)"
    onclick="return false"></a></li>
    <li><a href="pink_cloth.jpg" class="pink"
    onmouseover="changeColor('viewer',this)"
    onclick="return false"></a></li>
    <li><a href="purple_cloth.jpg" class="purple"
    onmouseover="changeColor('viewer',this)"
    onclick="return false"></a></li>
    </ul>


    > The image appears on hover, then disappears on mouseout. I can not
    > figure out why it disappears on mouseout.


    So only doesn't set the mouseout's function, no ?
    probably by deleting the following

    > $("div.color-row div").mouseout(function() {
    > // first, lets get rid of this border that may be on any of
    > // the other divs. Info on setting backgroundImage here:
    > // http://www.webdeveloper.com/forum/archive/index.php/t-55226.html
    > $("div.color-row div").css("backgroundImage", "");
    > this.style.background = "url(img/bg-color.gif)";
    > });


    --
    sm
     
    SAM, Apr 25, 2009
    #2
    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. Morten
    Replies:
    2
    Views:
    701
    Morten
    Dec 19, 2003
  2. Mr. SweatyFinger

    why why why why why

    Mr. SweatyFinger, Nov 28, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    909
    Mark Rae
    Dec 21, 2006
  3. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,996
    Smokey Grindel
    Dec 2, 2006
  4. iMelody Ooo
    Replies:
    1
    Views:
    161
    Tony Arcieri
    Sep 23, 2010
  5. Danny & Noemi Shafir

    Set a value in the opener window doesn't really set it?

    Danny & Noemi Shafir, Sep 10, 2006, in forum: Javascript
    Replies:
    0
    Views:
    114
    Danny & Noemi Shafir
    Sep 10, 2006
Loading...

Share This Page