Hallo, Ik zit met een vraagje.
Ik wil graag voor mijn (aankomende) website een CSS gallery gebruiken met een rollover functie.
Ik zit nu met het probleem dat ik geen afbeeldingen bij de thumbnails krijg. De groot formaat afbeeldingen werken wel.
Mijn vraag is nu hoe moet ik de thumbnail afbeeldingen vernoemen? IMG SCR= of zoiets?
Er staat nu {background:url(FOTOBESTAND KLEIN);
Maar als ik op de plaats van "fotobestand klein" de volledige naam(map en bestandnaam) van de foto plaats doet hij het niet.
dit is de XHTML code:
Oh ja, ik werk met frontpage.
Ik hoop dat iemand mij kan helpen.
gr. Deimos-Phobos
Ik wil graag voor mijn (aankomende) website een CSS gallery gebruiken met een rollover functie.
Ik zit nu met het probleem dat ik geen afbeeldingen bij de thumbnails krijg. De groot formaat afbeeldingen werken wel.
Mijn vraag is nu hoe moet ik de thumbnail afbeeldingen vernoemen? IMG SCR= of zoiets?
Er staat nu {background:url(FOTOBESTAND KLEIN);
Maar als ik op de plaats van "fotobestand klein" de volledige naam(map en bestandnaam) van de foto plaats doet hij het niet.
dit is de XHTML code:
code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Foto gallery</title>
<meta name="Author" content="??" />
<style type="text/css">
body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
#container {position:relative; width:770px; height:396px; margin:20px auto 0 auto; background:#fff url(../images/back.jpg) 75px 10px no-repeat; border:1px solid #aaa;}
#container ul {width:198px; height:386px; padding:0; margin:5px; list-style-type:none; float:right;}
#container li {float:left;}
#container a.gallery, #container a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; margin:1px 2px 1px 2px; text-align:left; cursor:default;}
#container a.slidea {background:url(FOTOBESTAND KLEIN); height:93px; width:60px;}
#container a.slideb {background:url(FOTOBESTAND KLEIN); height:93px; width:60px;}
#container a.slidec {background:url(FOTOBESTAND KLEIN); height:93px; width:60px;}
#container a.gallery span {position:absolute; width:1px; height:1px; top:5px; left:5px; background:#fff; overflow:hidden;}
#container a.gallery:hover {border:1px solid #fff;}
#container a.gallery:hover img {border:1px solid #fff; float:left; margin-right:5px;}
#container a.slideb:hover img, #container a.slidei:hover img {float:right;}
#container a.gallery:hover span {position:absolute; width:372px; height:372px; top:10px; left:75px; color:#000; background:#fff;}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a class="gallery slidea" href="#nogo"><span><img src="FOTOBESTAND1" alt="naam" title="naam" /><br />naam<br />Begeleidende test</span></a></li>
<li><a class="gallery slideb" href="#nogo"><span><img src="FOTOBESTAND2" alt="naam" title="naam" /><br />naam<br />Begeleidende test</span></a></li>
<li><a class="gallery slidec" href="#nogo"><span><img src="FOTOBEATAND3" alt="naam" title="naam" /><br />naam<br />Begeleidende test</span></a></li>
</ul>
</div>
</body>
</html> |
Oh ja, ik werk met frontpage.
Ik hoop dat iemand mij kan helpen.
gr. Deimos-Phobos
)