Keskustelu: Nettisivujen teko: Vaihtuva td/div taustakuva

Teemu2 [28.03.2013 15:16:33]

Terve,

mun pitäisi saada jQueryllä, css:llä tai muulla toteutettua seuraava juttu:

Taulukon td:n tai vaihtoehtoisesti divin taustakuvan pitäisi vaihtua muutaman sekuntin välein fade -efektillä. Kierrossa on mukana n. 6 kuvaa.

Vaikean tilanteesta tekee se, että vaihtuvan solun/divin taustan edessä pitäisi olla toinen kuva. Olen kohta kolme päivää koittanut selvittää ja luulen ettei oma viisauteni riitä tämän toteuttamiseen.

t0ll0 [28.03.2013 16:08:36]

Nopeasti tehty, mutta saisitkohan tästä idean. Kuvia käytössä kuusi kappaletta ja ne on nimetty kuva1.jpg, kuva2.jpg jne..

<!DOCTYPE html>
<html>
<head>
 <title>Taustakuva vaihtuu</title>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
 <style type="text/css">
 .holderi {
	width: 300px;
	height: 400px;
	position: relative;
 }

 .vaihtuvaTausta, .muuTeksti {
	width: 100%;
	height: 100%;
 }

 .vaihtuvaTausta {
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
 }
 </style>
 <script type="text/javascript">

 function vaihdaKuva(imgID){
  imgID++;
  if(imgID > 6){ imgID = 1; }

  $('.vaihtuvaTausta').fadeOut('slow', function(){
    $(this).css('background-image', 'url("kuva'+imgID+'.jpg")');
  }).fadeIn('slow');

  setTimeout(function(){ vaihdaKuva(imgID); }, 2000);
 }

 $(document).ready(function(){
  vaihdaKuva(0);
 });


 </script>
</head>
<body>

 <div class="holderi">
  <div class="vaihtuvaTausta"></div>
  <div class="muuTeksti">Tämän taustakuva vaihtuu</div>
 </div>

</body>
</html>

edit, halunnet myös ladata taustakuvat valmiiksi joten googlesta esim. "javascript preload image" hakusanalla luulisi löytyvän ohjeita!

Teemu2 [29.03.2013 15:47:51]

Voi kiitos! Tämä lähti toimimaan heti hienosti.

Yhtä juttua en kuitenkaan vieläkään saanut toimimaan. Taidan olla vähän tunari.

Pitäisi nimittäin saada sijoittumaan etualalla olevan divin sisältö vielä aivan alas.

t0ll0 [29.03.2013 18:01:58]

vertical-align on tuettuna esimerkiksi tablessa, joten antamalla laittamani esimerkin "holderi"-elementille määrite display: table; ja "muuTeksti"-elementille määritteet display: table-cell; ja vertical-align: bottom; niin homma toimii.
edit, ja toimii koska "muuTeksti"llä on korkeus ja leveys koko laatikon verran eli vertical-alignilla käskytetään varsinaista sisältöä eikä elementin paikkaa.

Teemu2 [29.03.2013 19:34:35]

Kiitos!

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku