why can't I set a value on mouseover?

[Jake Barnes]

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)";
});

 

[SAM]

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>

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)"

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