Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Fade slideshow in tabel (Opgelost)

Lyrix - 19/05/2011 11:07
Nieuw 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

Realtec - 19/05/2011 12:59
HTML interesse		Als je divs gebruikt is dat makkelijk mogelijk. Tables zijn zoooooo 2001..
Bedankt door: Lyrix

Lyrix - 19/05/2011 13:15
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?

Realtec - 19/05/2011 13:19 (laatste wijziging 19/05/2011 13:20)
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

Lyrix - 19/05/2011 14:20 (laatste wijziging 19/05/2011 14:21)
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.

Realtec - 19/05/2011 16:07
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

Lyrix - 20/05/2011 07:49 (laatste wijziging 20/05/2011 08:47)

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.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<head>
<title></title>
<script  type="text/javascript">

var ImgAry=['headerpic1.jpg','headerpic2.jpg','headerpic3.jpg'];
// preload the images
 for (var img,z0=0;z0<ImgAry.length;z0++){
  img=ImgAry[z0];
  ImgAry[z0]=new Image();
  ImgAry[z0].src=img;
 }

var cnt=0,to=null;

function Rotate(){
 cnt=++cnt%ImgAry.length;
 document.getElementById('t1').style.backgroundImage='url('+ImgAry[cnt].src+')';
 to=setTimeout(function(){ Rotate(); },2000);
}


</script>
</head>

<body onload="Rotate();">
<table id="t1" width="528" border="2" cellspacing="4" cellpadding="0" align="center" background="headerpic1.jpg" border="0" height="362">
<tr>
<td>text</td>
</tr>
</table>
</body>

<head>
<title></title>
<script  type="text/javascript">
 
var ImgAry=['headerpic1.jpg','headerpic2.jpg','headerpic3.jpg'];
// preload the images
 for (var img,z0=0;z0<ImgAry.length;z0++){
  img=ImgAry[z0];
  ImgAry[z0]=new Image();
  ImgAry[z0].src=img;
 }
 
var cnt=0,to=null;
 
function Rotate(){
 cnt=++cnt%ImgAry.length;
 document.getElementById('t1').style.backgroundImage='url('+ImgAry[cnt].src+')';
 to=setTimeout(function(){ Rotate(); },2000);
}
 
 
</script>
</head>
 
<body onload="Rotate();">
<table id="t1" width="528" border="2" cellspacing="4" cellpadding="0" align="center" background="headerpic1.jpg" border="0" height="362">
<tr>
<td>text</td>
</tr>
</table>
</body>

lolll - 20/05/2011 16:18 (laatste wijziging 20/05/2011 16:20)

Lid

Pas je html en css ongeveer als volgt aan:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<body onload="Rotate()">
<div id="t1">
<div id="text">text</div>
</div>

<body onload="Rotate()">
<div id="t1">
<div id="text">text</div>
</div>

css code - Bekijk de code zonder highlighting - Klap code in

                #t1{
position:relative;
width:528px;
margin:0 auto;
background:url('headerpic1.jpg');
// Eventueel nog andere properties instellen.
}
#text{
position:absolute;
padding:5px;
top:0;
left:0;
background:#996;
color:#FFF;
// Eventueel nog andere properties instellen.
}

            
#t1{
position:relative;
width:528px;
margin:0 auto;
background:url('headerpic1.jpg');
// Eventueel nog andere properties instellen.
}
#text{
position:absolute;
padding:5px;
top:0;
left:0;
background:#996;
color:#FFF;
// Eventueel nog andere properties instellen.
}
 

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

Lyrix - 01/06/2011 12:53
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.

Actiefste leden van de maand

Actieve forumberichten