VNC stopt er mee :(
Klikbare foto?
De meeste kennen wel de lightbox fotoviewer,
daar kan je door middel van op de ene helft van de foto te klikken, naar de volgende foto gaan.
Nu wil ik ook zo iets, maar dan dat je gewoon een foto op een pagina hebt, en dan je dan op de ene helft van de foto klikt, en dat je dan naar de volgende foto ( pagina ) gaat.
Weet iemand hoe ik het zo kan maken dat je dus op de en helft van de foto klikt, en dat je dan naar de volgende foto gaat, en dan andere helft, naar de vorige foto. En ook hoe je dan als je op zo'n helft met je muis gaat staan, dan je dan een plaatje krijgt op de foto om naar de volgende te gaan.
Mvg. Arwin
wouter schreef op 01.12.2007 14:52:
dus next - prev
Ja, maar dan op de foto zelf.
http://www.w3schools.com/tags/tag_map.asp
Gewijzigd op 01/01/1970 01:00:00 door Vincent
Ik heb nu dit, maar ik heb al een beetje zitten prutsen met mouseovers, maar ik het wil maar niet lukken.
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
<img src ="IMG_3044.jpg"
width="667" height="1000"
alt="Planets"
usemap ="#prevnext" />
<map id ="prevnext"
name="prevnext">
<area shape ="rect" coords ="0,0,333,1000"
href ="prev.htm" target ="_blank"
alt="Prev" mouseover />
<area shape ="rect" coords ="667,1000,333"
href ="next.htm" target ="_blank"
alt="Next" />
</map>
width="667" height="1000"
alt="Planets"
usemap ="#prevnext" />
<map id ="prevnext"
name="prevnext">
<area shape ="rect" coords ="0,0,333,1000"
href ="prev.htm" target ="_blank"
alt="Prev" mouseover />
<area shape ="rect" coords ="667,1000,333"
href ="next.htm" target ="_blank"
alt="Next" />
</map>
Weet iemand hoe ik ervoor kan zorgen dat hij als je op de ene helft klikt dat hij dan een plaatje laat zien, net zoals bij de lightbox fotoviewer?
robin schreef op 01.12.2007 16:07:
Zou ook nog kunnen, er zijn genoeg mogelijkheden. Zelf zou ik voor php5 gaan of voor div's.
PHP heeft hier geen ruk mee te maken. De enige rol die PHP heeft in dit topic is de foto's laden uit een map/database. Niets meer.
Tommy schreef op 02.12.2007 12:06:
Waarom kijk je niet in de code van lightbox hoe het daar is gedaan?
Daar werken ze vooral met javascript, en ik heb de ballen verstand van javascript :), dus is de code te gaan kijken zal weinig nut hebben. Daar werken ze trouwens ook niet met map coords.
@Jurgen:
mijzelf@hier_ergens_boven:
waarom php5? kan toch gewoon met divs? of begrijp ik het nou verkeerd?
zei ik ook al...
Gewijzigd op 01/01/1970 01:00:00 door Onbekend Onbekend
Edit:
typo
Gewijzigd op 01/01/1970 01:00:00 door Arwin vdv
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
dus
Code (php)
1
2
3
4
2
3
4
<div class="image" style=" background-image: url('images/jouimage.jpg');">
<div class="prev" onmouseover="PrevImg()"></div>
<div class="next" onmouseover="NextImg()"></div>
</div>
<div class="prev" onmouseover="PrevImg()"></div>
<div class="next" onmouseover="NextImg()"></div>
</div>
met een css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
.image {
width: 200px;
}
.prev {
float: left;
width: 200px;
}
.next {
margin-left: 100px;
}
width: 200px;
}
.prev {
float: left;
width: 200px;
}
.next {
margin-left: 100px;
}
Nu een js functie klussen die dus regelt naar welke pagina de links moeten gaan...
edit:
Je kan natuurlijk een plaatje (vorige, volgende) als background instellen in .prev en .next dit geheel naar je eigen creativiteit!
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
<img id="lightboxImage" style="opacity: 0.999999;" src="images/image-3.jpg"/>
<div id="hoverNav" style="">
<a id="prevLink" href="#" style="display: none; height: 338px;"/>
<a id="nextLink" href="#" style="height: 338px;"/>
</div>
Ik heb het nu bijna, alleen laat hij nu steeds de next knop zien, en als je er dan op komt, verdwijnt hij, maar omdat ik nogal en n00b ben op het gebied javascript, lukt mij het niet om het om te draaien.
Dit is nu de code:
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.image {
width: 675px;
height: 450px;
}
.prev {
float: left;
width: 337px;
height: 450px;
text-align: left;
}
.next {
float: left;
margin-top: 0px;
width: 337px;
height: 450px;
text-align: right;
}
</style>
<script type="text/javascript">
function displayprev(){
var row = document.getElementById("captionprev");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
function displaynext(){
var row = document.getElementById("captionnext");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>
</head>
<body>
<div class="image" style=" background-image: url('http://www.dnlfotografie.nl/bigresize.php?image=ALBUMS/001LANDSCHAPPEN/001Arkemheense%20Polder%2005-19-2007.jpg');">
<div class="prev" onmouseover="displayprev()" onMouseOut="displayprev()"><img src="http://www.dnlfotografie.nl/test/prev.gif" id="captionprev" width="45" height="45" alt="" border="0"></div>
<div class="next" onmouseover="displaynext()" onMouseOut="displaynext()"><img src="http://www.dnlfotografie.nl/test/next.gif" id="captionnext" width="45" height="45" alt="" border="0"></div>
</div>
</body>
</html>
<html>
<head>
<title>Untitled</title>
<style>
.image {
width: 675px;
height: 450px;
}
.prev {
float: left;
width: 337px;
height: 450px;
text-align: left;
}
.next {
float: left;
margin-top: 0px;
width: 337px;
height: 450px;
text-align: right;
}
</style>
<script type="text/javascript">
function displayprev(){
var row = document.getElementById("captionprev");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
function displaynext(){
var row = document.getElementById("captionnext");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>
</head>
<body>
<div class="image" style=" background-image: url('http://www.dnlfotografie.nl/bigresize.php?image=ALBUMS/001LANDSCHAPPEN/001Arkemheense%20Polder%2005-19-2007.jpg');">
<div class="prev" onmouseover="displayprev()" onMouseOut="displayprev()"><img src="http://www.dnlfotografie.nl/test/prev.gif" id="captionprev" width="45" height="45" alt="" border="0"></div>
<div class="next" onmouseover="displaynext()" onMouseOut="displaynext()"><img src="http://www.dnlfotografie.nl/test/next.gif" id="captionnext" width="45" height="45" alt="" border="0"></div>
</div>
</body>
</html>
Hier staat hij
Weet iemand hoe ik het dus kan omdraaien?, dat hij eerst de pijltjes niet laat zien, en als je er dan op komt, dan wel?
De pijltjes spelen met je voeten
Kan je niet met Mouseover , of met css A:hover werken ?
Gewijzigd op 01/01/1970 01:00:00 door Vincent
kan je het daar niet mee?