tabel maken, met plaatje en text en link's erin

djeric · 1 mei 2011

HTML:

hallo.

Ik wil op een pagina in me website een manier hebben dat men apresski cd's kunnen bestellen.
Ik heb het volgende in gedachten:

Ik wil een tabel maken met daarin het plaatje van de voorkant van de cd en als je op dit plaatje klikt opent zich een nieuwe pagina met de back cover van die cd.
daaronder wil ik weer het woord "bestellen" hebben staan, Zo dat als je daarop klikt naar een link gaat waar de bestelling word plaats gevonden.

een voorbeeld van ongeveer wat ik bedoel:

Bekijk bijlage 127997

Zoiets aan code heb ik nu:

HTML:

<TABLE>
<TR>
<TD WIDTH="150" HEIGHT="40"><A HREF="cd/skihut/skihut1.JPG"><IMG SRC="cd/skihut/back1.JPG" WIDTH=150 HEIGHT=148 border="0" alt="De apres skihut"></a></TD>
<TR>
<TD HEIGHT="20"><A HREF="http://www.bol.com/nl/inwinkelwagentje.html?productId=1000004003058967"><FONT COLOR="#3300ff"><u><center>bestellen</center></u></font></A></TD>
</TR>
</TABLE>

Je ziet hier een titel voor iedere type cd dat moet in een bepaalde kleur (blauw) in het midden bij iedere soort cd staan. daarnaast dan die tabellen met de cd's erin. maar wel zo dat alles netjes gecentreerd is volgens html strict met gebruik van evt css.
De plaatjes van de voorkant van iedere cd staat dan netjes op de zelfde groote op de pagina, en de link eronder met: "bestellen" eronder. (kan deze link ook een mouse over nog krijgen??? - dus bv blauw geschreven en met rode link bij een mouse over???)

hij moet dan uiteindelijk op deze pagina komen:

http://members.home.nl/ebosmannetjes/cd.html

het is best veel werk denk ik, maar het is zo moeilijk dat ik totaal niet begrijp hoe je nu moet beginnen en hoe het nu moet.
Ik heb steeds de verkeerde html geleerd. zonder die strict, en maakte daardoor veel gebruik van oude code´s

wie o wie kan me op weg helpen???

gast0195 · 2 mei 2011

Het is eerst belangrijk om te kijken wat je nu precies wilt.

Je wilt een CD hoes. Als je daarop klikt de achterkant van de CD. Vervolgens een knop met bestellen. Als ik naar de code kijk die je neerzet dan raad ik je aan dit door iemand anders te laten doen. Met alle respect, maar als dat je kennis niveau is ga je het denk ik niet redden.

Ik wil je wel een duwtje in de goede richting geven.

Je maakt nu je tabel op in de tabel zelf. Gebruik hiervoor een Cascading StyleSheet. Daarmee hoef je de opmaak maar 1 keer te maken.

Bijvoorbeeld:

<head>
<style type="text/css">
.main img{
width: 150px;
height: 150px;
}
.main a:link, .main a:visited{
text-decoration: none;
color: lightblue;
}
.main a:hover{
text-decoration: underline;
}
</style>
</head>

<table cellpadding="0" cellspacing="0" class="main">
<tr>
<td><img src="voorkant.jpg" alt="alttext hier"></td>
</tr>
<tr>
<td><a href="#">bestellen</a></td>
</tr>
</table>

======
bovenstaand is een richtlijn voor je HTML bestand. Het systeem waarbij je op de voorakant klikt en dan de achterkant krijgt kun je doen met bijvoorbeeld FancyBox. Google hier maar eens op.

Hoop dat ik je een duwtje in de goede richting heb kunnen geven.

djeric · 2 mei 2011

gast0195 zei:
Hoop dat ik je een duwtje in de goede richting heb kunnen geven.

Dit heb je zeker!:thumb:

Heb nu wat ik wilde bereiken.

heb een beetje de code hier en daar aangepast en dingen aan toegevoegd, en geupload naar me webpagina. heb hem meteen gevalideerd op css en html en ziet er goed werkend uit.

Zie: http://members.home.nl/ebosmannetjes/cd.html

de html code is nu dan:

HTML:

<table cellpadding="0" cellspacing="0" class="main">
<TR>
<td><a href="cd/skihut/1back.jpg"><img src="cd/skihut/skihut1.jpg" alt="De apres skihut"></a></td>
<TR>
<TD><a href="http://www.bol.com/nl/p/muziek/apres-skihut/1000004004935185/index.html">bestellen</a></td>
</TR>
</table>

en me css is nu dan:

Code:

   .main img{
width: 150px;
height: 150px;
}
.main a:link, .main a:visited{
text-decoration: none;
color: #CCFF33;
}
.main a:hover{
text-decoration: underline;
color: #FF0066;
}

alles werkt zoals het moet. mouse over met kleur verandering, underline bij bestellen bv ook leuke optie. (duidelijker:thumb

Er moet alleen nog paar kleine dingen gedaan worden om het af te maken.

Op iedere link. dus zowel op het plaatje als op de link van bestellen opent niets in een nieuwe scherm. Logisch dacht ik want de code: target="_blank" staat niet er tussen.

Maar begrijp het niet meer. als ik hem plaats in de html dan herkent hij de code niet. (me ie 9 browser) alles opent zich steeds in de zelfde pagina. Ik heb op google gekeken en vond dit:
http://www.rug.nl/webplatform/support/voorbeelden/openenNieuwVenster

wat nu??? kan je niet deze links in een nieuwe scherm laten openen???
bedoeling is dat mensen de back cover kunnen zien en weer kunnen weg klikken. (doe je toch met die code: target="_blank" ???
ook als ze op een betaal site komen voor de cd te bestellen, mag deze in een nieuwe pagina worden geopend. moet onder html strict dan weer een popup worden gemaakt apart?

djeric · 5 mei 2011

Flemming zei:

HTML Code:

Code:

<table cellpadding="0" cellspacing="0" class="main">
<tr>
<td><a href="cd/skihut/1back.jpg"><img src="cd/skihut/skihut1.jpg" alt="De apres skihut[COLOR="red"]" /></[/COLOR]a></td>
</tr>
<tr>
<td><a href="http://www.bol.com/nl/p/muziek/apres-skihut/1000004004935185/index.html" target="_blank[COLOR="red"]" >[/COLOR]bestellen</a></td>
</tr>
</table>

snap zoiezo al niet dat die target nu wel werkt.
Waarschijnlijk plaatste ik die ergens anders in de html code.
Wat me opvalt is dat je op de rood aangegeven plaatsen, spaties ertussen laat. zou dit kunnen betekenen dat het daarom niet werkte???

rest me nog 1 vraag:

ipv een link op het plaatje, is het dan ook mogelijk om een mouse over te krijgen dat ik dan een ander plaatje kan krijgen???
dus zoals nu, je ziet die voorkant van een cd, met bestellen eronder. Nu wil je de back cover zien en moet je nu momenteel op het plaatje klikken en opent in het zelfde venster een nieuwe pagina waar die back cover erop staat.
is dit ook mogelijk bij een mouse over???
dat als ik met de muis over het plaatje ga, die back cover al zie????

djeric · 5 mei 2011

Flemming zei:
antwoord op je volgende vraag, dat gaat zeker maar dan moet je de volledige code en de code van de CSS file posten, dat kan dan beter via MSN of Skype.

Ik heb je een mail gestuurd.

Met vriendelijke groeten,
flemming

ok lossen we t verder zo op, gaat immers toch verder over mijn website en kan het hier wel oftopic. heb al een groot doel bereikt door alle hulp van ieder hiero die mee geholpen heeft. :thumb:

tabel maken, met plaatje en text en link's erin

djeric

Gebruiker

gast0195

Gebruiker

djeric

Gebruiker

djeric

Gebruiker

djeric

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy