begin process at 2010 02 09 21:20:23
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > A TOUS LES FANS DE MACOS X, UN DOCK SUR VOTRE SITE ?

A TOUS LES FANS DE MACOS X, UN DOCK SUR VOTRE SITE ?


 Information sur la source

Note :
10 / 10 - par 4 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Initié Date de création :05/01/2004 Date de mise à jour :08/01/2004 16:49:08 Vu / téléchargé :8 693 / 947
Auteur : AmigaINC

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

 Description

Cliquez pour voir la capture en taille normale
Ce code est un script JavaScript qui permet d'afficher des images en bas du site et de les faire grandir au pasage de la souris, comme sur MacOS X.

Mon site a été refait ainsi, vous le trouverez à cette adresse (point encore fini) :

http://membres.lycos.fr/miouzicandco/MacOSX/accu eil.htm

Il y a aussi :
- un afficheur de liste avec animation sur une sinusoïde (fan de chichourle !)
- des jeux de dégradés,
- etc.


 Conclusion

Fonctionne bien sous IE 6, à tester sur d'autres navigateurs et autres plates-formes ;-) !!!
Mon exemple nécessite un écran en 1024*768, mais tout s'adapte !

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture JEU D'ÉCHECS 3D ET ISO
Toutes les sources de AmigaINC

 Sources de la même categorie

Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx
Source avec Zip Source avec une capture [DSI] DÉPLACEMENTS SUR IMAGES par Bul3
Source avec Zip Source avec une capture [ZI] ZOOM (LOUPE) SUR IMAGE par Bul3
Toutes les sources de la catégorie Effets

Commentaires et avis

Commentaire de marcel1307 le 09/01/2004 23:12:02

Salut!! Je trouve cette idée vraiment parfaite et très jolie. Mais le truc c que tu donne ton site entier pas le code... Pourrais tu ne donner que le code de cette barre de menu stp et comment le mettre en 800/600. Merci bcp @+

Commentaire de AmigaINC le 10/01/2004 14:19:58

Voici quelques détails sur le code :
- 3 tableaux d'une seule cellule :
  - 1 général qui fait toute la page (pour aligner en bas)
  - 1 en bas qui servira de capteur d'évènement pour la souris
  - 1 réduit au max qui contiendra les images (avec une ID)

Les images ont une ID "Icon"+n° incrémentiel.

Le code :

<script languaue="JavaScript">

baseX=0; // capteurs d'évènement
baseY=0;
deltaX=0;
deltaY=0;

var NbImg=4; // nombre d'images
var ImgWid=60;   // taille initiale
var ImgSiz=40;  // taille d'agrandissement (ici on aura des images de 60+40 pixels)

var Tab=new Array(NbImg);

function SuperMove()
{

CalcWidths();
}

function CalcWidths()
{
var i=0;
var iWid=0;
var iTest=0;

baseX=window.event.x;
// baseY=window.event.y;

// if (baseX%5!=0) return;

for(i=0;i<NbImg;i++)
{
iTest=ImgWid+Math.round(ImgSiz*(Math.cos(((baseX-(Tab[i]+((ImgWid+4)/2)))/ImgWid)+(Math.PI/(Tab[i]/(ImgWid+4))))));
if ((Tab[i]+(ImgWid/2+2)<baseX-(ImgWid+15)) || (Tab[i]+(ImgWid/2+2)>baseX+(ImgWid+30)) || (iTest<ImgWid) )
{
eval("Icon"+(i+1)+".width=ImgWid");
eval("Icon"+(i+1)+".height=ImgWid");
}
else
{ iWid=Math.round(ImgSiz*(Math.cos(((baseX-(Tab[i]+((ImgWid+4)/2)))/ImgWid)+(Math.PI/(Tab[i]/(ImgWid+4))))),0);
eval("Icon"+(i+1)+".width=ImgWid+iWid");
eval("Icon"+(i+1)+".height=Icon"+(i+1)+".width");

}
}


}

function ResetWidths()
{
var i=0;

baseX=window.event.x;

for(i=0;i<NbImg;i++)
{
eval("Icon"+(i+1)+".width=ImgWid");
eval("Icon"+(i+1)+".height=ImgWid");
// eval("Icon"+(i+1)+".style.filter='blur(strength=3,add=0)'");
}


}

function Demar()
{
var i=0;
var j=0;

j=(screen.width-(NbImg*(ImgWid+4)))/2;

for(i=0;i<NbImg;i++)
Tab[i]=j+(i*(ImgWid+4));


}

</script>

<BODY onLoad="Demar();" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0>

<table width="100%" height="100%" border=0 background="macos.gif" callpadding=0 cellspacing=0>
<TR>
<TD valign="Bottom">

<SPAN onMouseMove="SuperMove()" ID=MacOSX>
<center>
<table width="100%" border=0><tr><td align="center" callpadding=0 cellspacing=0>
<table border=0 background="" callpadding=0 cellspacing=0>
<tr>
<td align="center" valign="bottom">
<a href="#"><IMG ID=Icon1 SRC="finder_aqua.gif" border=0 width="60" height="60"></a>
<a href="#" ><IMG ID=Icon2 SRC="musique_aqua.gif" border=0 width="60" height="60"></a>
<a href="#" ><IMG ID=Icon3 SRC="monde_aqua.gif" border=0 width="60" height="60"></a>
<a href="#"><IMG ID=Icon4 SRC="mail_aqua.gif" border=0 width="60" height="60"></a>
</td>
</tr>
</table>
</td></tr></table>
</center>
</SPAN>

</TD>
</TR>
</TABLE>

</BODY>

Les images que j'ai utilisés sont dans le zip...
Si j'ai oublié quelque chose, dites-le moi !!! ;-)

Commentaire de jim333 le 01/04/2004 02:22:45

ouais tres bien !

__________________

trés biens meme !
ouaia ouais tres tres bien!
c'est cela que je cherchais!


_________________________

Commentaire de frostie le 14/04/2004 17:38:03

Bravo pour ton dock, beaucoup de personnes essaye d'imiter ce menu mais rares sont ceux qui arrivent a un rendu de cette qualite ^^.

Commentaire de frostie le 14/04/2004 18:05:13

Il me semble qu'il te manque un (tout) pti truc :

<SPAN
OnMouseMove="SuperMove()"
OnMouseOut="ResetWidths()"
ID=MacOSX>

C'etait la remarque de l'inspecteur des traveaux finis ;)

Commentaire de AmigaINC le 15/04/2004 17:40:27

Merci pour cette remarque, elle sera prise en compte pour mon site ;-).

Au plaisir d'achanger de nouvelles sources avec vous tous !

Aurélien

Commentaire de Pentium4 le 11/08/2004 03:32:04

Excellent

Commentaire de GilDev1 le 25/05/2006 12:48:48

Sa marche pas

Commentaire de bobabar le 24/09/2009 16:37:54

L'animation du dock ne fonctionne chez moi sur AUCUN de ces 3 navigateurs : FF 3.5, IE 6 et Chrome 3.

Je ne suis pas un pro de javascript mais la console d'erreur de FF donne "window.event is undefined" à propos de la ligne 84 de accueil.html :

baseX=window.event.x;

Je laisse donc le 5/10 par défaut, je pense qu'il y a un truc à faire pour que cela fonctionne à la vue des autres commentaires !

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Console Nintendo DS Lite Rouge
Entre 137€ et 160€

Visiter le guide achat

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
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,515 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)