login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Fade slideshow in tabel (Opgelost)

Offline Lyrix - 19/05/2011 11:07
Avatar van LyrixNieuw lid Is het mogelijk een slideshow te maken zoalsik op deze gebruik

http://www.lyrix.nl/mampaey/header.php

maar dan als achtergrond van een tabel, zodat je daar nog texten over heen kan zetten?

8 antwoorden

Gesponsorde links
Offline Realtec - 19/05/2011 12:59
Avatar van Realtec HTML interesse Als je divs gebruikt is dat makkelijk mogelijk.
Tables zijn zoooooo 2001..
Bedankt door: Lyrix
Offline Lyrix - 19/05/2011 13:15
Avatar van Lyrix Nieuw lid Realtec,

Ik heb het met divs gedaan alleen dan wordt de text onder het plaatje geplaatst en is niet zichtbaar.
Wat is een betere oplossing volgens jou?

Wat ik wil bereiken is een ruimte van bv 600 x 600 pixels.
Die ruimte wordt gevuld met een foto die om de 10 seconden moet faden naar een andere foto.
Over de foto's moet een text komen met een eigen achtergrond.
Is hier een betere oplossing voor dan dit te doen met tabbellen?
Offline Realtec - 19/05/2011 13:19 (laatste wijziging 19/05/2011 13:20)
Avatar van Realtec HTML interesse Dat is geen excuus om geen divs te gebruiken.

Wat je wilt is mogelijk met divs, probeer het eerst te maken zonder de "fading background" en dan kun je met Jquery makkelijk de achtergrond van de onderliggende div om de 10 sec veranderen.
Bedankt door: Lyrix
Offline Lyrix - 19/05/2011 14:20 (laatste wijziging 19/05/2011 14:21)
Avatar van Lyrix Nieuw lid Als ik dit doe is de tekst niet zichtbaar.

<div align="center" id="fadeshow1" style="height: 200px; width: 400px; border: 1px solid black;"><td>Test Tekst</td>
</div>

Ik moet eerlijk bekennen dat het gebruiken van divs ipv tabellen nog beetje onbekend terrein is voor mij.
 
Offline Realtec - 19/05/2011 16:07
Avatar van Realtec HTML interesse Je kan geen <td> gebruiken in een <div> element.
<td>, <th> en <tr> kun je alleen gebruiken binnen <table>

Ik zou ook geen inline css gaan gebruiken want dan is het heel lastig om achteraf wat te gaan veranderen.

Als je <td>Test</td> gaat veranderen in <div>Test</div> dan zul je je text wel gaan zien.

Overigen zal ik die align="center" niet gebruiken.
Doe dan in je style property margin: 0px auto;
Bedankt door: Lyrix
Offline Lyrix - 20/05/2011 07:49 (laatste wijziging 20/05/2011 08:47)
Avatar van Lyrix Nieuw lid Realtec, ik heb de regel aangepast zoals jij omschrijft maar de text verdwijnt zodra de slide show start.

Ik heb inmiddels wel een beetje zitten puzzelen.
Heb dit nu gemaakt.
Alleen hoe krijg ik dit nu fadend.

  1. <script type="text/javascript">
  2.  
  3. var ImgAry=['headerpic1.jpg','headerpic2.jpg','headerpic3.jpg'];
  4. // preload the images
  5. for (var img,z0=0;z0<ImgAry.length;z0++){
  6. img=ImgAry[z0];
  7. ImgAry[z0]=new Image();
  8. ImgAry[z0].src=img;
  9. }
  10.  
  11. var cnt=0,to=null;
  12.  
  13. function Rotate(){
  14. cnt=++cnt%ImgAry.length;
  15. document.getElementById('t1').style.backgroundImage='url('+ImgAry[cnt].src+')';
  16. to=setTimeout(function(){ Rotate(); },2000);
  17. }
  18.  
  19.  
  20. </head>
  21.  
  22. <body onload="Rotate();">
  23. <table id="t1" width="528" border="2" cellspacing="4" cellpadding="0" align="center" background="headerpic1.jpg" border="0" height="362">
  24. <tr>
  25. <td>text</td>
  26. </tr>
  27. </body>
Offline lolll - 20/05/2011 16:18 (laatste wijziging 20/05/2011 16:20)
Avatar van lolll Lid Pas je html en css ongeveer als volgt aan:
  1. <body onload="Rotate()">
  2. <div id="t1">
  3. <div id="text">text</div>
  4. </div>

  1. #t1{
  2. position:relative;
  3. width:528px;
  4. margin:0 auto;
  5. background:url('headerpic1.jpg');
  6. // Eventueel nog andere properties instellen.
  7. }
  8. #text{
  9. position:absolute;
  10. padding:5px;
  11. top:0;
  12. left:0;
  13. background:#996;
  14. color:#FFF;
  15. // Eventueel nog andere properties instellen.
  16. }


Je js-code moet je dan nog wel wat aanpassen, zodat hij de goede background vervangt. (edit: alhoewel ik nu zie dat het mss toch zonder aanpassingen ook lukt.)

Maar ik zou toch wat meer css gaan leren, voordat je zo'n dingen wilt bereiken en anderen het werk moet laten doen.

Lolll
Bedankt door: Lyrix
Offline Lyrix - 01/06/2011 12:53
Avatar van Lyrix Nieuw lid Lolll, inmiddels heb ik je raad opgevolgd.

Zie hier het resultaat.

www.fenbshow.nl/test

Is dus opgelost
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.328s