Script immagini. Quale usare?

[iAlessandro93]

Ragazzi, qualcuno sa dirmi come ha fatto questo sito http://www.asos.com/ a fare quello strano effetto alle immagini?
Praticamente al passaggio del mouse l'immagine si oscura di un colore, mettendo in evidenza il testo...
Idee??


p.s. Sinceramente non so neanche che tipo di programmazione sia... Per cui se ho sbagliato sezione mi scuso anticipatamente!

[br1]

Con IE e con Chrome non vedo alcun effetto...

[iAlessandro93]

Scusami... Ecco il link giusto!
http://www.asos.com/Woman/

[8matt5]

Non è l'immagine che si oscura, ma un'altra immagine che da trasparente diventa opaca.

Praticamente c'è un[*] con background-image l'immagine con la donna e un <h3> interno a questo[*] con background-image l'immagine senza la donna.

Inizialmente l'h3 è trasparente (opacity: 0), al passaggio del mouse diventa opaco (opacity: 1)

[iAlessandro93]

Non ho capito molto bene quello che intendi.
Puoi scrivermi più o meno il codice? per farmi capire meglio?
tanto non credo che sia nulla di difficile giusto?

[8matt5]

Fare la transizione in javascript puro diventa un po' lungo e difficile...
Ti consiglio di usare un framework come MooTools o jQuery. Io uso il primo e bastano poche istruzioni per farlo.
Ovviamente devi prima preparare le due immagini.
Poi preparerei un <a> con dentro uno <span> e gli assegnerei un id per identificarli in modo univoco.
Quindi gli do lo stile:
- stesse dimensioni
- come sfondo dell'<a> la prima immagine (quella con la donna nell'esempio)
- come sfondo dello span l'immagine che comparirà al passaggio del mouse (quella con solo la scritta)
- Lo span lo metto invisibile così all'inizio non si vede.

<style type="text/css">
<!--
#img_sfondo, #img_hover {
display: block;
width: 200px;
height: 200px;
}
#img_sfondo {
background-image: url(img1.jpg);
}
#img_hover {
background-image: url(img2.jpg);
visibility: hidden;
}
-->
</style>
[...]
<a id="img_sfondo" href="#">
    <span id="img_hover"></span>
</a>

Ora comincio a creare lo script javascript con MooTools.
Se non ce l'hai già, scarica mootools 1.2 da http://mootools.net/download/version/1.2.5
è già uscita la versione 1.3, ma non l'ho ancora provata e a volte il codice è diverso, quindi potrebbe non funzionare.
Includo la libreria (per questo ti basta MooTools Core) e creo lo script vero e proprio.

<script type="text/javascript" src="mootools-1.2.5-core-yc.js"></script>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
  /*
  Mettere il codice qua dentro fa si che venga eseguito solo quando tutto il codice della pagina
  è stato caricato dal browser e quindi hai tutti gli elementi del DOM a disposizione.
  la funzione $() ti restituisce l'elemento in base all'id che gli passi come parametro.
  la funzione fade() gestisce l'opacità dell'elemento.
  */

  $('img_hover').fade('hide'); // imposto l'opacità a 0 
  $('img_sfondo').addEvent('mouseover', function() {
    $('img_hover').fade('in'); // al passaggio del mouse mostro lo span (e quindi il suo sfondo)
  });
  $('img_sfondo').addEvent('mouseout', function() {
    $('img_hover').fade('out'); // quando il mouse se ne va nascondo lo span
  });
});
-->
</script>

Il codice così com'è dovrebbe funzionare. è chiaro che prima di tutto dovresti capire come funziona il framework, come lavora questo script (un po' ho provato a spiegartelo nei commenti) e poi adattarlo alle tue necessità.

[8matt5]

Fare la transizione in javascript puro diventa un po' lungo e difficile...
Ti consiglio di usare un framework come MooTools o jQuery. Io uso il primo e bastano poche istruzioni per farlo.
Ovviamente devi prima preparare le due immagini.
Poi preparerei un <a> con dentro uno <span> e gli assegnerei un id per identificarli in modo univoco. Quindi gli do lo stile: stesse dimensioni e come sfondo dell'<a> la prima immagine (quella con la donna nell'esempio) e nello span l'immagine che comparirà al passaggio del mouse (quella con solo la scritta). Inoltre lo span lo metto invisibile così all'inizio non si vede.

<style type="text/css">
<!--
#img_sfondo, #img_hover {
display: block;
width: 200px;
height: 200px;
}
#img_sfondo {
background-image: url(img1.jpg);
}
#img_hover {
background-image: url(img2.jpg);
visibility: hidden;
}
-->
</style>
[...]
<a id="img_sfondo" href="#">
    <span id="img_hover"></span>
</a>

Ora comincio a creare lo script javascript con MooTools.
Se non ce l'hai già, scarica mootools 1.2 da http://mootools.net/download/version/1.2.5
è già uscita la versione 1.3, ma non l'ho ancora provata e a volte il codic

[iAlessandro93]

Originariamente inviato da 8matt5
Fare la transizione in javascript puro diventa un po' lungo e difficile...
Ti consiglio di usare un framework come MooTools o jQuery. Io uso il primo e bastano poche istruzioni per farlo.
Ovviamente devi prima preparare le due immagini.
Poi preparerei un <a> con dentro uno <span> e gli assegnerei un id per identificarli in modo univoco.
Quindi gli do lo stile:
- stesse dimensioni
- come sfondo dell'<a> la prima immagine (quella con la donna nell'esempio)
- come sfondo dello span l'immagine che comparirà al passaggio del mouse (quella con solo la scritta)
- Lo span lo metto invisibile così all'inizio non si vede.

<style type="text/css">
<!--
#img_sfondo, #img_hover {
display: block;
width: 200px;
height: 200px;
}
#img_sfondo {
background-image: url(img1.jpg);
}
#img_hover {
background-image: url(img2.jpg);
visibility: hidden;
}
-->
</style>
[...]
<a id="img_sfondo" href="#">
    <span id="img_hover"></span>
</a>

Ora comincio a creare lo script javascript con MooTools.
Se non ce l'hai già, scarica mootools 1.2 da http://mootools.net/download/version/1.2.5
è già uscita la versione 1.3, ma non l'ho ancora provata e a volte il codice è diverso, quindi potrebbe non funzionare.
Includo la libreria (per questo ti basta MooTools Core) e creo lo script vero e proprio.

<script type="text/javascript" src="mootools-1.2.5-core-yc.js"></script>
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
  /*
  Mettere il codice qua dentro fa si che venga eseguito solo quando tutto il codice della pagina
  è stato caricato dal browser e quindi hai tutti gli elementi del DOM a disposizione.
  la funzione $() ti restituisce l'elemento in base all'id che gli passi come parametro.
  la funzione fade() gestisce l'opacità dell'elemento.
  */

  $('img_hover').fade('hide'); // imposto l'opacità a 0 
  $('img_sfondo').addEvent('mouseover', function() {
    $('img_hover').fade('in'); // al passaggio del mouse mostro lo span (e quindi il suo sfondo)
  });
  $('img_sfondo').addEvent('mouseout', function() {
    $('img_hover').fade('out'); // quando il mouse se ne va nascondo lo span
  });
});
-->
</script>

Il codice così com'è dovrebbe funzionare. è chiaro che prima di tutto dovresti capire come funziona il framework, come lavora questo script (un po' ho provato a spiegartelo nei commenti) e poi adattarlo alle tue necessità.

Intanto ti ringrazio per essere stato così gentile a rispondermi.
Non so perchè ma non funziona...
Ho scritto quello che mi hai dato tu:

<style type="text/css">
#img_sfondo, #img_hover {
        display: block;
        width: 200px;
        height: 200px;
}
#img_sfondo {
        background-image: url(http://static.ciaoblog.net/ciaoblog/...le-200x200.jpg);
}
#img_hover {
        background-image: url(http://www.mondofinanzablog.com/wp-c...-morsicata.jpg);
 visibility: hidden;      
}
</style>


<script type="text/javascript" src="mootools-1.2.5-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
  /*
  Mettere il codice qua dentro fa si che venga eseguito solo quando tutto il codice della pagina
  è stato caricato dal browser e quindi hai tutti gli elementi del DOM a disposizione.
  la funzione $() ti restituisce l'elemento in base all'id che gli passi come parametro.
  la funzione fade() gestisce l'opacità dell'elemento.
  */

  $('img_hover').fade('hide'); // imposto l'opacità a 0 
  $('img_sfondo').addEvent('mouseover', function() {
    $('img_hover').fade('in'); // al passaggio del mouse mostro lo span (e quindi il suo sfondo)
  });
  $('img_sfondo').addEvent('mouseout', function() {
    $('img_hover').fade('out'); // quando il mouse se ne va nascondo lo span
  });
});
</script>

e in seguito ho inserito:

<a id="img_sfondo" href="#">
    <span id="img_hover"></span>
</a>

Forse non ho capito bene io..

[8matt5]

Io avevo provato con esattamente lo stesso codice e funzionava.

Hai scaricato il pacchetto giusto di mootools? Controlla la console per vedere che errori ti da.

[iAlessandro93]

Originariamente inviato da 8matt5
Io avevo provato con esattamente lo stesso codice e funzionava.

Hai scaricato il pacchetto giusto di mootools? Controlla la console per vedere che errori ti da.

Infatti non riesco a capire perchè sia su una pagina singola che su Dreamweaver funziona, mentre se lo inserisco sulla mia pagina il codice non và