Rotation d'une image
Rédigé par smorge - 17 avril 2012
Code
Faire pivoter une image à 360° lors du survol du curseur :
CSS
.image {
width : 100px;
height : 100px;
-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;
}
.image:hover {
-moz-transform : rotate(360deg);
-webkit-transform : rotate(360deg);
-o-transform : rotate(360deg);
-ms-transform : rotate(360deg);
transform : rotate(360deg);
-webkit-transform-style : preserve-3d;
-webkit-backface-visibility : hidden;
}
HTML
<div class="logo"><img src="image.png" width="100" height="100" alt=""></div>
Classé dans : bloc-note - Mots clés : css - aucun commentaire
Redirection mobile
Rédigé par smorge - 11 avril 2012
Code
Utiliser PHP pour détecter la visite d'un navigateur mobile et le renvoyer automatiquement vers un repertoire déterminé :
Classé dans : bloc-note - Mots clés : php - aucun commentaire
Infos visiteurs
Rédigé par smorge - 10 avril 2012
Code
Le script suivant permet d'afficher à l'écran quelques informations transmises involontairement par le visiteur d'une page web : type de navigateur, système d'exploitation, nombre de pages dans l'historique du navigateur, résolution d'écran.
Dans le head
<script type="text/javascript" language="javascript">
NavName = navigator.appName;
NavVers = navigator.appVersion;
Nav = NavName + " " + NavVers;
</script>
Dans le body
<script type="text/javascript">
document.write("Navigateur : ");
document.write("<b>", Nav,"</b><br>");
document.write("Système d'exploitation : ");
document.write("<b>", navigator.platform,"</b><br>");
document.write("Pages dans votre historique : ");
document.write("<b>", history.length,"</b><br>");
document.write("Résolution d'écran : ");
document.write("<b>",screen.width," x ",screen.height,"</b><br>");
</script>
Classé dans : bloc-note - Mots clés : javascript - aucun commentaire
Cacher ou montrer une DIV
Rédigé par smorge - 08 avril 2012
Code
Faire apparaître ou disparaître un élément en un seul clic c'est facile en plaçant les scripts suivant entre les balises <head></head> de la page, puis en ajustant le HTML et le CSS à partir de l'exemple suivant :
Le Javascript
<script language="javascript" type="text/javascript">
function disparition()
{
if(document.getElementById)
document.getElementById("bloc").style.display = 'none'
}
</script>
<script language="javascript" type="text/javascript">
function afficher()
{
if(document.getElementById)
document.getElementById("bloc").style.display = 'block'
}
</script>
Le CSS
#bloc {
display : none;
}
Le HTML
<div id="bloc"></div>
<a href="#" onClick='disparition();return(false)'>Fermer</a>
<a href="#" onClick='afficher();return(false)'>Afficher</a>
Classé dans : bloc-note - Mots clés : javascript - aucun commentaire
Lien en pop-up
Rédigé par smorge - 01 avril 2012
CODE
La forme du lien ci-dessous permet d'ouvrir une page du site, ou une adresse externe, sous la forme d'un Pop-Up de dimension et de position déterminée. Pratique mais à utiliser avec modération et de façon justifiée, pour atténuer le caractère intrusif de ce type de lien qui est souvent perçu comme agressif par l'internaute.
Javascript
<a onclick="window.open('http://www.example.com','','width=600,height=300,left='+((screen.width-800)/2)+',top='+((screen.height-600)/2)+',scrollbars=yes');" href="javascript:;" rel="nofollow" title="Exemple de pop-up">example.com</a>
Exemple
➥ Un coup d'œil sur example.com ?
Classé dans : bloc-note - Mots clés : javascript - aucun commentaire
