1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Graphique
  5. Rollover ultra simple avec prechargement des images

Rollover ultra simple avec prechargement des images

Soyez le premier à donner votre avis sur cette source.

Vue 22 910 fois - Téléchargée 1 099 fois

Télécharger le projet
Commenter

Description

Il suffit d'inclure le script :
<script language="JavaScript" type="text/javascript" src="rollover.js"></script>

Puis d'inclure un parametre personnalisé aux images :
<img src="out.jpg" overSrc="over.jpg" clickSrc="click.jpg">

Source / Exemple : 


<script language="JavaScript" type="text/javascript">
<!--
//Script de Gorrk.
function init_rollover()
{
    if (document.getElementById)
    {
        var j = 0;
        var k = 0;
        var l = 0;
        for (var i = 0; i < document.images.length; i++)
        {
            var image=document.images[i];
            if (!image.getAttribute("overSrc","false") && !image.getAttribute("clickSrc","false"))
                continue;
            eval("outImage"+j+"=new Image();");
            eval("outImage"+j+".src=image.src;");
            if (image.getAttribute("overSrc","false"))
            {
                eval("overImage"+k+"=new Image();");
                eval("overImage"+k+".src=image.getAttribute('overSrc',false);");
                image.onmouseover=new Function("this.src=overImage"+k+".src");
                k++;
            }
            if (image.getAttribute("clickSrc","false"))
            {
                eval("clickImage"+l+"=new Image();");
                eval("clickImage"+l+".src=image.getAttribute('clickSrc',false);");
                image.onmousedown = new Function("this.src=clickImage"+l+".src;");
                image.onmouseup   = new Function("this.src=outImage"+j+".src;");
                l++;
            }
            image.onmouseout = new Function("this.src=outImage"+j+".src");
            j++;
        }
    }
}
onload = init_rollover;
//	Script de Gorrk.
-->
</script>
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
96
Date d'inscription
mercredi 16 avril 2003
Statut
Membre
Dernière intervention
26 avril 2007
Désolé pour avoir crypté le script, effectivement ca sert a rien.

Quelques explications :
- ce script n'est pas très compatible car il utilise les fonctions dom qui ne sont pas toujours implementés dans les navigateur.
- le prechargement des images est du au "new Image()" et au "image.src="
- ce qui fait que ce script est pratique c'est qu'il n'y a que des paremetres basic a mettre dans la balise des images : overSrc et clickSrc.
Signaler
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 41
j'avais regardé que le décrypté, en penssant que c'était après le (c) que la remarque était...

Enfin moi je croyais qu'ici on postait des sources...
Signaler
Messages postés
66
Date d'inscription
dimanche 18 août 2002
Statut
Membre
Dernière intervention
9 juillet 2007
Bon, je viens de vérifier, le rollover fonctionne avec Firefox. Ok. Quant au préchargement, là je n'en sait rien ...En quoi ce script serait meilleur qu'un autre script de préchargement?

Merci revlis du décriptage! C'est bien la première fois que je vois ici un script crypté!! Je trouve ça vraiment chié!!!
Signaler
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
 41
Desole, peut de navigateurs prennent actuelement en charge les fonctions dom qui sont au coeur du javascript...=> si je comprends bien tu as fait du non portable pour un script tout simple... C'est un peu domage de se priver de 30% alors que la modif ne dois pas être compliqué...

De plus ce qui ne fonctionne pas sous Mozilla (ou tout rendu gecko) n'est pas du javascript, il suffit de lire la norme pour le voir....
Signaler
Messages postés
1
Date d'inscription
mardi 7 octobre 2003
Statut
Membre
Dernière intervention
8 octobre 2003
Bonjour,
Je débute dans le domaine javascript, et j'aurais besoin d'aide.
J'ai créé un organigramme sur indesign, j'en ai fait une copie dans un format EPS récupérable sur Photoshop.
A partir de Photoshop, j'ai créé des tranches correspondant aux cadres dans lesquels j'ai répertorié les services.
Dans chaque cadre, il est possible de mettre un lien vers un fichier (image par exemple).
Lorsque l'on enregistre le tout pour le Web, il crée le HTML en toile de fond.
Ce que j'aimerais faire, c'est lorsque l'on passe avec la souris sur un des cadres, celui-ci s'affiche en plus grand.
Peut-être y a t-il un moyen de faire ce travail en java ?

Toutes vos suggestions seront les bienvenues

Merci
Afficher les 12 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Gorrk)