Immagine random con i CSS

[a.desantis]

Ciao ragazzi
vorrei aggiungere all'home page del mio sito www.macrofotografia.net la possibilita' di fare in modo che la foto sotto l'header "un click per catture un attimo" cambi ad ogni reload di pagina.
Ho valutato l'utilizzo di uno script java, ma non saprei dove metterlo, senza perdere questa classe:
"Classe CSS"
--------------------------------------
.entryphoto{
float:left;
padding:2px;
border:1px solid #000000;
background-color:#ddd;
color:#333;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 0;
}
-----------------------------------------

"Codice"
---------------------------------------------------------------------
<div class="entry">
<h2>Un click per catturare un attimo...</h2>
[img]images/melanargia.jpg[/img]


Benvenuti nel mio sito personale, dedicato alla macrofotografia.

Sono stato sempre affascinato dalla Natura in ogni sua forma ed espressione.La
fotografia per me rappresenta uno strumento eccezionale per cercare
di rappresentare al meglio cio' che i miei occhi vedono, rendendo eterni
attimi di vita che un istante dopo assumono altre forme.</p>.................
---------------------------------------------------------------------------------
e il testo

che le scorre intorno.
E' possibile una cosa del genere con i CSS, senza ricorrere ad uno script java?
Anto

[salasir]

Con i CSS non puoi cambiare il contenuto della pagina (escludiamo rollover ecc... che sono presentazione).

Per cambiare l'immagine ad ogni reload non vedo soluzioni alternative a js a meno che tu non utilizzi un linguaggio lato server (php, asp, ...), che imposti un'immagine diversa in base ad elaborazioni tue (random o sequenziali in una lista).

[a.desantis]

Grazie per le info.
QUindi, se volessi utilizzare uno script java, dovrei per forza di cosa stravolgere il codice che ho scritto sopra?
In pratica, la classe "entryphoto" con relativo float la perdo ?
Non c'e' possibilita' di collegare la classe con lo script ?
ANto

[salasir]

Sinceramente non sono esperto di js, ma credo che la classe CSS tu possa associarla comunque all'immagine che esponi. Però sarebbe opportuno vedere lo script.

Forse ti conviene guardare o farti spostare nel forum javascript!

[panta1978]

Originariamente inviato da salasir
Sinceramente non sono esperto di js, ma credo che la classe CSS tu possa associarla comunque all'immagine che esponi. Però sarebbe opportuno vedere lo script.

Forse ti conviene guardare o farti spostare nel forum javascript!

Se hai la possibilità di utilizzare un linguaggio server-side come PHP o ASP ti conviene usare quello (è più facile, il codice è più pulito, funziona anche con JS disabilitato...)

[Mich_]

Intanto lasciamo java fuori dai piedi, altrimenti non ci capiamo piu`: non e` il caso di tirare in ballo anche tale tecnologia (java e` cosa diversa da javascript).

JS puo` essere usato per interagire con il CSS o modificarne alcuni attributi.

document.getElementById('ID_OGGETTO').style.backgr ound = "url(nuovaimm.gif)";
oppure :
document.getElementById('ID_OGGETTO').className = "nuovaclasse";

[a.desantis]

Originariamente inviato da Mich_
Intanto lasciamo java fuori dai piedi, altrimenti non ci capiamo piu`: non e` il caso di tirare in ballo anche tale tecnologia (java e` cosa diversa da javascript).

JS puo` essere usato per interagire con il CSS o modificarne alcuni attributi.

document.getElementById('ID_OGGETTO').style.backgr ound = "url(nuovaimm.gif)";
oppure :
document.getElementById('ID_OGGETTO').className = "nuovaclasse";

Grazie Mich...
solo che per me e' arabo quanto sopra....
Se potessi darmi solo un'indicazione su come utilizzare il codice che mi hai suggerito ( suppongo mi serva il secondo ) , poi approfondiro' da solo il discorso.
Grazie
Anto

[Mich_]

Per costruire uno script occorre conoscere le specifiche.
Il codice che ti ho postato serve per cambiare lo sfondo di un oggetto. Nell'ambito della tua pagina non ha molto senso (a meno di rivedere la pagina).


Ma la cosa piu` semplice e` invece modificare il src della immagine, inmodo da caricare una immagine diversa random.

Il tag deve diventare (per accelerare il caricamento e non far vedere un'immagine che poi cambia):
[img]images/vuoto.gif[/img]
dove l'immagine vuoto.gif e` una piccola immagine trasparente (o anche bianca) di 1x1.
Ho modificato la classe in id, perche` mi serve per il JS. Nel CSS dovrai sostituire il . con #

Poi devi inserire (nella head) il seguente script:

<script type="text/javascript">
// inserire nella riga sotto la lista delle immagini
var listaimm = new Array("melanargia.jpg", "melagrigia.jpg", "melaverde.jpg");
function randomimm() {
  var i = Math.floor(Math.random() * listaimm.length);
  document.getElementById('entryphoto').src = "images/"+listaimm[i];
}
// sovrascrive altri onload: se ce ne sono o ne servono altri, occorre modificare
window.onload = randomimm; 
</script>

Nota che in caso JS non sia abilitato il blocco resta vuoto: per riempirlo comunque occorre lavorare con il tag <noscript>

[a.desantis]

Originariamente inviato da Mich_
Per costruire uno script occorre conoscere le specifiche.
Il codice che ti ho postato serve per cambiare lo sfondo di un oggetto. Nell'ambito della tua pagina non ha molto senso (a meno di rivedere la pagina).


Ma la cosa piu` semplice e` invece modificare il src della immagine, inmodo da caricare una immagine diversa random.

Il tag deve diventare (per accelerare il caricamento e non far vedere un'immagine che poi cambia):
[img]images/vuoto.gif[/img]
dove l'immagine vuoto.gif e` una piccola immagine trasparente (o anche bianca) di 1x1.
Ho modificato la classe in id, perche` mi serve per il JS. Nel CSS dovrai sostituire il . con #

Poi devi inserire (nella head) il seguente script:

<script type="text/javascript">
// inserire nella riga sotto la lista delle immagini
var listaimm = new Array("melanargia.jpg", "melagrigia.jpg", "melaverde.jpg");
function randomimm() {
  var i = Math.floor(Math.random() * listaimm.length);
  document.getElementById('entryphoto').src = "images/"+listaimm[i];
}
// sovrascrive altri onload: se ce ne sono o ne servono altri, occorre modificare
window.onload = randomimm; 
</script>

Nota che in caso JS non sia abilitato il blocco resta vuoto: per riempirlo comunque occorre lavorare con il tag <noscript>

Grazie infinite, sei stato chiarissimo.
Anto