Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :
Publié dans : Effets d'Images et diaporamas - Tous blogs
Je cherchais une solution depuis quelques temps et j'ai trouvé le lien chez Geekeries
Voici un exemple : survolez l'image avec la souris
Ce programme est proposé par Coda PopUp Bubbles
Première étape :
Il vous faut tout d'abord le programme jquery.js. Pour cela :
Deuxième étape :
Dans l'administration de votre blog, Documents , Autres Fichiers :
Vous créez les encadrements de ce pop up :
En HTML, lors de la création de ce pop-up, vous collez
Vous remplacez en rouge par les adresses de vos images (3ème étape)
Vous collez ensuite toujours en HTML
Vous remplacez en bleu l'adresse de votre fichier jquery.js (2ème étape).
En enfin, la conception de votre pop up, toujours en HTML
En vert, l'adresse de votre image qui apparaîtra sur le blog
En violet, le message qui apparaîtra dans le pop up : <br /> représente un saut de ligne.
Il est possible de faire des infobulles plus rudimentaires sans javascript : Créer un infobulle
Voici un exemple : survolez l'image avec la souris
Ce programme est proposé par Coda PopUp Bubbles
Première étape :
Il vous faut tout d'abord le programme jquery.js. Pour cela :
- rendez-vous sur Jquery,
- cliquez sur Download jQuery 1.2.6 (16kb, Minified and Gzipped) Great for production use.
Deuxième étape :
Dans l'administration de votre blog, Documents , Autres Fichiers :
- créez un répertoire nommé Coda
- vous y enregistrez le fichier jQuery 1.2.6
- vous notez son adresse
Vous créez les encadrements de ce pop up :
- soit en copiant/collant ceux-là (clic droit la souris, sauvegarder sous...)
 19px*15px - bubble-1.png |
 5px*15px - bubble-2.png |
 19*15px - bubble-3.png |
 19px*15px - bubble-4.png |
|
 19px*5px - bubble-5.png |
 19px*29px - bubble-6.png |
 4px*29px - bubble-7.png |
 19px*29px - bubble-8.png |
- soit en les concevant avec un logiciel de dessin en respectant les dimensions
- Vous sauvegardez ces images en conservant leur nom (bubble-1.png, etc...)
En HTML, lors de la création de ce pop-up, vous collez
<style type="text/css" media="screen">
.bubbleInfo { position: relative;top: 150px; left: 100px; width: auto;}
.trigger { position: absolute; }
.popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; }
.popup td.corner { height: 15px; width: 19px; }
.popup td#topleft { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-1.png);background-repeat:no-repeat; }
.popup td.top { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-2.png);background-repeat:repeat-x; }
.popup td#topright { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-3.png);background-repeat:no-repeat; }
.popup td.left { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-4.png);background-repeat:repeat-y; }
.popup td.right { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-5.png);background-repeat:repeat-y; }
.popup td#bottomleft { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-6.png); background-repeat:no-repeat;}
.popup td.bottom { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-7.png); background-repeat:repeat-x;}
.popup td#bottomright { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-8.png); background-repeat:no-repeat;}
.popup table.popup-contents { font-size: 12px; line-height: 1.2em; background-color: #fff; color: #666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; }
</style>
.bubbleInfo { position: relative;top: 150px; left: 100px; width: auto;}
.trigger { position: absolute; }
.popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; }
.popup td.corner { height: 15px; width: 19px; }
.popup td#topleft { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-1.png);background-repeat:no-repeat; }
.popup td.top { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-2.png);background-repeat:repeat-x; }
.popup td#topright { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-3.png);background-repeat:no-repeat; }
.popup td.left { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-4.png);background-repeat:repeat-y; }
.popup td.right { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-5.png);background-repeat:repeat-y; }
.popup td#bottomleft { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-6.png); background-repeat:no-repeat;}
.popup td.bottom { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-7.png); background-repeat:repeat-x;}
.popup td#bottomright { background-image: url(http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/bubble-8.png); background-repeat:no-repeat;}
.popup table.popup-contents { font-size: 12px; line-height: 1.2em; background-color: #fff; color: #666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; }
</style>
Vous remplacez en rouge par les adresses de vos images (3ème étape)
Vous collez ensuite toujours en HTML
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -90,
left: -33,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
</script>
<script type="text/javascript"><!--
$(function () {
$('.bubbleInfo').each(function () {
var distance = 10;
var time = 250;
var hideDelay = 500;
var hideDelayTimer = null;
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var info = $('.popup', this).css('opacity', 0);
$([trigger.get(0), info.get(0)]).mouseover(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
// don't trigger the animation again
return;
} else {
// reset position of info box
beingShown = true;
info.css({
top: -90,
left: -33,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
info.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
info.css('display', 'none');
});
}, hideDelay);
return false;
});
});
});
</script>
Vous remplacez en bleu l'adresse de votre fichier jquery.js (2ème étape).
En enfin, la conception de votre pop up, toujours en HTML
<div class="bubbleInfo">
<div><img class="trigger" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/an10.JPG" /></div>
<table id="dpop" class="popup" border="0">
<tbody>
<tr>
<td id="topleft" class="corner"> </td>
<td class="top"> </td>
<td id="topright" class="corner"> </td>
</tr>
<tr>
<td class="left"> </td>
<td class="popup-contents">Les Ficelles d'Anna K<br /> Aide pour créer et personnaliser un blog</td>
<td class="right"> </td>
</tr>
<tr>
<td id="bottomleft" class="corner"> </td>
<td class="bottom"> </td>
<td id="bottomright" class="corner"> </td>
</tr>
</tbody>
</table>
</div>
<div><img class="trigger" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/an10.JPG" /></div>
<table id="dpop" class="popup" border="0">
<tbody>
<tr>
<td id="topleft" class="corner"> </td>
<td class="top"> </td>
<td id="topright" class="corner"> </td>
</tr>
<tr>
<td class="left"> </td>
<td class="popup-contents">Les Ficelles d'Anna K<br /> Aide pour créer et personnaliser un blog</td>
<td class="right"> </td>
</tr>
<tr>
<td id="bottomleft" class="corner"> </td>
<td class="bottom"> </td>
<td id="bottomright" class="corner"> </td>
</tr>
</tbody>
</table>
</div>
En vert, l'adresse de votre image qui apparaîtra sur le blog
En violet, le message qui apparaîtra dans le pop up : <br /> représente un saut de ligne.
Il est possible de faire des infobulles plus rudimentaires sans javascript : Créer un infobulle
MàJ:Janvier 2009
Commentaires
Présentation
: Les ficelles d Anna K.
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
: 26/06/2006
: Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur
Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de
design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer
de la musique, des gadgets, des compteurs, des astuces de référencement...
Recherche Rapide Sur le Site
Sommaires
Sommaires Pour les Blogs OverBlog
- Premiers pas en V2
- Gestion quotidienne
- Ecritures dans les modules
- Ecritures dans les articles et pages
- Ecritures dans les fenêtres et albums photos
- Modifier les Fonds
- Placer des images
- Ajouter, déplacer ou masquer
- Design complet et Idées de Mise en page
- Aspect des Ascenseurs, Puces et Curseurs
- Cadres,lignes et bordures
- Effets d'Ecriture et de Texte
- Effets d'images et Diaporamas
- Créer et transformer des Images
- Placer des documents
- Musique, son, vidéo et télé
- Cadres, tableaux, lignes
- Liens, listes et menus
- Interactivité et gadgets
- Indicateurs,compteurs et Protection
- référencement, communautés et flux RSS
Dernières Astuces
- Ouvrir un texte au clic de la souris
- Fonction Lire la suite
- Espacer les lettres des mots dans un article
- Espacer les lettres de tous les mots de votre blog
- Souligner un mot ou une phrase en pointillé
- Changer plusieurs fois la couleur des liens au survol de la souris - Privilège
- Créer des infobulles avec Prototip - Privilège
- Créer un pop up avec message
- Changer un texte au passage de la souris
- Créer des textes animés en flash
Commentaires
-
10/07/2009 18:39:13Créer votre signature manuscriteCerise violette
-
09/07/2009 22:19:44Date au-dessus du titre de l'articlesaygomodo
-
09/07/2009 21:31:47Espacer les lettres des mots dans un articlechaton
-
09/07/2009 15:38:10Changer plusieurs fois la couleur des liens au survol de la souris - PrivilègeMystik-Angel
-
09/07/2009 15:37:15Espacer les lettres des mots dans un articleMystik-Angel
Publicité
Coin Films
Coin Jeux Vidéos
Coin Loisirs Exterieurs
| Articles les plus populaires | L'Univers des Ficelles |
|
|
Mais je peux dire que Annak couleur google Style - C'est bien nice!
J'ai loupé une étape dans l'article ?
Sinon sous Safari, j'ai quelques problèmes avec l'infobulle, il y a un petit espace blanc entre les différentes images...
C'est déjà si compliqué d'avoir un rendu convenable IE et FF