[xhtml/css] a:hover background veranderen van ander plaatje

[Verwijderd]

Heey jongens,

Ik heb wat zitten klooien met een website die ik moet ontwerpen voor een vriend van m'n pa. Redelijk lastig, want ik wil weer eens iets wat erg moeilijk lijkt (weet niet of het zo is )

Ik heb in totaal 9 plaatjes. 7 hiervan zijn gevuld met producten. Deze plaatjes veranderen zichzelf (de background met behulp van CSS.

Nu wil ik, wanneer je over 1 van die plaatjes gaat. Dat ook het middelste plaatje verandert, maar dit krijg ik niet voor elkaar.

dit is mijn bron:

code:

<div id="products">
<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div class="products01"><a href="#" title="pendant"></a></div></td>
    <td><div class="products02"><a href="#" title="wall light"></a></div></td>
    <td><div class="products03"><a href="#" title="gimbal spotlight"></a></div></td>
  </tr>
  <tr>
    <td><div class="products04"><a href="#" title="semi recessed 40 downlight"></a></div></td>
    <td><img src="" width="180" height="120" alt="" /></td>
    <td><div class="products05"><a href="#" title="semi recessed 92 downlight"></a></div></td>
  </tr>
  <tr>
    <td><div class="products06"><a href="#" title="surface mounted downlight"></a></div></td>
    <td><div class="products07"><a href="#" title="recessed downlight"></a></div></td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>

en dit is mijn css:

code:

/* ------------------------------------------------------------

    products

------------------------------------------------------------ */

#products {
    padding: 20px 0 20px 0;
    margin: 0;
    width: 100%;
}
#products img {
    border: none;
}

/* products page */

#products a {
    width: 180px;
    height: 120px;
    border: none;
    background: none;
    display: block;
}
#products a:hover {
    border: none;
}

#products .products01 {
    margin: 5px;
    background: url(../img/products01.gif) no-repeat;
    width: 180px;
    height: 120px;
}
#products .products01 a:hover {
    background: url(../img/products01.gif) no-repeat 0px -120px;
}
#products .products02 {
    margin: 5px;
    background: url(../img/products02.gif) no-repeat;
    width: 180px;
    height: 120px;
}
#products .products02 a:hover {
    background: url(../img/products02.gif) no-repeat 0px -120px;
}
#products .products03 {
    margin: 5px;
    background: url(../img/products03.gif) no-repeat;
    width: 180px;
    height: 120px;
}
#products .products03 a:hover {
    background: url(../img/products03.gif) no-repeat 0px -120px;
}
#products .products04 {
    margin: 5px;
    background: url(../img/products04.gif) no-repeat;
    width: 180px;
    height: 120px;
}
#products .products04 a:hover {
    background: url(../img/products04.gif) no-repeat 0px -120px;
}
#products .products05 {
    margin: 5px;
    background: url(../img/products05.gif) no-repeat;
    width: 180px;
    height: 120px;
}
#products .products05 a:hover {
    background: url(../img/products05.gif) no-repeat 0px -120px;
}
#products .products06 {
    margin: 5px;
    background: url(../img/products06.gif) no-repeat;
    width: 180px;
    height: 120px;
}
#products .products06 a:hover {
    background: url(../img/products06.gif) no-repeat 0px -120px;
}
#products .products07 {
    margin: 5px;
    background: url(../img/products07.gif) no-repeat;
    width: 180px;
    height: 120px;
}
#products .products07 a:hover {
    background: url(../img/products07.gif) no-repeat 0px -120px;
}

Het middelste plaatje heeft nog geen id of iets dergelijks. Maar dit is natuurlijk eenvoudig te doen

Weet iemand hoe ik dit zou moeten oplossen?

Alvast bedankt!

[Onbekend]

Ik denk dat je iets met javascript moet maken.
Aan de mouseover hang je een functie die beide plaatjes veranderd.

[Boelie-Boelie]

Verwijderd schreef op dinsdag 29 augustus 2006 @ 19:29:
Nu wil ik, wanneer je over 1 van die plaatjes gaat. Dat ook het middelste plaatje verandert

Bedoel je ongeveer zoiets, maar dan ook met image rollovers op de thumbnails? Valt wellicht te combineren...

[Verwijderd]

ik zou het zo doen :

HTML:

code:

<div id="products">
<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="#" title="pendant" id="products01"></a></div></td>
    <td><a href="#" title="wall light" id="products02"></a></div></td>
    <td><a href="#" title="gimbal spotlight" id="products03"></a></div></td>
  </tr>
  <tr>
    <td><a href="#" title="semi recessed 40 downlight" id="products04"></a></td>
    <td><img src="" width="180" height="120" alt="" id='img1'/></td>
    <td><a href="#" title="semi recessed 92 downlight" id="products05"></a></td>
  </tr>
  <tr>
    <td><a href="#" title="surface mounted downlight" id="products06"></a></td>
    <td><a href="#" title="recessed downlight" id="products07"></a></td>
    <td>&nbsp;</td>
  </tr>
</table>
</div>

CSS:

code:

/* dit voor alle A elementen */
#products a
{
    margin:5px;
    width:180px;
    height:120px;
    display:block;  
}


/* en nu per product */
a#products01
{
    background: url(../img/products01.gif) no-repeat;
}

a#products01:hover
{
    background: url(../img/products01.gif) no-repeat 0px -120px;
}

en dan javascript:

code:

<script>

    var oldhandler = window.onload;
    if(typeof oldhandler == "function")
    {
        window.onload=function()
        {
            oldhandler();
            init();
        }
    } else {
        window.onload=function()
        {
            init();
        }
    } 


    function init()
    {       
        setImageRollover("products01","rolloverplaatje","rolloutplaatje");
        setImageRollover("products02","rolloverplaatje","rolloutplaatje");
        setImageRollover("products03","rolloverplaatje","rolloutplaatje");
        setImageRollover("products04","rolloverplaatje","rolloutplaatje");
        setImageRollover("products05","rolloverplaatje","rolloutplaatje");
        setImageRollover("products06","rolloverplaatje","rolloutplaatje");
        setImageRollover("products07","rolloverplaatje","rolloutplaatje");
    }
    
    function setImageRollover(id,rolloverIMG,rolloutIMG)
    {
        // pak de midden image ID
        var img1=document.getElementById("img1");
    
        // check of deze goed is
        if(img1)
        {
    
            var el=document.getElementById(id);
            if(el)
            {
                // zet de rollover eventhandler erop
                el.onmouseover=function()
                {
                    img1.src=rolloverIMG;
                }
                
                // zet de rollout eventhandler erop
                el.onmouseover=function()
                {
                    img1.src=rolloutIMG;
                }           
            }
        }
        
    }
</script>

Heb trouwens ni getest ... maar dat moet je ff zelf doen ;-)

[ Voor 22% gewijzigd door Verwijderd op 30-08-2006 10:36 ]