begin process at 2012 05 28 14:06:53
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > DE L'OMBRE

DE L'OMBRE


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :ombre, ombrage, boxshadow, texteshadow Niveau :Débutant Date de création :08/04/2010 Date de mise à jour :13/10/2010 17:09:53 Vu / téléchargé :2 034 / 120
Auteur : kazma

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

 Description

Cliquez pour voir la capture en taille normale
le script met une ombre sous forme de class que se deplace selon la position du curseur de la souris

il est compatible ff, chrome safari et opera mais pour ce dernier j'ai eu un petit soucis afin d'y remedier j'ai du rajouter un effet d'ombre dans le css d'une valeur de 1000px c'est peut etre un bug de opera pour finir uncompatible avec ie il faudra attendre ie 9

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <link rel="stylesheet" type="text/css" href="ombre.css"/>
  • <script type="text/javascript" language="JavaScript">
  • var setX;
  • var setY;
  • function souris(s){
  • var dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement;
  • setX =s.clientX + dde.scrollLeft;
  • setY =s.clientY + dde.scrollTop;
  • }
  • function ombra(elem){
  • this.ec=document.getElementById(elem);
  • this.ombre();
  • }
  • ombra.prototype.ombre = function(){
  • var oml=(this.ec.offsetLeft+(parseInt(this.ec.offsetWidth)/2))-setX
  • var omt=(this.ec.offsetTop+(parseInt(this.ec.offsetHeight)/2))-setY
  • if(navigator.vendor){
  • this.ec.style.WebkitBoxShadow=(oml/4+'px '+omt/4+'px 10px #232711');
  • }
  • else if(navigator.userAgent.indexOf('Opera')!=-1){
  • this.ec.style.boxShadow=(oml/4+'px '+omt/4+'px 10px #232711');
  • }
  • else{
  • this.ec.style.MozBoxShadow=(oml/4+'px '+omt/4+'px 10px #232711');
  • }
  • this.ec.style.textShadow=(oml/4+'px '+omt/4+'px 10px #232711');
  • }
  • function init(){
  • omb1=new ombra('e1');
  • omb2=new ombra('e2');
  • omb3=new ombra('e3');
  • omb4=new ombra('e4');
  • omb5=new ombra('e5');
  • document.body.addEventListener("mousemove",function(){omb1.ombre()},false);
  • document.body.addEventListener("mousemove",function(){omb2.ombre()},false);
  • document.body.addEventListener("mousemove",function(){omb3.ombre()},false);
  • document.body.addEventListener("mousemove",function(){omb4.ombre()},false);
  • document.body.addEventListener("mousemove",function(){omb5.ombre()},false);
  • }
  • document.addEventListener("mousemove",souris, false);
  • onload=init;
  • </script>
  • </head>
  • <body>
  • <br><br><br><br>
  • <div id='e1'></div>
  • <div id='e2'></div>
  • <div id='e3'></div>
  • <div id='e4'></div>
  • <span id='e5'>azetergrt</span>
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="ombre.css"/>

<script type="text/javascript" language="JavaScript">

var setX;
var setY;

function souris(s){
var dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement;
setX =s.clientX + dde.scrollLeft;
setY =s.clientY + dde.scrollTop;
}


function ombra(elem){

this.ec=document.getElementById(elem);
this.ombre();
}
ombra.prototype.ombre = function(){

var oml=(this.ec.offsetLeft+(parseInt(this.ec.offsetWidth)/2))-setX
var omt=(this.ec.offsetTop+(parseInt(this.ec.offsetHeight)/2))-setY
if(navigator.vendor){
this.ec.style.WebkitBoxShadow=(oml/4+'px '+omt/4+'px 10px #232711');
}
else if(navigator.userAgent.indexOf('Opera')!=-1){
this.ec.style.boxShadow=(oml/4+'px '+omt/4+'px 10px #232711');
}
else{
this.ec.style.MozBoxShadow=(oml/4+'px '+omt/4+'px 10px #232711');
}
this.ec.style.textShadow=(oml/4+'px '+omt/4+'px 10px #232711');
}

function init(){
omb1=new ombra('e1');
omb2=new ombra('e2');
omb3=new ombra('e3');
omb4=new ombra('e4');
omb5=new ombra('e5');

document.body.addEventListener("mousemove",function(){omb1.ombre()},false);
document.body.addEventListener("mousemove",function(){omb2.ombre()},false);
document.body.addEventListener("mousemove",function(){omb3.ombre()},false);
document.body.addEventListener("mousemove",function(){omb4.ombre()},false);
document.body.addEventListener("mousemove",function(){omb5.ombre()},false);
}
document.addEventListener("mousemove",souris, false);
onload=init;

</script>
</head>
<body>
<br><br><br><br>
<div id='e1'></div>
<div id='e2'></div>
<div id='e3'></div>
<div id='e4'></div>
<span id='e5'>azetergrt</span>

</body>
</html>

 Conclusion

a suivre

 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


 Historique

08 avril 2010 22:17:05 :
rzemplacement de document.body par document.documentElement
10 avril 2010 11:15:11 :
petite modif
13 octobre 2010 17:09:53 :
mise a jour chrome

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

Commentaires et avis

Commentaire de jdmcreator le 09/04/2010 01:43:06

Bonjour,

addEventListener est-il compatible avec IE ?

Commentaire de jdmcreator le 09/04/2010 01:44:43

il me semble que le CSS FILTER avec comme attribut glow (mais c'est + compliqué que cela, ça vaut une recherche) existe

Commentaire de jdmcreator le 09/04/2010 01:48:47

À voir ici : http://www.fred.net/dhark/demos/css/css_filter_examples.html

Commentaire de kazma le 09/04/2010 09:57:15 administrateur CS

oui apparement c'est possible avec les filtres mais a ce que j'en ai lu il vaut mieux abandonner trop galere pour un resutat mitige apparement

au sujet de addEventListener c'est inutile vu que c'est incompatible avec ie par contre pour ie 9 addEventListener sera pris en charge, il etait temp.

Commentaire de lhapaipai le 09/04/2010 22:13:45

Bonjour, super intéressant ton code !!
Je ne comprends pas la ligne 20 : this.ombre();
A quoi sert-elle ?
Merci beaucoup

Commentaire de kazma le 10/04/2010 11:06:40 administrateur CS

elle peut etre retire normalement sa fait en sorte que le script se declenche des que la foncton init a ete lance mais la elle ne sert a rien je vais la retirer

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Ajouter une ombre a un tableau [ par maxroucool ] slt,je ne sais pas si c'est du javascript mais bon je pose quand meme ma question:comment puis-je faire pour ajouter une ombre a un tableau?Merki! Ombre sur une cellule [ par sbertho ] Est-il possible de faire appara&#238;tre une ombre sur une cellule en Javascript ? Si oui comment ? Peut-&#234;tre avec shadow ? Quelqu'un aurait-il u


Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

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,889 sec (4)

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)