Genre y'z dock ou mydock en page web!!!

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 038 fois - Téléchargée 31 fois

Contenu du snippet

Ce petit codes sert a imiter y'z dock (qui n'est plus en distribution par son auteur)

y'z dock est une barre qui sert a remplacer le demarrer de windows (remarque il en a sur les mac)un exemple sur ce site

http://customxp.net/modules/cjaycontent/images/dock.gif

Ce script est a la version 1.0 elle est plaine de bugs pour le déplacement je vais essayer de la modifier de l'aide serais apprecier!!!

ps-vous ne verrai pas les image!!vous devez changer tout les noms jimmy.ico par votreimage.gif ou .jpg

merci j'attend vos commentaire pour mon premier script et aider moi a le rendre meilleur

jimmydignard1@hotmail.com

Source / Exemple :


<HTML>
<HEAD>
<script language="JavaScript">
<!--
var coeff=17;//Coefficient de reduction
var larg=200;//largeur maxi de l'image
var haut=200;//hauteur maxi de l'image
function changer(sel) { 
switch(sel){
case 1 : //image 1
if (document.image1.width < larg) {
coeff = coeff-0.2;
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
chang=window.setTimeout('changer(1);',1);//vitesse de l'effet
}
break;
case 2 : //image 2
if (document.image2.width < larg) {
coeff = coeff-0.2;
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
chang=window.setTimeout('changer(2);',1);//vitesse de l'effet
}
break;
case 3 : //image 3
if (document.image3.width < larg) {
coeff = coeff-0.2;
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
chang=window.setTimeout('changer(3);',1);//vitesse de l'effet
}
break; 
//images suivantes ...
}
if (document.image2.width >= larg) window.clearTimeout(chang);
} 
function initial(sel) {
switch(sel){
case 1 : //image 1
if (document.image1.width > larg/4) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
initi=window.setTimeout('initial(1);',1);//vitesse de l'effet
}
break;
case 2 : //image 2
if (document.image2.width > larg/4) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
initi=window.setTimeout('initial(2);',1);//vitesse de l'effet
}
break;
case 3 : //image 3
if (document.image3.width > larg/4) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
initi=window.setTimeout('initial(3);',1);//vitesse de l'effet
}
break;
//images suivantes ...
}
if (document.image1.width < larg/4) window.clearTimeout(initi);
}
//-->
</script>
<TITLE>les dock</TITLE>
</HEAD>
<BODY>
<a href="#" onMouseOut="initial(1)" onMouseOver="changer(1)" ><img src="jimmy.ico" name="image1" border="0" width="32" height="32"></a>
<script language="JavaScript">
</script>
<a href="#" onMouseOut="initial(2)" onMouseOver="changer(2)" ><img src="jimmy.ico" name="image2" border="0" width="32" height="32"></a>
 <script language="JavaScript">
<!--
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
//-->
</script>
<a href="#" onMouseOut="initial(3)" onMouseOver="changer(3)" ><img src="jimmy.ico" name="image3" border="0" width="32" height="32"></a>
<script language="JavaScript">
<!--
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
//-->
</script>
</BODY>
</HTML>

Conclusion :


aidez moi a corriger les bug!!!!
Ajouter un commentaire Commentaires
Messages postés
6
Date d'inscription
mardi 15 mai 2007
Statut
Membre
Dernière intervention
5 juin 2007

la suite, bon c est pas top top ce genre d algo, il faut apres decaler le div en fonction de la position de la souris

je conseil d aller faire un tour sur :
http://www.javascriptfr.com/codes/EFFET-DOCK-MAC-OS-POUR-VOS-MENUS_26334.aspx

on ne fera pas mieux

bon travail quand meme jim333
Messages postés
6
Date d'inscription
mardi 15 mai 2007
Statut
Membre
Dernière intervention
5 juin 2007

<HTML>
<HEAD>

<TITLE>les dock</TITLE>


<script language="JavaScript">
<!--

var largMax=200; // largeur maxi de l'image et test
var hautMax=200; // hauteur maxi de l'image
var largMin=50; // hauteur min de l image pour test

var reduc= new Array();
var maxi = new Array();
var coeff = new Array();


function resize(sel, mode)
{
var obj = document.getElementById('image'+sel); // recup l objet selectionne

if (coeff[sel] == undefined) // init du coeff de depart
coeff[sel] = 4;

switch (mode)
{
case 0: // reduction.
if (obj.width > largMin) // image est plus grande que le mini
{
window.clearTimeout(maxi[sel]); // on arrete l agrandissement

coeff[sel] = coeff[sel]+0.2; // calcul dimension ...
obj.width = Math.round(largMax / coeff[sel]); // ... de la ...
obj.height = Math.round(hautMax / coeff[sel]); // ... prochaine image

reduc[sel]=window.setTimeout('resize('+ sel +',0);',20); // on relance la reduction
}
break;

case 1: // agrandissement
if (obj.width < largMax) // image plus petit que le max
{
window.clearTimeout(reduc[sel]); // on arrete la reduction

coeff[sel] = coeff[sel]-0.2; // calcul dimension ...
obj.width = Math.round(largMax / coeff[sel]); // ... de la ...
obj.height = Math.round(hautMax / coeff[sel]); // ... prochaine image

maxi[sel]=window.setTimeout('resize('+ sel +',1);',20); // on relance l agrandissement
}
break;
}
}

//-->
</script>

</HEAD>



une dock simple pour votre site web

le principe est de sauvegarder grace au javascript:

- le coeff de chaque images : coeff[]

- les fonctions de reduction et d agrandissement de chaques images



puis d arrete l'agrandissement quand on reduit l image

et l inverse pour la reduction



j espere faire un exemple sur mon site perso avec la gestion du bouton de la sourie

a voir dans le future sur http://future.wave.free.fr












</HTML>
Messages postés
6
Date d'inscription
mardi 15 mai 2007
Statut
Membre
Dernière intervention
5 juin 2007

quand je suis tombe sur ce code,
je me suis dit, oui c est une bonne idée mais le code n est vraiment optimisé

donc voila dans le post suivant mes modifs
ca semble bien fonctionner sous firefox

a vous maintenant de l utiliser dans vos pages web
Messages postés
31
Date d'inscription
mardi 26 août 2003
Statut
Membre
Dernière intervention
28 mai 2005

perso c vraiment rendu nul...aun zoom individuel pour chaque img...
Messages postés
12
Date d'inscription
lundi 9 février 2004
Statut
Membre
Dernière intervention
28 août 2005

Tout simplement super!!!!!
Je compte bien integrer votre script sur un de mes projets, si vous avez une version final prevenez moi par mail SVP!

Bonne continuation et bravo !
Afficher les 9 commentaires

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.