begin process at 2012 05 26 05:57:13
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > GENRE Y'Z DOCK OU MYDOCK EN PAGE WEB!!!

GENRE Y'Z DOCK OU MYDOCK EN PAGE WEB!!!


 Information sur la source

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Niveau :Débutant Date de création :27/03/2004 Date de mise à jour :18/04/2004 15:22:38 Vu :5 941
Auteur : jim333

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

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/doc k.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

  • <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> 
<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!!!!


 Sources du même auteur

Source avec Zip IMAGE TOUJOUR EN HAUT
Source avec Zip TEXTE LOOP ET BONDISSANT
Toutes les sources de jim333

 Sources de la même categorie

Source avec Zip Source avec une capture SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Toutes les sources de la catégorie Divers

Commentaires et avis

Commentaire de jim333 le 28/03/2004 01:44:46

commentaire svp

Commentaire de reo21 le 28/03/2004 18:28:01

C pas mal ce petit script mais c'est vrai qu'il y a encore beaucoup de bugs.

Pour le moment, j'ai juste touché la mise en forme des éléments et ca rend mieux graphiquement. Ton grossissement etait trop important et la taille des images n'etait pas coordonnée.
En fait le probleme c'est qu'il faut sortir du survol pour que l'image se réinitialise et que l'effet de loupe soit le mieux fait.

&lt;HEAD&gt;


&lt;script language="JavaScript"&gt;
&lt;!--
var coeff=2;//Coefficient de reduction
var larg=56;//largeur maxi de l'image
var haut=56;//hauteur maxi de l'image
function changer(sel) {
switch(sel){
case 1 : //image 1
if (document.image1.width &lt; 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 &lt; 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 &lt; 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 &gt;= larg) window.clearTimeout(chang);
}
function initial(sel) {
switch(sel){
case 1 : //image 1
if (document.image1.width &gt; larg/2) {
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 &gt; larg/2) {
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 &gt; larg/2) {
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 &lt; larg/2) window.clearTimeout(initi);
}
//--&gt;
&lt;/script&gt;

                                                                                                      
&lt;body topmargin=0&gt;
&lt;table border=0&gt;&lt;tr height=58&gt;&lt;td valign=middle&gt;

&lt;a href="#" onMouseOut="initial(1)" onMouseOver="changer(1)" &gt;&lt;img src="iword.jpg" name="image1" border="0" width="28" height="28"&gt;&lt;/a&gt;
&lt;script language="JavaScript"&gt;
&lt;!--
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
//--&gt;
&lt;/script&gt;

&lt;/td&gt;&lt;td valign=middle&gt;


&lt;a href="#" onMouseOut="initial(2)" onMouseOver="changer(2)" &gt;&lt;img src="iflash.jpg" name="image2" border="0" width="28" height="28"&gt;&lt;/a&gt;
&lt;script language="JavaScript"&gt;
&lt;!--
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
//--&gt;
&lt;/script&gt;

&lt;/td&gt;&lt;td valign=middle&gt;

&lt;a href="#" onMouseOut="initial(3)" onMouseOver="changer(3)" &gt;&lt;img src="iimage.jpg" name="image3" border="0" width="28" height="28"&gt;&lt;/a&gt;
&lt;script language="JavaScript"&gt;
&lt;!--
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
//--&gt;
&lt;/script&gt;

&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;

Commentaire de jim333 le 28/03/2004 22:35:44

merci

Commentaire de jim333 le 09/04/2004 14:46:21

ps la base du code n,etais pas a moi mais je l'ai modifier pis jai enlever quelque bug mais ya a beaucoup!!

Commentaire de ghostahjay le 07/06/2004 20:00:27

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 !

Commentaire de jim333 le 19/12/2005 00:40:08

perso c vraiment rendu nul...aun zoom individuel pour chaque img...

Commentaire de urbanrageisback le 01/06/2007 12:53:30

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

Commentaire de urbanrageisback le 01/06/2007 12:53:46

<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>
<BODY>

<br>une dock simple pour votre site web
<br>le principe est de sauvegarder grace au javascript:
<br> - le coeff de chaque images : coeff[]
<br> - les fonctions de reduction et d agrandissement de chaques images
<br>
<br> puis d arrete l'agrandissement quand on reduit l image
<br> et l inverse pour la reduction
<br>
<br> j espere faire un exemple sur mon site perso avec la gestion du bouton de la sourie
<br> a voir dans le future sur http://future.wave.free.fr

<div id="Bas" style=" position: fixed;  bottom: 0px;  left: 150px; ">
<img src="http://urbanrage.free.fr/images/tux.png" id="image1" border="1" width="50" height="50" onMouseOut="resize(1,0)" onMouseOver="resize(1,1)">
&nbsp;&nbsp;&nbsp;
<img src="http://urbanrage.free.fr/images/tux.png" id="image2" border="1" width="50" height="50" onMouseOut="resize(2,0)" onMouseOver="resize(2,1)">
&nbsp;&nbsp;&nbsp;
<img src="http://urbanrage.free.fr/images/tux.png" id="image3" border="1" width="50" height="50" onMouseOut="resize(3,0)" onMouseOver="resize(3,1)">
</div>

</BODY>
</HTML>

Commentaire de urbanrageisback le 05/06/2007 12:12:27

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

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Frau auf Feld mit Kopfsalat
Photo Sea star and sponges 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,468 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)