popup met tekst en logo
Nu zit ik te denken om het zo te maken dat de logo's van de sponsoren onderaan komen met een stukje tekst.
Elke keer als de website bezocht wordt moet er een ander komen (ga ik doen met database en php)
Maar wat ik ook graag zou willen is dat wanneer je op de kleine plaatjes eronder klikt dat je dan het bij behorende logo met tekst krijgt te zien.
Een beetje moeilijk verhaal dus misschien dat het duidelijker wordt met dit paint plaatje.
Nu vraag ik me af welk soort script ik hiervoor zou moeten hebben, zodat ik op zoek kan gaan naar iemand die dit kan maken.
Zelf denk ik aan java-script.
Ik heb inmiddels de basis van de website af.
http://www.festivalstegendierenleed.nl/
Nog even voor de duidelijkheid, het gaat hier om een tijdelijk uiterlijk totdat het marketing bureau klaar is met de nieuwe layout.
Gewijzigd op 04/06/2013 12:21:30 door Bas IJzelendoorn
Verder staat dat rode vak erdoorheen waardoor het oogt al een rommeltje.
Ik denk dat je het beste even naar http://jqueryui.com/ kan kijken, en dan specifiek dialog. Daarnaast zou je voor de logo's zelf even kunnen kijken naar een jquery slider.
Het idee: je stuurt binnen die thumbnails alle informatie; die blijft onzichtbaar met css.
Als de gebruiker op een thumb klikt, wordt die onzichtbare informatie gekopiëerd op het grote rechthoek.
Deze code kan je stand alone testen
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
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
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script>
$(document).ready(function() {
// elementen cachen
var sponsoroverzicht = $('#sponsoroverzicht');
var thumbs = $('#sponsoroverzicht .thumb');
var thumbsLinks = $('#sponsoroverzicht .thumb a');
var logo = $('#sponsorvak-logo img'); //
var titel = $('#sponsorvak-titel');
var tekst = $('#sponsorvak-tekst');
var internet = $('#sponsorvak-internet a');
var email = $('#sponsorvak-email');
// events
thumbsLinks.on('click', function(e) {
e.preventDefault(); // dit houdt tegen dat de gebruiker op een nieuwe pagina komt
// merk op: $(this) is de <a></a> waar de gebruiker op klikte
var nieuweTitel = $(this).siblings('.titel'); // dit zoekt dus een broer/zus met class="titel" van de <a></a> waar de gebruiker op klikte
var nieuweLink = $(this).attr('href');
logo.attr('src', $(this).find('img').attr('src')); //logo vervangen
logo.attr('alt', nieuweTitel); // logo alt vervangen
titel.html(nieuweTitel);
tekst.html($(this).siblings('.tekst').html());
internet.html(nieuweLink);
internet.attr('alt', nieuweTitel); // hyper link alt vervangen
internet.attr('title', nieuweTitel); // hyper link title vervangen
internet.attr('href', nieuweLink); // hyper link href vervangen
email.html($(this).siblings('.email').html());
});
});
</script>
<style>
#sponsoroverzicht {
border: 1px solid grey;
}
#sponsoroverzicht .thumb {
display: inline;
}
#sponsoroverzicht .titel,
#sponsoroverzicht .tekst,
#sponsoroverzicht .email
{
display: none;
}
</style>
<div id="footer">
<div id="sponsorcontainer">
<div id="sponsorvak">
<div id="sponsorvak-logo">
<img src="http://www.festivalstegendierenleed.nl/logos/mediascape.jpg" height="150" width="150" alt="Mediascape">
</div>
<div id="sponsorvak-omschrijving">
<div id="sponsorvak-titel">Mediascape</div>
<div id="sponsorvak-tekst">
Als full-service grafisch ontwerpbureau kunt u ...
</div>
<div id="sponsorvak-internet">
<a href="http://www.mediascape.nl" rel="external" title="Mediascape">www.mediascape.nl</a> | <span id="sponsorvak-email">[email protected]</span>
</div>
</div>
</div>
<div id="sponsoroverzicht">
<div class="thumb">
<a class="internet" href="http://www.podiumverhuurhaaglanden.nl"><img class="logo" src="http://www.festivalstegendierenleed.nl/logos/podiumverhuurhaaglanden.jpg" height="80" width="80" alt="Podium Verhuur Haaglanden"></a>
<div class="titel">Podium Verhuur Haaglanden</div>
<div class="tekst">Podium Verhuur Haaglanden is het meest toonaangevende bedrijf in de regio ...</div>
<div class="email">[email protected]</div>
</div>
<div class="thumb">
<a class="internet" href="http://www.mediascape.nl"><img class="logo" src="http://www.festivalstegendierenleed.nl/logos/mediascape.jpg" height="80" width="80" alt="Mediascape"></a>
<div class="titel">Mediascape</div>
<div class="tekst">Als full-service grafisch ontwerpbureau kunt u ...</div>
<div class="email">[email protected]</div>
</div>
<div class="thumb">
<a class="internet" href="http://www.akrk.nl/"><img class="logo" src="http://www.festivalstegendierenleed.nl/logos/akrk.jpg" height="80" width="80" alt="Administratiekantoor Rob Knuist"></a>
<div class="titel">Administratiekantoor Rob Knuist</div>
<div class="tekst">Administratiekantoor Rob Knuist is een administratiekantoor zonder poespas. ...</div>
<div class="email">[email protected]</div>
</div>
</div>
</div>
<div id="footer-tekst">
footer ...
</div>
</div>
<script>
$(document).ready(function() {
// elementen cachen
var sponsoroverzicht = $('#sponsoroverzicht');
var thumbs = $('#sponsoroverzicht .thumb');
var thumbsLinks = $('#sponsoroverzicht .thumb a');
var logo = $('#sponsorvak-logo img'); //
var titel = $('#sponsorvak-titel');
var tekst = $('#sponsorvak-tekst');
var internet = $('#sponsorvak-internet a');
var email = $('#sponsorvak-email');
// events
thumbsLinks.on('click', function(e) {
e.preventDefault(); // dit houdt tegen dat de gebruiker op een nieuwe pagina komt
// merk op: $(this) is de <a></a> waar de gebruiker op klikte
var nieuweTitel = $(this).siblings('.titel'); // dit zoekt dus een broer/zus met class="titel" van de <a></a> waar de gebruiker op klikte
var nieuweLink = $(this).attr('href');
logo.attr('src', $(this).find('img').attr('src')); //logo vervangen
logo.attr('alt', nieuweTitel); // logo alt vervangen
titel.html(nieuweTitel);
tekst.html($(this).siblings('.tekst').html());
internet.html(nieuweLink);
internet.attr('alt', nieuweTitel); // hyper link alt vervangen
internet.attr('title', nieuweTitel); // hyper link title vervangen
internet.attr('href', nieuweLink); // hyper link href vervangen
email.html($(this).siblings('.email').html());
});
});
</script>
<style>
#sponsoroverzicht {
border: 1px solid grey;
}
#sponsoroverzicht .thumb {
display: inline;
}
#sponsoroverzicht .titel,
#sponsoroverzicht .tekst,
#sponsoroverzicht .email
{
display: none;
}
</style>
<div id="footer">
<div id="sponsorcontainer">
<div id="sponsorvak">
<div id="sponsorvak-logo">
<img src="http://www.festivalstegendierenleed.nl/logos/mediascape.jpg" height="150" width="150" alt="Mediascape">
</div>
<div id="sponsorvak-omschrijving">
<div id="sponsorvak-titel">Mediascape</div>
<div id="sponsorvak-tekst">
Als full-service grafisch ontwerpbureau kunt u ...
</div>
<div id="sponsorvak-internet">
<a href="http://www.mediascape.nl" rel="external" title="Mediascape">www.mediascape.nl</a> | <span id="sponsorvak-email">[email protected]</span>
</div>
</div>
</div>
<div id="sponsoroverzicht">
<div class="thumb">
<a class="internet" href="http://www.podiumverhuurhaaglanden.nl"><img class="logo" src="http://www.festivalstegendierenleed.nl/logos/podiumverhuurhaaglanden.jpg" height="80" width="80" alt="Podium Verhuur Haaglanden"></a>
<div class="titel">Podium Verhuur Haaglanden</div>
<div class="tekst">Podium Verhuur Haaglanden is het meest toonaangevende bedrijf in de regio ...</div>
<div class="email">[email protected]</div>
</div>
<div class="thumb">
<a class="internet" href="http://www.mediascape.nl"><img class="logo" src="http://www.festivalstegendierenleed.nl/logos/mediascape.jpg" height="80" width="80" alt="Mediascape"></a>
<div class="titel">Mediascape</div>
<div class="tekst">Als full-service grafisch ontwerpbureau kunt u ...</div>
<div class="email">[email protected]</div>
</div>
<div class="thumb">
<a class="internet" href="http://www.akrk.nl/"><img class="logo" src="http://www.festivalstegendierenleed.nl/logos/akrk.jpg" height="80" width="80" alt="Administratiekantoor Rob Knuist"></a>
<div class="titel">Administratiekantoor Rob Knuist</div>
<div class="tekst">Administratiekantoor Rob Knuist is een administratiekantoor zonder poespas. ...</div>
<div class="email">[email protected]</div>
</div>
</div>
</div>
<div id="footer-tekst">
footer ...
</div>
</div>
Dank je wel, ik ga dit zeker gebruiken, sorry voor de late reactie, er waren wat problemen met de layout.