Tabel cellen met mouse-over

[Antonievb]

Goeie avond,

Sinds kort ben ik bezig met een HTML website opbouwen, en nou wil ik aan een tabel met vele cellen toevoegen dat als je met je muis over elke cel gaat, er een afbeelding verschijnt met daarop een link. En als je van de cel afgaat de afbeelding weer verdwijnt, een mouse-over dus. Ik weet niet of dat nou met css of met javascript moet, en welke code ik daar het best voor kan gebruiken.

Ik hoop dat iemand mijn vraag kan beantwoorden.

Mvg,
Antonie

 

[csshunter]

Hoi Antonie,
Met CSS!

Afhankelijk van hoe je het wilt hebben, zijn er verschillende mogelijkheden.
Bv. als je de afbeelding net zo groot wilt hebben als de tabel-cel, dan kan je er een background-image van maken, dat bij een hover op z'n plaats wordt geschoven.

<tr>
    <td id="cel1"><a href="link1.htm">Link 1</a></td>
    <td id="cel2"><a href="link2.htm">Link 2</a></td>
    <td id="cel3"><a href="link3.htm">Link 3</a></td>
    ...
    enz.
</tr>

Met in de css:

td {
    width: 100px;
    height: 100px;
    }
#cel1 { background: yellow url(images/link1.png) no-repeat -9999px 0 }
#cel2 { background: blue url(images/link2.png) no-repeat -9999px 0 }
#cel3 { background: #C0FFFF url(images/link3.png) no-repeat -9999px 0 }

td:hover,
td:focus { background-position: 0 0 }

De afbeeldingen zijn dan allemaal 100*100px.

• Ze staan alvast in de cellen waar ze vertoond moeten worden, maar in de normale toestand zijn ze met een background-positie van -9999px naar links getrokken (= buiten het gezichtsveld van het scherm), en dan is alleen de background-kleur zichtbaar.
• Bij een hover of bij een focus (via de Tab-toets) wordt de horizontale background-positie op nul gezet, dus het image staat precies in de cel.

Met vriendelijke groet,
CSShunter

 

[Antonievb]

Bedankt voor je snelle reactie.

Wat je uitlegt is niet helemaal wat ik bedoel. Ik wil de afbeelding inderdaad zo groot hebben als een cel en te voorschijn laten komen bij mouse-over, alleen in een cel moet nog niets staan als je er niet opstaat met je muis. Dan moet alleen de achtergrond afbeelding van de tabel zichtbaar zijn, die ik erin heb staan en verspreid is over alle cellen. Als je dan met je muis over een cel gaat moet je er pas op kunnen klikken, wanneer de afbeelding tevoorschijn komt. Ik hoop dat dit mogelijk is.

Wat je verteld over die afbeelding buiten het gezichtsveld is wel handig, alleen werkt de mouse-over bij mij niet. Misschien dat het aan mijn browser ligt.. Ik gebruik Google Chrome.

Mvg,
Antonie

 

[csshunter]

Hoi Antonie,
Dat de mouseover bij Chrome niet werkt, zal niet aan Chrome liggen, maar waarschijnlijk aan de hover die aan de tabel-cel was vastgeknoopt (had 'm niet uitgeprobeerd, en ik werk zelf niet met tabellen voor de opmaak).
Maar als de hovers op de links zelf worden gezet, gaat het in elk geval wel goed:

• De algemene achtergrond zit er in als background-image van de <table>.
• De links zelf zitten in een <span> in de tabelcellen, en zijn buitenboord getrokken in de normale toestand.
• De background-images voor de links zijn ook buiten boord getrokken in de normale toestand.
• Bij een hover wordt zowel de <span> met de link-tekst als de bij die link horende achtergrond-afbeelding getoond.
• De hover-backgrounds zitten in een laag boven de algemene achtergrond, die dan onzichtbaar wordt.
• Handig is om alle images in één zogenaamde "css-sprite" te zetten. Dat kan omdat het allemaal background-images zijn, die met de eigenschap background-position op hun plaats gerangeerd worden.

Test: hover-tabel.htm
Zie de broncode voor de gebruikte html en css

Met vriendelijke groet,
CSShunter

 

[Antonievb]

Nog bedankt voor je snelle reactie, en sorry voor mijn late reactie. Ik had het even druk met andere dingen waardoor me website die in de maak is een beetje uit me hoofd is gegaan.

Zou je die test pagina a.u.b. nog een keer online willen zetten? Aan je punten te zien denk ik dat het is wat ik bedoel, en daar ben ik blij mee.

Gr. Antonie

 

[csshunter]

Hoi Antonie,
De site is momenteel uit de lucht, maar hier is de pagina (met z'n image) ingezipt in de bijlage:

• Bekijk bijlage hover-tabel.zip

Met vriendelijke groet,
CSShunter
___________
[edit]15 febr. 2012[/edit] - Site is weer in de lucht, voorbeeldpagina doet het ook weer.

 

[Antonievb]

Dat is precies wat ik bedoel, top! Nu kan ik weer verder met mijn website.

Hartelijk dank voor je hulp.

Mvg,
Antonie