php-Tabel met scroll-over maken
Op mijn website heb ik een php-script staan die ervoor zorgt dat er een tabel tevoorschijn komt na een zoekactie. In die tabel staan dan de resultaten van de zoekactie. Het ziet er momenteel niet uit zoals ik zou willen. Hoe ik het wèl zou willen hebben is weergegeven op Jobtrack. Misschien kun je eens kijken op: http://www.jobtrack.nl/jobtrack/SearchJobOpeningResultPage.aspx?kword=verkoop&page=2&so=4
Als je met de muis over het resultaat scrollt komt er een kleurtje te voorschijn. Zelf zou ik dan voor andere kleur kiezen uiteraard! Is er iemand die weet hoe ik dit zou kunnen maken ??
Mijn PHP script voor de tabel is nu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?
echo "<table border='1' style='border-color:#000000;'>";
echo "<tr>";
echo "<td width='250'><b>Naam 1</b></td>";
echo "<td width='250'><b>Naam 2</b></td>";
echo "<td width='250'><b>Naam 3</b></td>";
echo "<td width='150'><b>Naam 4</b></td>";
echo "<td width='130'><b>Naam 5</b></td>";
echo "</tr>";
while($row = mysql_fetch_array($res))
{
if($I < $nAantal && $n >= $I)
{
echo "<tr>";
echo "<td>" . $row[Naam 11] . "</td>";
echo "<td><a href=Naam 12.php?id=" . $row['id'] . "'>" . $row[Naam 13] . "</a></td>";
echo "<td>" . $row[Naam 14] . "</td>";
echo "<td>" . $row[Naam 15] . "</td>";
echo "<td>" . $row[Naam 16] . "</td>";
echo "</tr>";
?>
echo "<table border='1' style='border-color:#000000;'>";
echo "<tr>";
echo "<td width='250'><b>Naam 1</b></td>";
echo "<td width='250'><b>Naam 2</b></td>";
echo "<td width='250'><b>Naam 3</b></td>";
echo "<td width='150'><b>Naam 4</b></td>";
echo "<td width='130'><b>Naam 5</b></td>";
echo "</tr>";
while($row = mysql_fetch_array($res))
{
if($I < $nAantal && $n >= $I)
{
echo "<tr>";
echo "<td>" . $row[Naam 11] . "</td>";
echo "<td><a href=Naam 12.php?id=" . $row['id'] . "'>" . $row[Naam 13] . "</a></td>";
echo "<td>" . $row[Naam 14] . "</td>";
echo "<td>" . $row[Naam 15] . "</td>";
echo "<td>" . $row[Naam 16] . "</td>";
echo "</tr>";
?>
Gr. JJ
Geef je <td> (of je <a>) een class.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
td.verkleur_bij_hover
{
display: block;
background-color: #222;
/* en de rest */
}
td.verkleur_bij_hover:hover
{
background-color: #999;
}
{
display: block;
background-color: #222;
/* en de rest */
}
td.verkleur_bij_hover:hover
{
background-color: #999;
}
Verder wil ik ook dat de tabel geen vierkant is maar de hoeken mooi zijn afgebold zaosl op die site. Is dat ook CSS ? Moet ik het misschien dan maar niet op php-hulp planten dit topic ? Zoniet op welke website kan ik het dan het beste zetten.
Dat geeft (in een fatsoenlijke browser, wellicht IE6 niet) gewoon een andere kleur van de rij.
Mocht het op de <td> niet werken: gebruik dan de <a>.
Hoeken mooi afgerond: dat is even googlen, maar is inderdaad veel CSS.
Je moet dan 2 plaatjes maken (boven en onder) en die geef je als achtergrond weer.
De website is niet 'liquid', zoals dat heet, maar gewoon altijd dezelfde breedte.
Dus is een plaatje geen probleem.
Code (php)
1
2
3
4
5
2
3
4
5
tabel.dieikwil th
{
background-image: url(plaatjes/kop_tabel_met_ronde_hoekjes.png);
/* meer css... positie etc */
}
{
background-image: url(plaatjes/kop_tabel_met_ronde_hoekjes.png);
/* meer css... positie etc */
}
Zulke vragen kunnen best op phphulp, want ook hier wordt je geholpen.
Om de techniek te oefenen: begin eens simpel.
Maar eens dit aan:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
HTML
<div class="hovermij">Tekst!</div>
CSS
div.hovermij
{
display: block;
width: 200px;
height: 300px;
background-color: #eee;
color: #999;
margin-left: 10px;
}
div.hovermij:hover
{
background-color: #999;
color: #eee;
margin-left: 50px;
}
<div class="hovermij">Tekst!</div>
CSS
div.hovermij
{
display: block;
width: 200px;
height: 300px;
background-color: #eee;
color: #999;
margin-left: 10px;
}
div.hovermij:hover
{
background-color: #999;
color: #eee;
margin-left: 50px;
}
Je ziet dat je er alles mee kan doen. Bovenstaand voorbeeld moet gewoon werken.... wellicht behalve IE.
Wil je het toch laten werken.... vervang de <div> door een <a>... daar werkt het met IE wel mee.
getest in IE en Firefox. Zowel voor <a> als voor <div>. Bij beide krijg ik alleen de 'tekst' maar zonder scrollover.
Ik heb om het te testen 2 pagina's:
Pagina 1 = test (html)
<div class="hovermij">Tekst!</div>
Pagina 2 = CSS (default)
div.hovermij
{
display: block;
width: 200px;
height: 300px;
background-color: #eee;
color: #999;
margin-left: 10px;
}
div.hovermij:hover
{
background-color: #999;
color: #eee;
margin-left: 50px;
}
WAT DOE IK FOUT ??
Maar is die optie voor mij er dan nog ? Of niet meer ?
Eeventueel wil ik best in mijn PHPpagina wat JAVA scripten,...........enfin als dat makkelijker is ?
is het met PHP en CSS vergelijkbaar (lees: net zo goed) te doen ?
gr.
HTML
<div class="hovermij">Tekst!</div>
<style>
CSS
div.hovermij
{
display: block;
width: 200px;
height: 300px;
background-color: #eee;
color: #999;
margin-left: 10px;
}
div.hovermij:hover
{
background-color: #999;
color: #eee;
margin-left: 50px;
}
</style>
Zo werkt hij ook goed (en mooi)
<div class="hovermij">Tekst!</div>
<style>
div.hovermij
{
display: block;
width: 200px;
background-color: #eee;
color: #999;
margin-left: 20px;
}
div.hovermij:hover
{
background-color: #999;
color: #eee;
margin-left: 20px;
}
</style>
ik zelf gebruik heb ook en het werkt uitstekend!
(ik weet de openings en sluitng van een script niet dus sorry :$ )
Gewijzigd op 01/01/1970 01:00:00 door maurice
Waarom moelijk doen als het makkelijk kan?
Waar moet ik dat plaatsen ? In CSS of in in het PHP-bestand ? Of in een HTML file ?
Ik zal vanavond er eens mee gaan stoeien!
Alvast bedankt!
<div class="hovermij">Tekst!</div>
<style>
div.hovermij
{
display: block;
width: 200px;
background-color: #eee;
color: #999;
margin-left: 20px;
}
div.hovermij:hover
{
background-color: #999;
color: #eee;
margin-left: 20px;
}
</style>
Gelieve Niet Bumpen::
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de 
knop om je tekst aan te passen.
SanThe.
knop om je tekst aan te passen.SanThe.
Gewijzigd op 01/01/1970 01:00:00 door jjriet petersen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?
echo "<table border='1' style='border-color:#000000;'>";
echo "<tr>";
echo "<td width='250'><b>Naam 1</b></td>";
echo "<td width='250'><b>Naam 2</b></td>";
echo "<td width='250'><b>Naam 3</b></td>";
echo "<td width='150'><b>Naam 4</b></td>";
echo "<td width='130'><b>Naam 5</b></td>";
echo "</tr>";
while($row = mysql_fetch_array($res))
{
if($I < $nAantal && $n >= $I)
{
echo "<tr>";
echo "<td>" . $row[Naam 11] . "</td>";
echo "<td><a href=Naam 12.php?id=" . $row['id'] . "'>" . $row[Naam 13] . "</a></td>";
echo "<td>" . $row[Naam 14] . "</td>";
echo "<td>" . $row[Naam 15] . "</td>";
echo "<td>" . $row[Naam 16] . "</td>";
echo "</tr>";
?>
echo "<table border='1' style='border-color:#000000;'>";
echo "<tr>";
echo "<td width='250'><b>Naam 1</b></td>";
echo "<td width='250'><b>Naam 2</b></td>";
echo "<td width='250'><b>Naam 3</b></td>";
echo "<td width='150'><b>Naam 4</b></td>";
echo "<td width='130'><b>Naam 5</b></td>";
echo "</tr>";
while($row = mysql_fetch_array($res))
{
if($I < $nAantal && $n >= $I)
{
echo "<tr>";
echo "<td>" . $row[Naam 11] . "</td>";
echo "<td><a href=Naam 12.php?id=" . $row['id'] . "'>" . $row[Naam 13] . "</a></td>";
echo "<td>" . $row[Naam 14] . "</td>";
echo "<td>" . $row[Naam 15] . "</td>";
echo "<td>" . $row[Naam 16] . "</td>";
echo "</tr>";
?>
Weet jij of iemand anders waar ik specialisten hiervoor kan vinden die dat eventueel betaald willen doen ? Of forums die mij ermee kunnen helpen ?
er zijn hier ook genoeg mensen ervaren met javascript