popup met tekst en logo

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

J C

J C

26/05/2013 13:54:14
Quote Anchor link
Ik heb een stichting waar ik een tijdelijke website voor aan het maken ben.
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
 
PHP hulp

PHP hulp

04/02/2023 06:58:03
 
Robbert B

Robbert B

04/06/2013 08:51:25
Quote Anchor link
Denk dat deze vraag meer thuis hoort bij Webdesign & development -> Javascript

Verder staat dat rode vak erdoorheen waardoor het oogt al een rommeltje.
 
Bas IJzelendoorn

Bas IJzelendoorn

04/06/2013 12:23:07
Quote Anchor link
Ik heb de titel van het topic veranderd en hem naar de juiste categorie verplaatst.[/modedit]

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.
 
Kris Peeters

Kris Peeters

04/06/2013 13:36:13
Quote Anchor link
Ik heb iets uitgewerkt.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<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">info@mediascape.nl</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">info@podiumverhuurhaaglanden.nl</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">info@mediascape.nl</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">rob@knuist.com</div>
      </div>
    </div>
   </div>
  
  <div id="footer-tekst">
    footer ...
  </div>
</div>      
 
J C

J C

13/06/2013 02:43:36
Quote Anchor link
Hallo,

Dank je wel, ik ga dit zeker gebruiken, sorry voor de late reactie, er waren wat problemen met de layout.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.