AccueilAccueil  -> Le site MSF  GalerieGalerie  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  ContactContact  

Partagez | 
 

 Question html/javascript

Aller en bas 
AuteurMessage
sylesis
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 2485
Date d'inscription : 14/06/2011
Age : 38
Localisation : 59 ( 12 km de cambrai )

MessageSujet: Question html/javascript   Mer 12 Déc - 17:00

J'aimerais compléter la page web de ma collection et ajouter un effet : que lorsque l'on passe sur le nom du jeu, ou le mot "apercu", une photo apparaisse juste au dessus, et disparaisse sitôt le pointeur déplacé.

Des idées sir la façon de faire ? J'utilise dreamwavear ( c'est vieux, je sais) pour coder mes pages : je connais encore le html, mais pas javascripts.
Revenir en haut Aller en bas
http://www.sylesis.fr
Moo
Opa Opa (Fantasy Zone)
Opa Opa (Fantasy Zone)
avatar

Score : 1312
Date d'inscription : 14/06/2009
Age : 35
Localisation : Paris

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 17:46

Il faut du JavaScript, obligatoirement.

Il va falloir une petite fonction à appeler en ajoutant l'évènement "onMouseOver" sur les éléments qui devront le déclencher, et "onMouseOut" pour fermer le popup.

C'est pas énorme en code, mais pour faire ce genre de choses proprement, j'utilise généralement des librairies type jQuery qui ont déjà tout intégré.
Revenir en haut Aller en bas
ichigobankai
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 6557
Date d'inscription : 26/08/2009
Age : 38
Localisation : Near Angers ^^

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 19:41

Même réponse que Moo.
Revenir en haut Aller en bas
sylesis
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 2485
Date d'inscription : 14/06/2011
Age : 38
Localisation : 59 ( 12 km de cambrai )

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 20:01

Euh oui, mais quelle genre de fonction ? ^^;
Revenir en haut Aller en bas
http://www.sylesis.fr
DrRotule
Admin
Admin
avatar

Score : 25713
Date d'inscription : 11/06/2009
Age : 38
Localisation : Lille

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 20:49

f(x) = x2+3x-2
Revenir en haut Aller en bas
http://www.mastersystem-france.com
sylesis
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 2485
Date d'inscription : 14/06/2011
Age : 38
Localisation : 59 ( 12 km de cambrai )

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 21:13

Y =0 pour X = (-3 -sqrt(17))/2 et X = (-3 +sqrt(17))/2 .
Revenir en haut Aller en bas
http://www.sylesis.fr
DrRotule
Admin
Admin
avatar

Score : 25713
Date d'inscription : 11/06/2009
Age : 38
Localisation : Lille

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 21:16

eleve prodige^^
Revenir en haut Aller en bas
http://www.mastersystem-france.com
darknonor
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 6273
Date d'inscription : 21/11/2010
Age : 38
Localisation : Rouen

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 22:22

2+2=4 , ça vous la coupe hein !? ^^
Revenir en haut Aller en bas
Francklin29
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 14439
Date d'inscription : 04/08/2009
Localisation : The Fantasy Zone

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 22:29

lui vous le battrez jamais



_________________
Welcome To The Fantasy zone !
Get Ready !
Aaaaa...!
You're Doing Great !

Many More Battle Scenes Will Soon Be Available !
Revenir en haut Aller en bas
darknonor
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 6273
Date d'inscription : 21/11/2010
Age : 38
Localisation : Rouen

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 22:40

1+1=11, je m'incline ^^
Revenir en haut Aller en bas
Francklin29
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 14439
Date d'inscription : 04/08/2009
Localisation : The Fantasy Zone

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 22:43

fasse a lui, on est obligé de s'incliner, même lui s'incline lorsqu'il croise un miroir..

_________________
Welcome To The Fantasy zone !
Get Ready !
Aaaaa...!
You're Doing Great !

Many More Battle Scenes Will Soon Be Available !
Revenir en haut Aller en bas
darknonor
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 6273
Date d'inscription : 21/11/2010
Age : 38
Localisation : Rouen

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 22:48

Même chuck Norris ?
Revenir en haut Aller en bas
Francklin29
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 14439
Date d'inscription : 04/08/2009
Localisation : The Fantasy Zone

MessageSujet: Re: Question html/javascript   Mer 12 Déc - 22:53

Non quand même pas, faudrait pas déconner ^^

_________________
Welcome To The Fantasy zone !
Get Ready !
Aaaaa...!
You're Doing Great !

Many More Battle Scenes Will Soon Be Available !
Revenir en haut Aller en bas
Moo
Opa Opa (Fantasy Zone)
Opa Opa (Fantasy Zone)
avatar

Score : 1312
Date d'inscription : 14/06/2009
Age : 35
Localisation : Paris

MessageSujet: Re: Question html/javascript   Jeu 13 Déc - 11:35

sylesis a écrit:
Euh oui, mais quelle genre de fonction ? ^^;
A écrire soi-même ! Il faut un petit <div> invisible dans la page, qui contient une image, et dans la fonction, il va falloir le faire apparaître, changer ses coordonnées, et l'URL de l'image, en manipulant le CSS. Bon, je vais pas faire un cours de JavaScript ici, mais avec quelques petits tutos là dessus, ça devrait pas être très compliqué Smile
Revenir en haut Aller en bas
sylesis
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 2485
Date d'inscription : 14/06/2011
Age : 38
Localisation : 59 ( 12 km de cambrai )

MessageSujet: Re: Question html/javascript   Jeu 13 Déc - 14:20

Bon, je n'ai pas su écrire moi même, mais j'ai pompé et adapté :

http://sylesis.hostoi.com/collection/index-test.htm : que 5 photos faites pour l'instant.

A corriger maintenant :
_ mettre un style pour faire disparaitre les marches de la balise de lien
_ mettre des icones pour illustrer le style, genre ceux de smspower
_ mettre un preloader pour les images ?
_ repositionner l'image si le curseur est trop bas ? ( ca j'aurais du mal )
Revenir en haut Aller en bas
http://www.sylesis.fr
Moo
Opa Opa (Fantasy Zone)
Opa Opa (Fantasy Zone)
avatar

Score : 1312
Date d'inscription : 14/06/2009
Age : 35
Localisation : Paris

MessageSujet: Re: Question html/javascript   Ven 14 Déc - 11:59

sylesis a écrit:
_ repositionner l'image si le curseur est trop bas ? ( ca j'aurais du mal )
C'est pas trop trop compliqué, il faut juste ajouter un "if" pour tester la position du curseur par rapport à l'écran.

En gros dans get_mouse :

skn.top = y+20;
if (y > window.innerHeight - 50) {
skn.top = skn.top - 50;
}

J'ai mis ça de tête avec des valeurs au pif, je me plante peut être sur la propriété window.innerHeight et sûrement sur la valeur de 50, mais en tâtonnant un peu ça se corrige Wink
Revenir en haut Aller en bas
sylesis
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 2485
Date d'inscription : 14/06/2011
Age : 38
Localisation : 59 ( 12 km de cambrai )

MessageSujet: Re: Question html/javascript   Dim 16 Déc - 9:16

Ok, j'ai compris l'idée : je vérifie l'attribut window.innerHeight.
Revenir en haut Aller en bas
http://www.sylesis.fr
ichigobankai
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 6557
Date d'inscription : 26/08/2009
Age : 38
Localisation : Near Angers ^^

MessageSujet: Re: Question html/javascript   Dim 16 Déc - 10:05

si tu veux centrer ton bloc vis à vis de l'écran :
• il faut connaitre le window.innerheight (en pixel) (retourne la taille d'affichage "utile" du navigateur)
• il faut connaitre la taille du bloc a afficher (en pixel)
> si il est fixe : pas de souci, on la connait.
> si il est variable : voir plus bas.
• faire au final (window.innerheight - taille.bloc) / 2 pour trouver la position X (vis à vis du haut gauche de l'écran)

PS. la coordonnées 0,0 (x,y) du bloc tjs est défini par le coin haut gauche.

pour connaitre la taille du bloc quand celui-ci n'est pas fixe
avec jquery (plus simple):
var BlocHeight = $(#id-de-ma-div).height();
ou
var BlocHeight = $(.classe-de-ma-div).height();

Ensuite :
var PositionBlocH = (window.innerheight-BlocHeight)/2;
la variable PositionBlocH contient la valeur pour center le bloc en hauteur (vis à vis du haut de l'écran)
$(#id-de-ma-div).css('top',PositionBlocH);


Dernière édition par ichigobankai le Dim 16 Déc - 12:40, édité 1 fois
Revenir en haut Aller en bas
sylesis
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 2485
Date d'inscription : 14/06/2011
Age : 38
Localisation : 59 ( 12 km de cambrai )

MessageSujet: Re: Question html/javascript   Dim 16 Déc - 12:18

Pas vraiment centré en fait, encore que c'est une idée. Ce que je voudrais juste, c'est que l'image apparaisse en entier : le si le curseur est bas, que l'image apparaisse au dessus. SI le curseur est en haut de l'affichage utile, qu'elle apparaisse en dessous (mais toujours à droite du pointeur ).
Enfin avec vos conseils, je devrais réussir à faire un truc : je code en java en temps normal, après tout.
Revenir en haut Aller en bas
http://www.sylesis.fr
sylesis
Alex Kidd (Alex Kidd)
Alex Kidd (Alex Kidd)
avatar

Score : 2485
Date d'inscription : 14/06/2011
Age : 38
Localisation : 59 ( 12 km de cambrai )

MessageSujet: Re: Question html/javascript   Dim 16 Déc - 14:34

Voila, ca devrait être bon : cliquez ici
Revenir en haut Aller en bas
http://www.sylesis.fr
hoodvy
Kevin (Home Alone)
Kevin (Home Alone)
avatar

Score : 68
Date d'inscription : 14/12/2012
Age : 35
Localisation : Pavilly

MessageSujet: Re: Question html/javascript   Lun 24 Déc - 18:44

Ou ainsi :

Code:

<html>

<head>

    <script language="javascript">
    <!--
    function afficherImage()
    {
    document.getElementById('zoneImg').innerHTML = '<img src="http://www.google.fr/images/firefox/fox1.gif">';
    }
   
    function enleverImage()
    {
    document.getElementById('zoneImg').innerHTML = '';
    }
    -->
    </script>

</head>

<body>
   
    <div onmouseover="afficherImage();" onmouseout="enleverImage();">Afficher</div>
    <label id="zoneImg"></label>

</body>

</html>
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Question html/javascript   

Revenir en haut Aller en bas
 
Question html/javascript
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Master System France :: Communauté :: Tout ce qui n'est pas Master System-
Sauter vers: