scroll background image

**giuseppe500** · 07-09-2009, 12:54

Ciao.
ho trovato uno script di mootools che fa lo scroll di una serie di immagini.
ecco il codice di esempio:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Mootools QScroller</title>
<link href="qscroller.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="qscroller.js"></script>
<script type="text/javascript">
var scroller;
window.addEvent('domready', function() {
var opt = {
    slides: 'qslide3',
    duration: 2000,
    delay: 1000, 
    auto:false,
    direction: 'h',
    transition:Fx.Transitions.Quart.easeIn,
    buttons: {next:'go-next2',prev:'go-prev2',play:'play',stop:'stop'},
   
  }
  scroller = new QScroller('qscroller3',opt);
  scroller.load();
});

function functionplay()
{
	scroller.play(); 
}
function functionstop()
{
	scroller.stop(); 
}

</script>

</head>
<body>

<div id="qscroller3" class="qscroller">
<div id="qscroller3-nav">
  <div>
  <a id="go-prev2" href="javascript:void(0)">
  [img]prev.gif[/img]
  </a>
  <a id="play" href="javascript:void(0)">
  [img]play.gif[/img]
  </a>
  <a id="stop" href="javascript:void(0)">
  [img]stop.gif[/img]
  </a>
  <a id="go-next2" href="javascript:void(0)">
  [img]next.gif[/img]
  </a>
  </div>
</div>

</div>
<div>111</div>
<div class="hide">
  <div class="qslide3">
  [img]images/flower1.jpg[/img]
  </div>
  <div class="qslide3">
  [img]images/flower2.jpg[/img]
  </div>
  <div class="qslide3">
  [img]images/flower3.jpg[/img]
  </div>
  <div class="qslide3">
  [img]images/flower4.jpg[/img]
  </div>
</div>

<script type="text/javascript">
<!--

//-->

</script>

<div id="mydiv" style="height:100px;width:40px;background-Color:#ff0000;" onmouseover="functionplay();" onmouseout="functionstop();" >
        Move the mouse into this div element area.
    </div>

il problema è che io devo fare lo scroll dell'immagine di sfondo del mio sito , e ho visto che lo script crea deli controlli img di cui viene fatto lo scroll.
E' possibile utilizzare la background-image anziche dei controlli div?
cosa mi consigliate?
grazie.

**giuseppe500** · 07-09-2009, 15:43

ho visto che a background-image possono essere assegnate varie immagini (vengono messe una accanto all altra?).
E ho visto anche che esiste una proprietà background-position nei css.
Quindi penso che utilizzando queste due proprietà sia possibile fare lo scroll del background di un sito.
Esiste qualcosa di gia fatto e testato?
uso mootools come framework , ma forse non importa.
grazie.

**giuseppe500** · 07-09-2009, 22:10

mi hanno detto che non si possono comporre immagini semplicemente aggiungendo un altro percorso o url nella proprietà background dei css?
Mi è sembrato di vedere qualcosa con js dove si mettevano in un array le varie immagini e si scrollava su qeste , ma non sono riuscito a capire e ho perso l'indirizzo.
Mi hanno detto di rivolgermi a js.
avetei qualche ideea?
grazie,

**cavicchiandrea** · 07-09-2009, 23:57

Non è chiarissimo cosa vuoi fare, ma forse questo può esserti utile, ciao.

**giuseppe500** · 08-09-2009, 09:44

vorrei creare un immagine di sfondo composta da due o piu' immagini e fare lo scroll di questa immagine composta.
Un banner praticamente.
Mi sto chiedendo se si puo' fare con js o è meglio creare l'immagine composta con un linguaggio lato server, dopo lo scroll l'ho gia implementato ed è molto semplice , utilizzando il background position(incrementandolo ad un interval).
Mi sembra strano pero' che non si possa fare con js.
grazie, spero di essermi spiegato meglio, scusate.

**giuseppe500** · 08-09-2009, 11:48

Ho gia fatto uno script per lo scroll del background , solo che fìunziona con un immagine di sfondo e basta.
il problema è gestire le immagini , che in fila dovrebbero andare oltre la grandezza del sito.
e non conosco se js ha funzioni per gestire le immagini.
Una soluzione ci sarebbe, creare un immagine di sfondo a partire da varie immagini con un linguaggio lato server come php , ma è molto piu' limitato che usare js.
Chiedo a voi

Discussione: scroll background image

Strumenti discussione

Ricerca discussione

Visualizza

scroll background image

Permessi di invio