Manier om van een table een link te maken? - Softwareontwikkeling

zondag 6 februari 2005 00:58

Acties:

Verwijderd

Topicstarter

Ik heb een table met daarin tekst en een image. Is er een manier om van het geheel een link te maken, zodat mensen niet specifiek op de tekst of image moeten klikken? Ik neem aan dat dit mogelijk is met een CSS overlay ofzo, maar kent iemand een betere manier?

Alvast bedankt!

zondag 6 februari 2005 01:10

Acties:

BtM909

Watch out Guys...

Je kan onclick gebruiken op een TD of TR. Waarschijnlijk wil je ook wel ergens naartoe:

HTML:

1	<tr onclick="location.href='blabla.htm'">

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

zondag 6 februari 2005 10:55

Acties:

Spruit_elf

Intentionally left blank

ik zou zeggen als het allen een plaatje is met onderschrift, gooi die tabel er uit gooi het geheel in een div en gooi gewoon een link om het plaatje en de tekst heen, beetje css naar smaak toevoegen en serveren maar

Those who danced were thought to be quite insane by those who could not hear the music.

zondag 6 februari 2005 11:53

Acties:

Verwijderd

Topicstarter

de table is nodig omdat er een border rond moet... Ik zal even die onclick proberen, maar lijkt het dan wel op een link? Ik neem aan dat de cursor nog steeds veranderd wanneer er van tekst naar gif wordt gegaan? Ik zou liefst het geheel precies zoals een ge-hyperlinked plaatje laten overkomen.

zondag 6 februari 2005 11:54

Acties:

BtM909

Watch out Guys...

mrcactus schreef op zondag 06 februari 2005 @ 10:55:
ik zou zeggen als het allen een plaatje is met onderschrift, gooi die tabel er uit gooi het geheel in een div en gooi gewoon een link om het plaatje en de tekst heen, beetje css naar smaak toevoegen en serveren maar

Ik had op dat tijdstip niet echt meer zin om het hele 'gebruik-geen-tables'-stuk te schrijven

, maar je hebt deels gelijk. Ik zou alleen niet voor een div gaan (there's more than div's

)

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

zondag 6 februari 2005 12:23

Acties:

-Lars-

Verwijderd schreef op zondag 06 februari 2005 @ 11:53:
de table is nodig omdat er een border rond moet...

Dat is geen reden om een tabel te gebruiken. Een tabel is voor tabulaire data.
Wat jij zoekt is CSS-code om een border om het gewenste element weer te geven. Zie CSS Border.

Ik zal even die onclick proberen, maar lijkt het dan wel op een link? Ik neem aan dat de cursor nog steeds veranderd wanneer er van tekst naar gif wordt gegaan? Ik zou liefst het geheel precies zoals een ge-hyperlinked plaatje laten overkomen.

En wederom is CSS je vriend, hiermee kun je je cursor aanpassen: CSS Cursor property.

zondag 6 februari 2005 15:10

Acties:

Verwijderd

Topicstarter

Ok, dus ik moet een div rond de HTML van de table maken, de table tags zelf weglaten (hoe wordt de grootte dan bepaald?), dan een border met CSS maken en de cursor in die div dezelfde maken als voor een hyperlink. Maar... is het geheel in die div dan wel een hyperlink, hoe kan ik dit dan instellen?

Is er geen betere (eenvoudigere) manier, bijvoorbeeld een transparante image over de table leggen en die hyperlinken? Maar het probleem is dat ik die enkel kan bepalen t.o.v. de site, wat dus veranderd naargelang de resolutie etc. Hoe kan ik zorgen dat die enkel binnen de table blijft?

Thx,
Ken

zondag 6 februari 2005 15:32

Acties:

Verwijderd

Topicstarter

Ik heb ook een probleem met CSS fonts... In de <head><style> staat:
h1 {color: #FFFFFF; font-family: Verdana; font-size: 10pt; font-weight: bold }
.classover {background-image: url(back.gif);}

En voor mijn body:
<tr><td colspan="5" onmouseover="this.className='classover'" onmouseout="this.className=''" height="29" align="center"><h1>Beginpagina</h1></td></tr>

Maar de cell is in hoogte bijna dubbel zo groot als hij moet zijn... Hoe kan dit?

zondag 6 februari 2005 15:34

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zondag 06 februari 2005 @ 15:32:
Ik heb ook een probleem met CSS fonts... In de <head><style> staat:
h1 {color: #FFFFFF; font-family: Verdana; font-size: 10pt; font-weight: bold }
.classover {background-image: url(back.gif);}

En voor mijn body:
<tr><td colspan="5" onmouseover="this.className='classover'" onmouseout="this.className=''" height="29" align="center"><h1>Beginpagina</h1></td></tr>

Maar de cell is in hoogte bijna dubbel zo groot als hij moet zijn... Hoe kan dit?

Ik las dat er automatisch linebreaks rond h1 tags komen... Is er een andere tag die ik kan gebruiken waarbij dit niet het geval is?

zondag 6 februari 2005 15:50

Acties:

Verwijderd

dat wil je niet, opmaak regel je met CSS, niet met tags

zet de margin maar eens op 0 van je h1. Om een h1 inline te maken kan je ook display: inline; toevoegen

maar lees eens wat verder op die links van -Larz-, want het staat er echt allemaal

(en natuurlijk uberhaupt geen tabellen gebruiken voor dit soort constructies)

[ Voor 15% gewijzigd door Verwijderd op 06-02-2005 15:51 ]

zondag 6 februari 2005 16:17

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op zondag 06 februari 2005 @ 15:50:
dat wil je niet, opmaak regel je met CSS, niet met tags

zet de margin maar eens op 0 van je h1. Om een h1 inline te maken kan je ook display: inline; toevoegen

maar lees eens wat verder op die links van -Larz-, want het staat er echt allemaal

(en natuurlijk uberhaupt geen tabellen gebruiken voor dit soort constructies)

display: inline toevoegen doet niets, margin: 0px; doet precies wat ik wil

, bedankt. Nu alleen het moeilijke probleem nog

zondag 6 februari 2005 17:59

Acties:

-Lars-

Verwijderd schreef op zondag 06 februari 2005 @ 15:10:
Ok, dus ik moet een div rond de HTML van de table maken, de table tags zelf weglaten (hoe wordt de grootte dan bepaald?), dan een border met CSS maken en de cursor in die div dezelfde maken als voor een hyperlink. Maar... is het geheel in die div dan wel een hyperlink, hoe kan ik dit dan instellen?

Is er geen betere (eenvoudigere) manier, bijvoorbeeld een transparante image over de table leggen en die hyperlinken? Maar het probleem is dat ik die enkel kan bepalen t.o.v. de site, wat dus veranderd naargelang de resolutie etc. Hoe kan ik zorgen dat die enkel binnen de table blijft?

Thx,
Ken

Jouw eenvoudigere manier is niet de juiste manier. HTML omschrijft data, je zegt: "Dit is een kop, dit is een plaatje en dit is een link naar deze site". CSS zorgt voor de aankleding van de HTML: "Een kop wordt groen, een link vetgedrukt en een plaatje wordt rechts geplaatst".

Als je een tabel gebruikt, terwijl er geen sprake is van een tabel, is je HTML fout. De table-tags haal je dus weg, evenals de td's en de tr's.
Je wilt je plaatje en je link groeperen, je kunt er dan bijvoorbeeld een div-tag gebruiken. Dan ben je klaar in je HTML.

HTML:

<div onclick="javascript:location.href='blabla.htm'">
[img]"plaatje.gif"[/img]
<a href="blaat.html" id="blaat">Blaattekst</a>
</div>

Vervolgens ga je aan de slag met CSS om de juiste opmaak te verkrijgen. Daarmee kun je de cursor veranderen en een rand (border) instellen (zie URI's in vorige post).

Ik denk dat het zo zou moeten lukken, door middel van het javascriptje. Voor bezoekers zonder javascript heb je in ieder geval nog een link.

Kan het niet op deze manier (met javascript), dan moet je het vlak van de link groter maken in CSS, zodat de gewenste omgeving erin valt en dus gelinkt is.

zondag 6 februari 2005 18:02

Acties:

crisp

Devver

Pixelated

-Larz- schreef op zondag 06 februari 2005 @ 17:59:
[...]
Kan het niet op deze manier (met javascript), dan moet je het vlak van de link groter maken in CSS, zodat de gewenste omgeving erin valt en dus gelinkt is.

Of nog beter: dan zet je het plaatje als achtergrond van de link

Intentionally left blank

zondag 6 februari 2005 18:15

Acties:

Verwijderd

Topicstarter

Van die uitleg snap ik echt niets, dan heb ik inderdaad geen table meer, maar ik heb er wel een nodig. Hoe ga ik anders een background image gebruiken en hoe ga ik anders binnen die table alles een plaats geven? Sorry als ik traag van begrip ben, maar ik ben het niet gewend met CSS te werken...

Ik zal de vraag anders stellen: kun je van deze table een hyperlink maken?

<table border="1" width="142" height="202" bordercolor="#000000" id="table9" cellspacing="0" style="border-collapse: collapse" cellpadding="3" background="plaatje.gif">
<tr><td valign="top"><br><br><br> <font face="Arial" size="2">tekst</font></td></tr></table>

[ Voor 20% gewijzigd door Verwijderd op 06-02-2005 18:16 ]

zondag 6 februari 2005 18:24

Acties:

-Lars-

Verwijderd schreef op zondag 06 februari 2005 @ 18:15:
Ik zal de vraag anders stellen: kun je van deze table een hyperlink maken?

<table border="1" width="142" height="202" bordercolor="#000000" id="table9" cellspacing="0" style="border-collapse: collapse" cellpadding="3" background="plaatje.gif">
<tr><td valign="top"><br><br><br> <font face="Arial" size="2">tekst</font></td></tr></table>

Cascading Stylesheet:

#miep {
    border: 1px;
    background-image: url('plaatje.gif');
    background-position: center; 
    font: Arial;
}

HTML:

1
2
3

<div id="miep" onclick="location.href='blabla.html'">
<p><a href="blablabla.html">Tekst.</a></p>
</div>

Zoiets? En dan spelen met margin in de CSS om de juiste afmetingen te krijgen.

[ Voor 70% gewijzigd door -Lars- op 06-02-2005 18:28 . Reden: Typo ]

zondag 6 februari 2005 18:30

Acties:

mitchdc

-Larz- schreef op zondag 06 februari 2005 @ 18:24:
[...]
Cascading Stylesheet:
1
2
3
4
5
6
#miep {
    border: 1px;
    background-image: url(plaatje.gif);
    background-position: center; 
    font: Arial;
}
HTML:
1
2
3
<div id="miep" onclick="location.href='blabla.htm'">
Tekst.
</div>
Zoiets? En dan spelen met margin in de CSS om de juiste afmetingen te krijgen.

Om dan op zijn tabel door te gaan:

code:

<table border="1" width="142" height="202" bordercolor="#000000" id="table9" cellspacing="0" style="border-collapse: collapse" cellpadding="3" background="plaatje.gif">

<tr>
       <td valign="top" onclick="location.href='blabla.htm'"><br><br><br> <font face="Arial" size="2">tekst</font>
       </td>
</tr>

</table>

zondag 6 februari 2005 18:41

Acties:

Not Pingu

Dumbass ex machina

De simpelste manier:

HTML:

1
2
3

<a href="pagina.html">
    [img]"plaatje.jpg">
</a[/img]

Cascading Stylesheet:

a img
{
    border: 2px solid #f00;
}

[ Voor 18% gewijzigd door Not Pingu op 06-02-2005 18:41 ]

Certified smart block developer op de agile darkchain stack. PM voor info.

zondag 6 februari 2005 20:39

Acties:

Verwijderd

Topicstarter

-Larz- schreef op zondag 06 februari 2005 @ 18:24:
[...]
Cascading Stylesheet:
1
2
3
4
5
6
#miep {
    border: 1px;
    background-image: url('plaatje.gif');
    background-position: center; 
    font: Arial;
}
HTML:
1
2
3
<div id="miep" onclick="location.href='blabla.html'">
<p><a href="blablabla.html">Tekst.</a></p>
</div>
Zoiets? En dan spelen met margin in de CSS om de juiste afmetingen te krijgen.

Prachtig, ik heb daarin de table gezet en dan de cursor aangepast, het werkt perfect

Bedankt iedereen!

Pagina: 1

Reageer