Inline rollover

[John Schretz]

I need to be able to do some kind of inline rollover on an image background
below is the code block i need to do it in. any help would be great

ORIGINAL

    
 <div class="bmarkermenu">
                    <ul>
                     < c:forEach var="vendor" items="${vendors}">
                        <ul style="background: url(brandImages/${vendor.vLogo}) right no-repeat;" >
                          <li><a href="products?VENDORCODE=${vendor.vCode}">${vendor.vName}</a></li>
                        </ul>
                      </c:forEach>
                    </ul>
                  </div>
 

[ October 31, 2008: Message edited by: John Schretz ]

[Eric Pascarello]

I am not sure why you would have lists with only one item in it. Pretty bad use of a list.

If I was going to do it, this is how I would:

<style type="text/css">
 

ul.vendors{
width: 200px;
margin: 0;
padding: 0;
list-style-type: none;
font-family: Helvetica, sans-serif;
}
 
ul.vendors a{
display: block;
padding: 5px;
width: 190px;
background: #036;
}
 
ul.vendors a:link, ul.vendors a:visited{
color: #EEE;
text-decoration: none;
}
 

ul.vendors a:hover{
background: #369;
color: #fff;
}
 
ul.vendors a.comp1:link{ background: url("comp1_a.gif") #123; }
ul.vendors a.comp1:hover{ background: url("comp1_b.gif") #321; }
ul.vendors a.comp2:link{ background: url("comp2_a.gif") #234; }
ul.vendors a.comp2:hover{ background: url("comp2_b.gif") #432; }
ul.vendors a.comp3:link{ background: url("comp3_a.gif") #345; }
ul.vendors a.comp3:hover{ background: url("comp3_b.gif") #543; }
 
</style>
 

 
<ul class="vendors">
  <li><a href="#" class="comp1">Company 1</a>
  <li><a href="#" class="comp2">Company 2</a>
  <li><a href="#" class="comp3">Company 3</a>
</ul>

If you want to go a JS route, you need to use onmouseover and onmouseout and set the this.style.backgroundImage or this.parentElement.style.backgroundImage

Eric

[John Schretz]

Hi i was able to get this working correctly with the following code. I just need to fix one thing. I need to set both mo Useovers background = to no repeat. How would i go by doing that?

TIA John

   <script type='text/javascript'><!--
function cellImg(idCell, imgName) {
document.getElementById(idCell).style.background = "url(" + imgName + ")";
 
}
//--></script> 

       <ul>
                          <li id='471' style="width:211px; 
                          background-image:url(brandImages/10_deep.gif); 
                          background-repeat:no-repeat;" 
                          onmuseover="javascript:cellImg('471','brandImages/10_deep_over.gif')"
                          onmuseout="javascript:cellImg('471','brandImages/10_deep.gif')"> 
                          <a href="products?VENDORCODE=471">10 Deep</a> 
                          </li>
                        </ul> 

[ November 06, 2008: Message edited by: John Schretz ]
[ November 06, 2008: Message edited by: John Schretz ]

[Eric Pascarello]

background = "url('foo') #CCC no-repeat";

Eric

[John Schretz]

That did the trick, thanks a million