Recherche script java [Résolu/Fermé]

Signaler
-
 loulou -
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

2 réponses

Messages postés
998
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
325
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...).

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,
>
Messages postés
998
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009

Oui c'est ce que j'ai fait.

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
> loulou
Car en fait l'image bleue que tu as mis en fond j'aimerais par la suite la modifier par une image animée qui fais tourner plusieurs images lorsque l'on ne passe pas sur la petite image.

Je souhaiterais que l'on ne voit que la grande image uniquement lorsque l'on passe sur la petite
Messages postés
998
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
325 > loulou
Oui, je comprends, je regarderai ça ce soir et j'essairai de te donner un code.

Cordialement,
>
Messages postés
998
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009

Merci , en attendant je continue de chercher, c'est ainsi que l'on apprend.

A ce soir

loulou
>
Messages postés
998
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009

En attendant j'ai bidouillé un truc mais du coup lors du survol du texte qui se trouvera a coté de la petite image ( texte que je souhaite intégrer dans la petite image) ne permet pas d'avoir la grande image qui change.

Loulou
Messages postés
998
Date d'inscription
vendredi 9 mai 2008
Statut
Contributeur
Dernière intervention
5 novembre 2009
325
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 :
.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,
Merci marco, j'ai réussit à faire ce que je voulais faire!
j'aime vraiment ce que l'on peut faire avec le javascript, c'est cool.

bonne soirée a toi

loulou