Hover effect op tabelrij
Ik heb jullie hulp nodig. Na veel lezen en uitproberen is het mij niet gelukt om de resultaten van een zoekquery een hover effect te geven.
Zie onderstaande gedeelte van mijn script. De hele tabelrij is aan te klikken.
- Er verschijnt echter geen "handje"als je op de tabelrij staat (output).
Maar wat ik wil is een hover effect op het resultaat(tabel)rij als ik met de muis overheen ga.
Graag jullie hulp.
Met vriendelijke groet,
Shyaak
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
while(list($id, $type, $naam, $website, $regio, $postcode, $plaats, $adres, $telefoonnummer) = mysql_fetch_row($result))
{ echo "<table width='715' border='0' cellspacing='0' cellpadding='2' bgcolor='#Ffffff' style='table-layout:fixed' \n";
echo "<tr><a href='$website'>\n";
echo "<td width='169'><FONT size='-2' color='#FE4D1B'/>$naam</FONT></td>\n";
echo "<td width='150'><FONT size='-2' color='#666666'/>$adres</FONT></td>\n";
echo "<td width='55'><FONT size='-2' color='#666666'/>$postcode</FONT></td>\n";
echo "<td width='74'><FONT size='-2' color='#666666'/>$plaats</FONT></td>\n";
echo "<td width='90'><FONT size='-2' color='#666666'/>$telefoonnummer</FONT></td>\n";
echo "<td width='178'><FONT size='-2' color='#666666'/>$website</FONT></td>\n";
echo "</td>\n";
echo "</a></tr>\n";
}
?>
while(list($id, $type, $naam, $website, $regio, $postcode, $plaats, $adres, $telefoonnummer) = mysql_fetch_row($result))
{ echo "<table width='715' border='0' cellspacing='0' cellpadding='2' bgcolor='#Ffffff' style='table-layout:fixed' \n";
echo "<tr><a href='$website'>\n";
echo "<td width='169'><FONT size='-2' color='#FE4D1B'/>$naam</FONT></td>\n";
echo "<td width='150'><FONT size='-2' color='#666666'/>$adres</FONT></td>\n";
echo "<td width='55'><FONT size='-2' color='#666666'/>$postcode</FONT></td>\n";
echo "<td width='74'><FONT size='-2' color='#666666'/>$plaats</FONT></td>\n";
echo "<td width='90'><FONT size='-2' color='#666666'/>$telefoonnummer</FONT></td>\n";
echo "<td width='178'><FONT size='-2' color='#666666'/>$website</FONT></td>\n";
echo "</td>\n";
echo "</a></tr>\n";
}
?>
Gebruik code-tags voor het overzichtelijk weergeven van je code[/modedit]
Gewijzigd op 14/06/2010 16:17:14 door Joren de Wit
Code (php)
1
2
3
2
3
td:hover {
background: red;
}
background: red;
}
Waarom javascript als het met css kan? Of word dit niet ondersteund in alle browsers?
kan volstaan worden met td:.. of moet het resultaattabel/rij in een div gepropt worden?
Geef de table een class mee en koppel die class aan de td..
Code (php)
1
echo "<tr class=\"CLASSNORMAAL\" onmouseover=\"this.className='CLASSHOVER'\" onmouseout=\"this.className='CLASSNORMAAL'\">";
CSS:
Code (php)
1
2
3
2
3
.table-hover td:hover {
background: red;
}
background: red;
}
TABEL:
Code (php)
1
2
3
2
3
<table class="table-hover">
REST VAN TABLE
</table>
REST VAN TABLE
</table>
Shyaak Nana op 14/06/2010 17:24:03:
Java != Javascriptoeps. geen verstand van java.
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>
<head>
<style type="text/css">
tr {
background-color: lightblue;
}
tr:hover {
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>Bonjour</td><td>Hoi</td></tr>
<tr><td>2</td><td>Ciao</td><td>Hai</td></tr>
<tr><td>3</td><td>Hi!</td><td>Hey</td></tr>
</table>
</body>
</html>
<head>
<style type="text/css">
tr {
background-color: lightblue;
}
tr:hover {
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>Bonjour</td><td>Hoi</td></tr>
<tr><td>2</td><td>Ciao</td><td>Hai</td></tr>
<tr><td>3</td><td>Hi!</td><td>Hey</td></tr>
</table>
</body>
</html>
Succes!
Gewijzigd op 14/06/2010 20:03:52 door Mark L
Elwin Fratsloos op 14/06/2010 19:45:41:
De :hover pseudo-class in CSS wordt niet door alle browsers ondersteund. IE heeft hier problemen mee.
Shyaak Nana op 14/06/2010 17:24:03:
Java != Javascriptoeps. geen verstand van java.
Alleen IE 6 doet hij het niet, wel in IE 7, 8, Safari, Chrome, Firefox... Alleen die stomme IE 6 doet het niet, maar hoe minder we daar rekening mee houden hoe eerder IE 6 verdwijnt! Het deel dat IE 6 gebruikt bevindt zich al onder de 5%.
En als we echt rekening gaan houden hoe en wat kwa CSS kunnen we net zo zeggen dat een hover in IE 6 onmogelijk is want er zijn ook mensen die geen Javascript ondersteunen.
Oetzie en mijn achternaam op 14/06/2010 20:36:29:
Alleen IE 6 doet hij het niet, wel in IE 7, 8, Safari, Chrome, Firefox... Alleen die stomme IE 6 doet het niet, maar hoe minder we daar rekening mee houden hoe eerder IE 6 verdwijnt! Het deel dat IE 6 gebruikt bevindt zich al onder de 5%.
Was het maar waar; het is nog steeds ruim 17%. Eén op de zes mensen bezoekt jouw site met IE6. Gelukkig is er een oplossing.
Stap 1: voeg een conditional comment voor IE6 aan de <head> sectie toe:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<!--[if lte IE 6]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
}
</style>
<![endif]-->
Stap 2: upload het bestand csshover.htc naar je host
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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
* Whatever:hover - V1.42.060206 - hover & active
* ------------------------------------------------------------
* (c) 2005 - Peter Nederlof
* Peterned - http://www.xs4all.nl/~peterned/
* License - http://creativecommons.org/licenses/LGPL/2.1/
*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ------------------------------------------------------------
*/
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover|active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) {
var element = doc.getElementById(identify[1]);
return element? [element]:nodes;
}
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}
return nodes;
}
</script>
<script>
/**
* Whatever:hover - V1.42.060206 - hover & active
* ------------------------------------------------------------
* (c) 2005 - Peter Nederlof
* Peterned - http://www.xs4all.nl/~peterned/
* License - http://creativecommons.org/licenses/LGPL/2.1/
*
* Whatever:hover is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* Whatever:hover is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* Credits and thanks to:
* Arnoud Berendsen, Martin Reurings, Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ------------------------------------------------------------
*/
var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
window.attachEvent('onunload', unhookHoverEvents);
var sheets = doc.styleSheets, l = sheets.length;
for(var i=0; i<l; i++)
parseStylesheet(sheets[i]);
}
function parseStylesheet(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
} catch(securityException){}
}
try {
var rules = (currentSheet = sheet).rules, l = rules.length;
for(var j=0; j<l; j++) parseCSSRule(rules[j]);
} catch(securityException){}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!csshoverReg.test(select) || !style) return;
var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
var affected = select.replace(/:(hover|active).*$/, '');
var elements = getElementsBySelect(affected);
if(elements.length == 0) return;
currentSheet.addRule(newSelect, style);
for(var i=0; i<elements.length; i++)
new HoverElement(elements[i], className, activators[pseudo]);
}
function HoverElement(node, className, events) {
if(!node.hovers) node.hovers = {};
if(node.hovers[className]) return;
node.hovers[className] = true;
hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
function hookHoverEvent(node, type, handler) {
node.attachEvent(type, handler);
hoverEvents[hoverEvents.length] = {
node:node, type:type, handler:handler
};
}
function unhookHoverEvents() {
for(var e,i=0; i<hoverEvents.length; i++) {
e = hoverEvents[i];
e.node.detachEvent(e.type, e.handler);
}
}
function getElementsBySelect(rule) {
var parts, nodes = [doc];
parts = rule.split(' ');
for(var i=0; i<parts.length; i++) {
nodes = getSelectedNodes(parts[i], nodes);
} return nodes;
}
function getSelectedNodes(select, elements) {
var result, node, nodes = [];
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
if(identify) {
var element = doc.getElementById(identify[1]);
return element? [element]:nodes;
}
var classname = (/\.([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
for(var i=0; i<elements.length; i++) {
result = tagName? elements[i].all.tags(tagName):elements[i].all;
for(var j=0; j<result.length; j++) {
node = result[j];
if(classReg && !classReg.test(node.className)) continue;
nodes[nodes.length] = node;
}
}
return nodes;
}
</script>
Gewijzigd op 14/06/2010 21:33:32 door Jan Koehoorn
Ik ga de oplossingsvoorstellen uitproberen
maar past het toe op de hele pagina niet alleen op de resultaattabel. Ik heb geprobeerd het af te bakenen door td een id mee te geven, maar helaas.
Shyaak Nana op 15/06/2010 09:33:58:
Scriptje van markt in de haeder werkt in mozilla firefox, maar ehlaas niet in ie.
maar past het toe op de hele pagina niet alleen op de resultaattabel. Ik heb geprobeerd het af te bakenen door td een id mee te geven, maar helaas.
maar past het toe op de hele pagina niet alleen op de resultaattabel. Ik heb geprobeerd het af te bakenen door td een id mee te geven, maar helaas.
Het werkt alleen niet in IE 6, dus update je browser even.. Je gaat nu toch ook geen tv meer kijken op een oude zwart wit tv?.. Beetje met de tijd mee gaan ;)
Geef de tabel een class bv table-hover en in de css dan
Code (php)
1
.table-hover td:hover { background: red; }
Maar tip zorg dat je tenminste de basis kent van HTML en CSS voordat je met php begint? Waarom willen mensen gelijk bij stap 5 beginnen en 1 t/m 4 overslaan? Bij voetbal ga je toch ook niet gelijk bij een profclub beginnen? Maar begin je toch ook onderaan bij de amateurs?...
Ik heb een heleboel met css kunnen doen, maar werkt niet optimaal genoeg.
In firefox werkt de hover kleur effect wel, maar de rij als link werkt niet. doet niets als je erop klikt.
In IE werkt de hovereffect niet, maar de rij functioneert wel als link, als je op de rij klikt.
rara wie helpt mij verder?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
while(list($id, $type, $naam, $website, $regio, $postcode, $plaats, $adres, $telefoonnummer) = mysql_fetch_row($result))
{ echo "<table width='715' border='0' cellspacing='0' cellpadding='2' bgcolor='#Ffffff' style='table-layout:fixed' \n";
echo "<tr id='trtest'><a href='$website'>\n";
echo "<td width='169'><FONT size='-2' color='#FE4D1B'/>$naam</FONT></td>\n";
echo "<td width='150'><FONT size='-2' color='#666666'/>$adres</FONT></td>\n";
echo "<td width='55'><FONT size='-2' color='#666666'/>$postcode</FONT></td>\n";
echo "<td width='74'><FONT size='-2' color='#666666'/>$plaats</FONT></td>\n";
echo "<td width='90'><FONT size='-2' color='#666666'/>$telefoonnummer</FONT></td>\n";
echo "<td width='178'><FONT size='-2' color='#666666'/>$website</FONT></td>\n";
echo "</td>\n";
echo "</a></tr>\n";
}
?>
while(list($id, $type, $naam, $website, $regio, $postcode, $plaats, $adres, $telefoonnummer) = mysql_fetch_row($result))
{ echo "<table width='715' border='0' cellspacing='0' cellpadding='2' bgcolor='#Ffffff' style='table-layout:fixed' \n";
echo "<tr id='trtest'><a href='$website'>\n";
echo "<td width='169'><FONT size='-2' color='#FE4D1B'/>$naam</FONT></td>\n";
echo "<td width='150'><FONT size='-2' color='#666666'/>$adres</FONT></td>\n";
echo "<td width='55'><FONT size='-2' color='#666666'/>$postcode</FONT></td>\n";
echo "<td width='74'><FONT size='-2' color='#666666'/>$plaats</FONT></td>\n";
echo "<td width='90'><FONT size='-2' color='#666666'/>$telefoonnummer</FONT></td>\n";
echo "<td width='178'><FONT size='-2' color='#666666'/>$website</FONT></td>\n";
echo "</td>\n";
echo "</a></tr>\n";
}
?>
Nogmaals: gebruik code tags voor het weergeven van je code![/modedit]
Gewijzigd op 18/06/2010 10:47:40 door Joren de Wit
Code (php)
1
2
3
4
5
2
3
4
5
<tr>
<td><a href="google.nl">text</a></td>
<td><a href="google.nl">google.nl</a></td>
<td><a href="google.nl">vandaag</a></td>
</tr>
<td><a href="google.nl">text</a></td>
<td><a href="google.nl">google.nl</a></td>
<td><a href="google.nl">vandaag</a></td>
</tr>
Maar op deze manier word alleen de tekst klikbaar. Via javascript (en misschien is er nog een andere manier?) moet het mogelijk zijn om de hele table-row klikbaar te maken.
Oetzie geeft bij de reactie hierna een VEEL BETERE oplossing. Daarom raad ik sterk af om mijn JS-oplossing te volgen!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
document.getElementById('trtest').onclick = function (evt) {
alert('De tr is geklikt.'); // Hier moet uiteraard een doorverwijzing naar een andere pagina van gemaakt worden.
}
</script>
<table>
<tr id='trtest'>
<td>text</td>
<td>google.nl</td>
<td>vandaag</td>
</tr>
<tr id='trtest2'>
<td>text</td>
<td>google.nl</td>
<td>vandaag</td>
</tr>
</table>
document.getElementById('trtest').onclick = function (evt) {
alert('De tr is geklikt.'); // Hier moet uiteraard een doorverwijzing naar een andere pagina van gemaakt worden.
}
</script>
<table>
<tr id='trtest'>
<td>text</td>
<td>google.nl</td>
<td>vandaag</td>
</tr>
<tr id='trtest2'>
<td>text</td>
<td>google.nl</td>
<td>vandaag</td>
</tr>
</table>
Dit kost wel tijd om dit goed en werkend te maken. Als je zoiets zou willen gebruiken zijn er twee voorwaarden:
1). Je moet er vrede mee hebben dat mensen zonder JavaScript het niet zo kunnen aanklikken, waardoor deze waarschijnlijk niet verder komen. Voor dit 'type' gebruiker zou je een andere oplossing moeten verzinnen (misschien een combinatie van mijn bovenste twee stukjes code?)
2). In dit scriptje word maar één tr gelinkt. Om ze allemaal te linken moet je je even verdiepen in JavaScript, want dit raad ik je aan om te bouwen als je het wilt gebruiken, want het is niet aan te raden om 10+ rijen op deze manier te doen! Daar zijn mooiere scripts voor te ontwikkelen, maar dat kost tijd en dit is een hulp-site dus vandaar deze aanzet. Een kleine basis waaruit je kunt werken.
Nog één vraag+tip. Weet je dat je in jouw while loop telkens nieuwe tabellen maakt, welke je niet afsluit? Binnen je while loop staat het maken van een '<table>' en daarna word de 'tr' gezet. Dus je krijgt 10 table-tags als je 10 rijen wilt.
Hier kun je meer leren over HTML en leer daarna meteen door met xHTML.
Op die websites zijn veel handige tutorials te vinden. Ik heb me hiermee Javascript aangeleerd. Beetje proberen, beetje opzoeken. Maar ik heb het redelijk onder de knie. Hoewel ik nog wel meer dan eens naar browser-compatibiliteit moet kijken.
Gewijzigd op 18/06/2010 12:21:13 door Mark L