High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Recherche script java

Dernière réponse le 6 déc 2008 à 00:17:15 loulou, le 18 nov 2008 à 12:27:46 
 Signaler ce message aux modérateurs

Bonjour,


Je recherche un script ,surement java , pour arriver a faire un peu comme sur la home d'aufeminin ( http://www.aufeminin.com )ou elleadore.com ( http://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

Configuration: Windows Vista
Firefox 3.0.4

Posez votre question Répondre

1

Marco la baraque, le 19 nov 2008 à 00:08:11

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, rtfm and jfgi

   
Répondre à Marco la baraque

2

loulou, le 21 nov 2008 à 12:53:51

Merci marco!

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

   
Répondre à loulou

3

loulou, le 21 nov 2008 à 14:27:53

Mince je n'arrive pas a insérer la plus grande image.

je chercher encore mais si tu passes par là, hésites pas a me donner le code

bonne journée

loulou

   
Répondre à loulou

4

Marco la baraque, le 21 nov 2008 à 14:37:07

Bonjour Loulou,
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, rtfm and jfgi

   
Répondre à Marco la baraque

5

loulou, le 21 nov 2008 à 14:41:06

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

   
Répondre à loulou

6

loulou, le 21 nov 2008 à 14:43:41

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

   
Répondre à loulou

7

Marco la baraque, le 21 nov 2008 à 14:58:56

Oui, je comprends, je regarderai ça ce soir et j'essairai de te donner un code.

Cordialement, rtfm and jfgi

   
Répondre à Marco la baraque

8

loulou, le 21 nov 2008 à 14:59:44

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

A ce soir

loulou

   
Répondre à loulou

9

loulou, le 21 nov 2008 à 23:41:57

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

   
Répondre à loulou

10

Marco la baraque, le 22 nov 2008 à 01:23:29

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, rtfm and jfgi

   
Répondre à Marco la baraque

11

 loulou, le 6 déc 2008 à 00:17:15

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

   
Répondre à loulou
Posez votre question Répondre
Ils ont besoin de votre aide