fotominiatuur in tabel plaatsen

[kawaman]

Hallo,

Ik had graag aan mijn tabel een kolom bijgevoegd met een fotominiatuur en daar een roll over image van gemaakt (of iets dergelijk).
dit is de link naar de bestaande tabel.

http://www.ontheroad-brugge.be/pages/calender/calender.html

alvast bedankt
Greetz Gino

 

[csshunter]

Oeps, www.ontheroad-brugge.be/pages/calender/calender.html geeft een "404 - Pagina Niet Gevonden".

• Is het soms deze: www.ontheroad-brugge.be/paginas/calender.html?

Met vriendelijke groet,
CSShunter

 

[kawaman]

de site is een tijdje van her net geweest om de nieuwe site te uploaden.
dit is het adres:

http://www.ontheroad-brugge.be/paginas/calender.html

Greetz Gino

 

[csshunter]

Mooi, dan is de werkwijze bv. als volgt:

• In de tabel maak je eerst de extra kolom aan.
• Je bepaalt het formaat van de miniaturen. bv. 75*75px.
• In een tekenprogramma zet je van elke miniatuur de gewone en de hover-variant naast elkaar (150*75px), bv.:

verkleinde affiche Scale Model Challenge 2012

verkleind logo IPMS​

De cellen van de extra kolom komen er uit te zien als:

...
<td class="mini">
	<a id="smc" title="Info Scale Model Challenge 2012" href="http://www.scalemodelfactory.nl/smc01.html"></a>
</td>

En de bijbehorende css wordt:

.mini {
	width: 75px;
	background: black;
	}
.mini a {
	width: 75px;
	height: 75px;
	display: block;
	}
#smc  { background: url(images/smc.png); }
#smc:hover, #smc:focus { background-position: -75px 0; }

Toelichting:
De miniaturen worden er in gezet als background-image. Doordat de breedte van de cel maar 75px is, wordt alleen de linkerhelft van de afbeelding getoond.
Bij een hover wordt de achtergrond-positie 75px naar links gezet, en wordt nu alleen de rechterhelft getoond.

Praktijk:

• Test: bliksekaters.nl/tests/otr.htm

Met vriendelijke groet:
CSShunter