Cet article a été transféré sur les Nouvelles Ficelles d'Anna K
Cet article a été transféré sur les Nouvelles Ficelles d'Anna K
En règle générale, s'il y a un ascenseur, c'est que le contenu du module est plus large que le contenant.
Mais, il peut arriver que le contenant soit entièrement visible et pourtant un tout petit ascenseur s'est créé, très inesthétique. On peut donc le supprimer.
Ainsi, j'avais un ascenseur horizontal dans le module Pub, que l'on ne voyait que sous FF.
Ce module était placé dans la colonne de gauche. J'ai donc rajouté la ligne suivante dans le CSS global :
Pour la colonne de droite :
Vous copiez ce code. Vous le personnalisez en mettant l'adresse de votre propre image (en rouge) et le lien de destination en vert.
J'ai pris la 1ère image qui me tombait sous la main, mais il peut être sympa d'en créer une avec écrit la destination.
Dans ce cas précis, l'image amène vers la déco d'Annak. en cliquant dessus.
Vous collez ensuite ce code dans l'article de la page où vous voulez voir apparaître cette image-lien
<body onload="chargement(null)"><a href='#' onclick='redirigerObjet(); return false;' id='objetLien'><img src=' http://idata.over-blog.com/0/37/17/67/articles/oeuf1.jpg id='objetImage' style='position: absolute; z-index: 10;'/></a> '
<script type='text/javascript'>
var x1 = xObjet();
var y1 = yObjet();
var x2;
var y2;
createXObjet();
createYObjet();
var direction = (y2 - y1) / (x2 - x1);
var ordonnee = y1 - direction * x1;
var xc = x1;
var yc = y1;
var vitesse = 4.5;
function xObjet() {
return Math.floor(Math.random() * (screen.width - 250));
}
function yObjet() {
return Math.floor(Math.random() * (screen.height - 250));
}
function createXObjet() {
do {
x2 = xObjet();
} while(Math.abs(x2 - x1) < 50);
}
function createYObjet() {
do {
y2 = yObjet();
} while(Math.abs(y2 - y1) < 50);
}
function redirigerObjet() {
var objet = document.getElementById('objetLien');
if(objet.display != 'none') {
objet.display = 'none';
document.location.href = 'http://decoannak.over-blog.fr'; }
}
function deplacerObjet() {
if(xc == x2 && yc == y2) {
x1 = x2;
y1 = y2;
createXObjet();
createYObjet();
direction = (y2 - y1) / (x2 - x1);
ordonnee = y1 - direction * x1;
xc = x1;
yc = y1;
}
if(x2 > x1) {
xc += vitesse;
if(xc > x2) {
xc = x2;
}
} else {
xc -= vitesse;
if(xc < x2) {
xc = x2;
}
}
yc = Math.round(ordonnee + direction * xc);
var objet = document.getElementById('objetImage');
objet.style.left = xc + 'px';
objet.style.top = yc + 'px';
}
setInterval('deplacerObjet()', 10);
</script>
MàJ : Janvier 2009
cet article a été transféré sur les nouvelles ficelles d'Anna K
Une boîte à message est, en fait, un chat de grandes dimensions.
Sur Chatango.com, il suffit de vous inscrire ("sign up"), c'est gratuit.
Une fois votre compte créé, cliquez sur "Add a new chat group on your web page".
Etape 1 : Vous devez nommer votre boîte à messages puis lui donner une URL (adresse), qui sera automatiquement suivi de ".chatango.com". Le tableau en dessous vous permet de définir l'aspect de la fenêtre dans laquelle il apparaîtra sur votre blog. Vous choisissez d'abord sa taille, la taille de la police, puis les couleurs (à chaque modification, la fenêtre à droite vous donne en temps réel l'aspect qu'aura votre fenêtre).
Etape 2 : copiez le code fourni et coller le dans le mode source/HTML, là où vous voulez que soit affiché votre boîte.
Exemple de code :
Important : dans le dernier cadre, l'adresse URL de votre forum vous est redonnée. Notez la bien pour pouvoir la fournir en lien à vos amis.
Un exemple :
Dans le CSS, vous rajoutez toute la ligne
padding-top:55px; est la marge du haut que l'on a donc augmenté pour placer l'image. Jouez avec le nombre de px.
Cet article a été transféré sur les Nouvelles Ficelles d'Anna K
Si vous désirez que chacune de ces 2 parties ait un design particulier
Vous rajoutez dans le CSS la ligne
Elle concerne les 2 rectangles.
Mais vous allez y faire les modifications du 1er rectangle - celui de saisie - en rajoutant la couleur d'écriture, de fond, la longueur, la largeur...
Pour le design du 2nd rectangle - celui où il y a écrit Recherche - vous allez rajouter dans le CSS la ligne
Dans mon exemple :
Pour le 1er rectangle, j'ai
Ces modifications sont apparus sur les 2 rectangles, j'ai alors décidé, pour le 2nd rectangle, de
TEMPLATES FOR OVER-BLOG : des designs prêts à l'emploi
