Recherche script java
Résolu/Fermé
Bonjour,
Je recherche un script ,surement java , pour arriver a faire un peu comme sur la home d'aufeminin ( https://www.aufeminin.com/ )ou elleadore.com ( https://www.elleadore.com/ )
Je parle de la photo avec ses miniatures et qui change quand on les survol.
Si jamais vous avez des idées, n'hésitez pas
Merci d'avance
Loulou
Je recherche un script ,surement java , pour arriver a faire un peu comme sur la home d'aufeminin ( https://www.aufeminin.com/ )ou elleadore.com ( https://www.elleadore.com/ )
Je parle de la photo avec ses miniatures et qui change quand on les survol.
Si jamais vous avez des idées, n'hésitez pas
Merci d'avance
Loulou
A voir également:
- Recherche script java
- Waptrick java football - Télécharger - Jeux vidéo
- Jeux java itel football - Télécharger - Jeux vidéo
- Script vidéo youtube - Guide
- Recherche automatique des chaînes ne fonctionne pas - Guide
- Java apk - Télécharger - Langages
2 réponses
Marco la baraque
Messages postés
996
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
329
19 nov. 2008 à 00:08
19 nov. 2008 à 00:08
Bonsoir Loulou !
Je t'ai fait un exemple d'application qui fait un peu ça pour te montrer "comment ça marche" :)
Ne fais pas attention aux images, je les ai prises au hasard sur google image (oui, je sais, ce n'est pas beau).
Le css n'est pas forcément super bien fait non plus, mais je voulais juste que ce soit fonctionnel sur cet exemple pour que tu comprennes bien (d'où les tailles en pixels...).
Pour améliorer : il faut que pour chaque bouton survolé tu aies 2 images : une petite qui représente le bouton, et une plus grande qui sera l'image à afficher comme fond (ici j'étire simplement la petite image pour la mettre en tant que fond).
Enfin, petit détail : c'est un script javascript, et non pas java. Java et javascript sont 2 langages totalement différents, donc il ne faut pas confondre :)
N'hésite pas si tu as des questions.
Cordialement,
Je t'ai fait un exemple d'application qui fait un peu ça pour te montrer "comment ça marche" :)
Ne fais pas attention aux images, je les ai prises au hasard sur google image (oui, je sais, ce n'est pas beau).
Le css n'est pas forcément super bien fait non plus, mais je voulais juste que ce soit fonctionnel sur cet exemple pour que tu comprennes bien (d'où les tailles en pixels...).
Fichier index.html :
<html>
<head>
<title>Test CCM</title>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body onLoad="init_bg();">
<img id="fond">
<img class="survol" src="http://www.fond-ecran-image.com/gif_anime_webmaster/bouton/bouton_37.gif" style="top: 50px;" onMouseOver="change_background(this);" onMouseOut="init_bg();"/>
<img class="survol" src="http://www.jeunesvoix.net/boutons/bouton2+_off.gif" style="top: 150px;" onMouseOver="change_background(this);" onMouseOut="init_bg();"/>
</body>
</html>
Fichier style.css :
#fond {
/*la taille de l'image trouvée sur google image*/
width: 800px;
height: 537px;
}
Fichier javascript.js :
var default_bg = 'http://cbb.mcgill.ca/parts/index-background.jpg';
function init_bg() {
var bg = document.getElementById('fond');
bg.src = default_bg;
}
function change_background(img) {
var bg = document.getElementById('fond');
bg.src = img.src;
}
Pour améliorer : il faut que pour chaque bouton survolé tu aies 2 images : une petite qui représente le bouton, et une plus grande qui sera l'image à afficher comme fond (ici j'étire simplement la petite image pour la mettre en tant que fond).
Enfin, petit détail : c'est un script javascript, et non pas java. Java et javascript sont 2 langages totalement différents, donc il ne faut pas confondre :)
N'hésite pas si tu as des questions.
Cordialement,
Marco la baraque
Messages postés
996
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
329
22 nov. 2008 à 01:23
22 nov. 2008 à 01:23
Bonsoir Loulou,
Bon, en relisant les posts précédents, je me suis aperçu que j'avais oublié de te copier/coller ceci dans le fichier style.css :
Bon, passons aux choses sérieuses maintenant...
J'ai modifié légèrement le code pour qu'on ait une image de fond différente des boutons (l'idéal c'est de découper une petite partie de l'image de fond que tu souhaites pour la mettre sur l'image du bouton, comme sur le site que tu mentionnes).
Alors, c'est un peu plus compliqué maintenant.
Tout d'abord, j'ai décidé de précharger les images, c'est-à-dire que quand tu vas charger ta page la première fois, les images dont tu auras besoin dans ton script vont être téléchargées de manière transparente. En effet, si on ne fait pas ça, elles ne seront pas téléchargées tout de suite, et quand tu vas survoler tes boutons, et bien tu vas attendre 3-4s (ça dépend de la taille des images) avant de voir apparaître le résultat (le temps de télécharger les images). C'est de l'optimisation.
Donc en gros je crée un tableau (appelé preload) qui va contenir les images préchargées, associées aux identifiants des boutons qui les chargent.
Pour créer ce tableau, tu as besoin de renseigner le tableau tab, qui contient une liste d'associations identifiant/url (par exemple ici, le bouton dont l'identifiant est "bouton1" va définir l'image dont l'url est "http://hi5.bigoo.ws/content/layout/fantasy/fantasy_17.jpg" comme fond).
A toi maintenant de trouver des images de fond qui sont de la bonne taille, et de créer des boutons sympas.
Note: Les images que j'ai défini dans cet exemple sont très lourdes, donc assez longues à charger.
Cordialement,
Bon, en relisant les posts précédents, je me suis aperçu que j'avais oublié de te copier/coller ceci dans le fichier style.css :
.survol {
/*pour que les boutons soient au dessus du fond*/
z-index: 1;
position: absolute;
left : 700px;
}
Bon, passons aux choses sérieuses maintenant...
J'ai modifié légèrement le code pour qu'on ait une image de fond différente des boutons (l'idéal c'est de découper une petite partie de l'image de fond que tu souhaites pour la mettre sur l'image du bouton, comme sur le site que tu mentionnes).
index.html :
<html>
<head>
<title>Test CCM</title>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
</head>
<body onLoad="init_bg(); preloadImg();">
<img id="fond">
<img id="bouton1" class="survol" src="http://www.fond-ecran-image.com/gif_anime_webmaster/bouton/bouton_37.gif" style="top: 50px;" onMouseOver="change_background(this);" onMouseOut="init_bg();"/>
<img id="bouton2" class="survol" src="http://www.jeunesvoix.net/boutons/bouton2+_off.gif" style="top: 150px;" onMouseOver="change_background(this);" onMouseOut="init_bg();"/>
</body>
</html>
style.css :
#fond {
/*la taille de l'image trouvée sur google image*/
width: 800px;
height: 537px;
}
.survol {
/*pour que les boutons soient au dessus du fond*/
z-index: 1;
position: absolute;
left : 700px;
}
javascript.js :
var default_bg = 'http://cbb.mcgill.ca/parts/index-background.jpg';
//tableau contenant les correspondances fond/id de l'icone
var tab = new Array();
tab[0] = new Array("bouton1", "http://hi5.bigoo.ws/content/layout/fantasy/fantasy_17.jpg");
tab[1] = new Array("bouton2", "http://hi5.bigoo.ws/content/layout/fantasy/fantasy_18.jpg");
var preload = new Array();
function init_bg() {
var bg = document.getElementById('fond');
bg.src = default_bg;
}
function change_background(img) {
var bg = document.getElementById('fond');
bg.src = preload[img.id].src;
}
function preloadImg() {
for (var i = 0; i < tab.length; i++) {
var img = new Image();
img.src = tab[i][1];
preload[tab[i][0]] = img;
}
}
Alors, c'est un peu plus compliqué maintenant.
Tout d'abord, j'ai décidé de précharger les images, c'est-à-dire que quand tu vas charger ta page la première fois, les images dont tu auras besoin dans ton script vont être téléchargées de manière transparente. En effet, si on ne fait pas ça, elles ne seront pas téléchargées tout de suite, et quand tu vas survoler tes boutons, et bien tu vas attendre 3-4s (ça dépend de la taille des images) avant de voir apparaître le résultat (le temps de télécharger les images). C'est de l'optimisation.
Donc en gros je crée un tableau (appelé preload) qui va contenir les images préchargées, associées aux identifiants des boutons qui les chargent.
Pour créer ce tableau, tu as besoin de renseigner le tableau tab, qui contient une liste d'associations identifiant/url (par exemple ici, le bouton dont l'identifiant est "bouton1" va définir l'image dont l'url est "http://hi5.bigoo.ws/content/layout/fantasy/fantasy_17.jpg" comme fond).
A toi maintenant de trouver des images de fond qui sont de la bonne taille, et de créer des boutons sympas.
Note: Les images que j'ai défini dans cet exemple sont très lourdes, donc assez longues à charger.
Cordialement,
21 nov. 2008 à 12:53
C'est super, effectivement je ne savais pas pour java et javascript alors merci pour ce code javascript!
Dès que j'ai le temps je vais essayer d'en apprendre un peu plus la dessus!
Dès que je l'ai adapté a mon site, je te le montre si tu veux!
loulou
21 nov. 2008 à 14:27
je chercher encore mais si tu passes par là, hésites pas a me donner le code
bonne journée
loulou
21 nov. 2008 à 14:37
Je ne comprends pas très bien ton problème.
Qu'appelles-tu 'la plus grande image' ? Le fond ?
De quel code parles-tu ?
N'hésite pas à modifier les fichiers que je t'ai donné pour adapter le script aussi !
Par exemple utilise des chemins relatifs pour les images que tu utilises, et adapte le fichier css à ton fond d'écran, positionne les boutons à l'endroit souhaité...
Cordialement,
21 nov. 2008 à 14:41
En fait je n'arrive pas a mettre un image différente pour la petite et la grande.
Quand je passe sur la petite , elle devient grande et donc la qualité n'est pas très bonne.
En plus je souhaite mettre une autre image avec du texte.
tu m'as dit dans le premier message de ne pas oublier de rajouter une grande image , et c'est ce que je n'arrive pas a faire.
Quand j'arrive a changer l'image, celle-ci survol la petite et non le fond.
Merci d'avance
21 nov. 2008 à 14:43
Je souhaiterais que l'on ne voit que la grande image uniquement lorsque l'on passe sur la petite