text onder afbeelding
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
image.off {
width: 150px;
height: 100px;
}
image.on {
width: 448px;
height: 336px;
}
</style>
</head>
<body>
<TD align="center">
<image class="off" onmouseover="this.className='on'" img src="http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg" onmouseout="this.className='off'" img src="http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg"><p>De spanning<br> is weer om te snijden</p>
</div>
</TD>
image.off {
width: 150px;
height: 100px;
}
image.on {
width: 448px;
height: 336px;
}
</style>
</head>
<body>
<TD align="center">
<image class="off" onmouseover="this.className='on'" img src="http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg" onmouseout="this.className='off'" img src="http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg"><p>De spanning<br> is weer om te snijden</p>
</div>
</TD>
Gewijzigd op 01/01/1970 01:00:00 door Niek Kasius
Gesponsorde koppelingen:
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
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
image.off {
width: 150px;
height: 100px;
font-size: 0pt;
}
image.on {
width: 448px;
height: 336px;
font-size: 12pt;
}
image.off {
width: 150px;
height: 100px;
text-indent: -9999px;
}
image.on {
width: 448px;
height: 336px;
text-indent: 0;
}
image.off {
width: 150px;
height: 100px;
color: #fff;
}
image.on {
width: 448px;
height: 336px;
color: #000;
}
En waarom werk je niet gewoon met :hover?
Dat kan veel sneller en dan is het puur CSS.
En het werkt ook als Javascript uit staat.
En het werkt altijd. Zet alles in een <a> en het werkt ook nog eens in IE6.
In het laatste voorbeeld wellicht de kleuren aanpassen.
De text is er dan wel, maar zie je niet.
width: 150px;
height: 100px;
font-size: 0pt;
}
image.on {
width: 448px;
height: 336px;
font-size: 12pt;
}
image.off {
width: 150px;
height: 100px;
text-indent: -9999px;
}
image.on {
width: 448px;
height: 336px;
text-indent: 0;
}
image.off {
width: 150px;
height: 100px;
color: #fff;
}
image.on {
width: 448px;
height: 336px;
color: #000;
}
En waarom werk je niet gewoon met :hover?
Dat kan veel sneller en dan is het puur CSS.
En het werkt ook als Javascript uit staat.
En het werkt altijd. Zet alles in een <a> en het werkt ook nog eens in IE6.
In het laatste voorbeeld wellicht de kleuren aanpassen.
De text is er dan wel, maar zie je niet.
Gewijzigd op 01/01/1970 01:00:00 door Eddy Erkelens
Maar waarom die text-indent? die verschuift toch alleen maar de foto heb ik "door te proberen" gemerkt. maarja alweer iets geleerd.
want het verschuift de de andere foto's, nu is dat op zich niet erg,
alleen bij de onderste drie rijen foto's moet je gaan scrollen
omdat je ze anders niet hellemaal met text te zien krijgt.
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
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
<style type="text/css">
#swap #logo {
display: block;
border: 1;
border-color:#0000A0;
}
#swap a #logohover {
display: none;
}
#swap a:hover #logo {
display: none;
border-color:#0000A0;
}
#swap a:hover #logohover {
display: block;
}
#p a:hover #logohover {
display: text;
}
</style>
</head>
<body>
<div id=\"content\">
<table cellpadding=\"5\" cellspacing=\"15\" width=\"70%\" border=\"0\" bordercolor=\"#0000A0\">
<tr>
<td>
<div id=\"swap\">
<a href=\"#\">
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg\" width=\"150px\" height=\"100px\" border=\"1\" id=\"logo\" alt=\"dc hofland
clubcampioenschap 2008\" />
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg\" width=\"448px\" height=\"335px\" border=\"1\" id=\"logohover\" alt=\"dc
hofland clubcampioenschap 2008\" /><p id=\"logohover\"><font color=\"#0000A0\"><b>De spanning<br>is ook dit jaar weer te snijden</font></p>
</a>
</div>
</td>
<td>
<div id=\"swap\">
<a href=\"#\">
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (2).jpg\" width=\"150px\" height=\"100px\" border=\"0\" id=\"logo\" alt=\"dc hofland
clubcampioenschap 2008\" />
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (2).jpg\" width=\"448px\" height=\"335px\" border=\"0\" id=\"logohover\" alt=\"dc
hofland clubcampioenschap 2008\" /><p id=\"logohover\"><font color=\"#0000A0\"><b>Frank denkt   \"piep, knars, kraak\"<br>ships! moet ik nog zoveel</font></p>
</a>
</div>
</td>
#swap #logo {
display: block;
border: 1;
border-color:#0000A0;
}
#swap a #logohover {
display: none;
}
#swap a:hover #logo {
display: none;
border-color:#0000A0;
}
#swap a:hover #logohover {
display: block;
}
#p a:hover #logohover {
display: text;
}
</style>
</head>
<body>
<div id=\"content\">
<table cellpadding=\"5\" cellspacing=\"15\" width=\"70%\" border=\"0\" bordercolor=\"#0000A0\">
<tr>
<td>
<div id=\"swap\">
<a href=\"#\">
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg\" width=\"150px\" height=\"100px\" border=\"1\" id=\"logo\" alt=\"dc hofland
clubcampioenschap 2008\" />
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg\" width=\"448px\" height=\"335px\" border=\"1\" id=\"logohover\" alt=\"dc
hofland clubcampioenschap 2008\" /><p id=\"logohover\"><font color=\"#0000A0\"><b>De spanning<br>is ook dit jaar weer te snijden</font></p>
</a>
</div>
</td>
<td>
<div id=\"swap\">
<a href=\"#\">
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (2).jpg\" width=\"150px\" height=\"100px\" border=\"0\" id=\"logo\" alt=\"dc hofland
clubcampioenschap 2008\" />
<img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (2).jpg\" width=\"448px\" height=\"335px\" border=\"0\" id=\"logohover\" alt=\"dc
hofland clubcampioenschap 2008\" /><p id=\"logohover\"><font color=\"#0000A0\"><b>Frank denkt   \"piep, knars, kraak\"<br>ships! moet ik nog zoveel</font></p>
</a>
</div>
</td>
Gewijzigd op 01/01/1970 01:00:00 door Niek Kasius
Code (php)
1
<?php en ?>
knop om dit te doen.SanThe.
