<a href="URL DU LIEN" target="_blank" title="INFOBULLE DU LIEN">NOM DU LIEN</a>Vous personnalisez ce qui est en rouge et le collez en HTML.
<a href="http://les-nouvelles-ficelles-d-annak.blogspot.com/" target="_blank" title="Aide pour créer et personnaliser un blog">Les nouvelles ficelles d'Annak.</a>devient
 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 |
<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>
<script src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/coda/jquery-1.2.6.min.js" type="text/javascript"></script>Vous remplacez ce qui est en bleu par l'adresse de votre fichier jquery.js (2ème étape).
<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>
<div class="bubbleInfo">En vert, l'adresse de votre image qui apparaîtra sur le blog
<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>
<IMG height=60 title="votre texte" alt="votre texte" src="http://Adresse image" width=60 height=60>Vous inscrivez votre texte en rouge, l'adresse de votre image en bleu et les dimensions de l'image en vert (width:la largeur - height:la hauteur)
<IMG height=60 title="Ceci est un oeuf Fabergé" alt="Ceci est un oeuf Fabergé" src="http://fdata.over-blog.com/0/37/17/67/thumbs/articles/oeuf1.jpg" width=60>et le résultat à l'affichage :
<link href="http://ddata.over-blog.com/xxxyyy/0/37/17/67/prototip/css/prototip.css" type="text/css" rel="stylesheet" />
<script src='http://ddata.over-blog.com/xxxyyy/0/37/17/67/prototip/js/prototype.js' type='text/javascript'>
</script><script type='text/javascript' src='http://ddata.over-blog.com/xxxyyy/0/37/17/67/prototip/js/prototip.js'>
<div id="tip1">Exemple 1</div>Vous noterez la concordance tip1 <---> box1
<script type="text/javascript" language="javascript">
new Tip('tip1', 'Simple tooltip');
new Tip('box1', "hook: { target: 'topLeft', tip: 'bottomRight'}", {title: 'hooking', className: 'pinktip', hook:{target: 'topLeft', tip: 'bottomRight'},
offset: {x:0,y:0} });</script>
<div id='tip2'>2 : Add a title</div>puis en remplaçant (en respectant les numéros)
<div id='tip3'>3 : Add offset</div>
<div id='tip4'>4 : Fixed positioning</div>
<div id='tip5'>5 : A different target</div>
<div id='tip6'>6 : Hooking!</div>
<div id='tip7'>7 : HTML</div
<div id='tip8'>8 : Effects!</div>
<div id='tip9'>9 : More effects</div>
<div id='tip10'>10 : Update</div> « <a href='javascript:;' onclick='updateExampleTip("pinktip", "Usefull when you want to update your tooltips with
Ajax");'>1</a> | <a href='javascript:;' onclick='updateExampleTip("darktip", "Or if you just want to give them a new style.");'>2</a> | <a href='javascript:;'
onclick='updateExampleTip("default", "Just call newTip() again on the element to update it’s tooltip");'>3</a>
<div id='tip11'>11 : Delay (500ms)</div>
<div id='tip12'>12 : Click me!</div>
<div id='tip13'>13 : Links</div>
<div id='tip14'>14 : Toggle (click)</div>
<div id='tip15'>15 : Style with CSS</div>
<div id='tip16'>16 : Element as tooltip</div>
<div id='tip17'>17 : Auto hide</div>
<div id='tip18'>18 : Stay within the viewport</div>
new Tip('tip1', 'Simple tooltip');
new Tip('tip2', 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.', {title : 'Lorem Ipsum'});
new Tip('tip3', 'offset {x:60,y:-100}', {title: 'Tooltip with offset', className: 'darktip', offset: {x:60, y:-100}});
new Tip('tip4', 'Fixed tooltip', { fixed: true, offset: { x: 0, y:18 } });
new Tip('tip5', 'Instead of putting the tooltip on the element you are hovering, you can target a different element.', { className: 'darktip', title: 'This tooltip has
"11" as target.', target: 'tip11', offset: {x:0,y:0}});
new Tip('tip6', 'This tooltip hooks to the top right corner of this element.<br/> You can do a lot more with hooking, read below.', { className: 'pinktip', title:
'hooking', hook: {tip: 'bottomLeft', target: 'topRight'}});
new Tip('tip7', 'You can use html within a tooltip. <br/><strong>Go </strong><span style="text-decoration:
line-through;">crazy</span><br/><br/><img src="images/demo_flower.gif" alt=""/>', {title: 'HTML', className: 'darktip'});
new Tip('tip8', 'This tooltip uses "appear"', { className: 'pinktip', title: 'Show your tooltips with Scriptaculous effects!', effect: 'appear', hook:
{target: 'topRight', tip: 'bottomLeft'}});
new Tip('tip9', 'This tooltip uses the "blind" effect.', { title: 'more effects', className: 'darktip', effect: 'blind', hook: {target: 'topRight', tip:
'bottomLeft'}});
new Tip('tip10', 'Click any of the links on the right, 1, 2, 3 to update this tooltip.', {title : 'Update existing tooltips'});
new Tip('tip11', 'This tooltip opens with a 500ms delay.<br/><br/>By default all tooltips open with a short delay, so you can mouseover your page safely without
opening up tooltips right away.', {title : 'Delay', className: 'darktip', delay: 0.5});
new Tip('tip12', 'You have complete control over the way you open and <a href="javascript:;" class="close">close</a> tooltips.', {title : 'More control', className:
'pinktip', showOn: 'click', hideOn: {element: '.close', event: 'click'}, closeButton: true});
new Tip('tip13', Projects.getTipContent('starbox'), { className: 'ideaTip', effect: 'blind', hook: { tip: 'bottomLeft', target: 'topRight' }, hideOn: false, hideAfter: 1.5,
offset: { x: 5, y: 5 }});
new Tip('tip14', 'This tooltip will hide itself when you click the link again.', {title : 'Toggle tooltips', className: 'pinktip', showOn: 'click', hideOn: 'click',
closeButton: true});
new Tip('tip15', 'Everything you need to customize your tooltips can be done through CSS. Even the close buttons can be styled with a mouseover state.', {title : 'Style your
tooltips', className: 'protoClassic', showOn: 'mousemove', hideOn: {element: 'closeButton', event: 'click' }});var supportClone = $('donate').cloneNode(true);
supportClone.insert({ top: '<p>Instead of using a string for the content, you can insert an element created through to DOM. The content inserted into this tooltip is a
clone of the support message.<strong/><p/>' });
new Tip('tip16', supportClone, { title : 'Element as tooltip', hideOn: { element: 'tip', event: 'mouseout'}, hideAfter: 1.5, effect: 'appear', hook: { tip: 'topLeft', target:
'bottomLeft'}, offset: { x: 0, y: 5 }, className: 'pinktip'});
new Tip('tip17', 'This tooltip will automatically hide after a two seconds of inactivity. That means, when you are not on the tooltip itself or on the element that opened the
tooltip.', { title : 'Auto hide', hideOn: false, hideAfter: 2, hook: { tip: 'topRight', target: 'topLeft'}, offset: { x: -5, y: 0 }});
new Tip('tip18', '<p>By default, all tooltips will stay within the viewport. When you resize your browser window you can notice it on this
tooltip.</p><p>Tooltips that use hooking or have a fixed position will not stay within the viewport. Prototip assumes that you know what you want when you use those
options.</p>', { title : 'Stay within the viewport', className: 'darktip' });
new Tip('box1', "hook: { target: 'topLeft', tip: 'bottomRight'}", {title: 'hooking', className: 'pinktip', hook:{target: 'topLeft', tip: 'bottomRight'},
offset: {x:0,y:0} });
new Tip('box1', "hook: { target: 'topLeft', tip: 'bottomRight'}", {title: 'hooking', className: 'pinktip', hook:{target: 'topLeft', tip: 'bottomRight'}, offset: {x:0,y:0} });
new Tip('box2', "hook: {target: 'topLeft', tip: 'bottomRight'},<br/> offset{x:0, y-10}", {title: 'hooking with offset', className: 'pinktip', hook:{target: 'topLeft',
tip: 'bottomRight'}, offset: {x:0,y:-10} });
new Tip('box3', "hook: {target: 'topRight', tip: 'bottomLeft'}", {title: 'hooking', className: 'pinktip', hook: {target: 'topRight', tip: 'bottomLeft'}, offset: {x:0,y:0}
});
new Tip('box4', "hook: {target: 'topLeft', tip: 'topRight'}, <br/>offset: {x: -5, y: 0}", {title: 'hooking with x-offset',className: 'pinktip', hook:{target:
'topLeft', tip: 'topRight'}, offset: {x:-5,y:0} });
new Tip('box5', "target: 'box1', <br/>hook: {target: 'topLeft', tip 'bottomRight'}", {title: 'target box1 instead', className: 'pinktip', target: 'box1', hook:{target:
'topLeft', tip: 'bottomRight'}, offset: {x:0,y:0} });
new Tip('box6', "hook: {target: 'topRight', tip: 'topLeft'}, <br/>offset: {x: 5px, y: 0}", {title: 'hooking with x-offset', className: 'pinktip', hook:{target:
'topRight', tip: 'topLeft'}, offset: {x:5,y:0}, viewport: true });
new Tip('box7', "hook: {target: 'bottomLeft', tip: 'topRight'}", {title: 'hooking', className: 'pinktip', hook:{target: 'bottomLeft', tip: 'topRight'}, offset: {x:0,y:0}
});
new Tip('box8', "hook: {target: 'bottomLeft', tip: 'topLeft'},<br/> offset: {x: 0, y: 5}", {title: 'hooking with y-offset', className: 'pinktip', hook:{target:
'bottomLeft', tip: 'topLeft'}, offset: {x:0,y:5} });
new Tip('box9', "hook: {target: 'bottomRight', tip: 'topLeft'},<br/> offset: {x: 5, y: 5}", {title: 'hooking with x and y-offset', className: 'pinktip', hook:{target:
'bottomRight', tip: 'topLeft'}, offset: {x:5,y:5} });