1 Sript infobulle à personnaliser 19/4/2010, 15:26
Bonjour à tous,
je tente de suivre ce tuto trouvé sur le net qui , doit être très simple pour quelqu'un qui manipule le javascript mais qui pour moi est un véritable casse tête.
Voici le lien
http://www.kilasoft.net/tutorials.item.29/infobulle-javascript-accessible.html
J'ai téléchargé le zip, je l'ai décompressé et, je me retrouve avec un dossier en javascript dont je ne sais quoi faire. Dois l'héberger dans un page html et modifier
la partie en rouge par l'adresse de ma page
le voici
POur le reste, il me semble avoir procédé correctement
J'ai placé ceci dans le template overall header new entre < head> et < /head>
le css dans ma feuille de style
Merci par avance pour votre aide
EDIT FB pour mettre les balises HTML dans celles "code"
je tente de suivre ce tuto trouvé sur le net qui , doit être très simple pour quelqu'un qui manipule le javascript mais qui pour moi est un véritable casse tête.
Voici le lien
http://www.kilasoft.net/tutorials.item.29/infobulle-javascript-accessible.html
J'ai téléchargé le zip, je l'ai décompressé et, je me retrouve avec un dossier en javascript dont je ne sais quoi faire. Dois l'héberger dans un page html et modifier
la partie en rouge par l'adresse de ma page
- Code:
<script type="text/javascript" src="BubbleTooltips.js">
le voici
- Spoiler:
- Code:
/*javascript for Bubble Tooltips by Alessandro Fulciniti
- http://pro.html.it - http://web-graphics.com */
function enableTooltips(id){
var links,i,h;
if(!document.getElementById || !document.getElementsByTagName) return;
AddCss();
h=document.createElement("span");
h.id="btc";
h.setAttribute("id","btc");
h.style.position="absolute";
document.getElementsByTagName("body")[0].appendChild(h);
if(id==null) links=document.getElementsByTagName("a");
else links=document.getElementById(id).getElementsByTagName("a");
for(i=0;i<links.length;i++){
Prepare(links[i]);
}
}
function Prepare(el){
var tooltip,t,b,s,l;
t=el.getAttribute("title");
if(t==null || t.length==0) t="link:";
el.removeAttribute("title");
tooltip=CreateEl("span","tooltip");
s=CreateEl("span","top");
s.appendChild(document.createTextNode(t));
tooltip.appendChild(s);
b=CreateEl("b","bottom");
l=el.getAttribute("href");
if(l.length>30) l=l.substr(0,27)+"...";
b.appendChild(document.createTextNode(l));
tooltip.appendChild(b);
setOpacity(tooltip);
el.tooltip=tooltip;
el.onmouseover=showTooltip;
el.onmouseout=hideTooltip;
el.onmousemove=Locate;
}
function showTooltip(e){
document.getElementById("btc").appendChild(this.tooltip);
Locate(e);
}
function hideTooltip(e){
var d=document.getElementById("btc");
if(d.childNodes.length>0) d.removeChild(d.firstChild);
}
function setOpacity(el){
el.style.filter="alpha(opacity:95)";
el.style.KHTMLOpacity="0.95";
el.style.MozOpacity="0.95";
el.style.opacity="0.95";
}
function CreateEl(t,c){
var x=document.createElement(t);
x.className=c;
x.style.display="block";
return(x);
}
function AddCss(){
var l=CreateEl("link");
l.setAttribute("type","text/css");
l.setAttribute("rel","stylesheet");
l.setAttribute("href","bt.css");
l.setAttribute("media","screen");
document.getElementsByTagName("head")[0].appendChild(l);
}
function Locate(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
posx=e.pageX; posy=e.pageY;
}
else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
document.getElementById("btc").style.top=(posy+10)+"px";
document.getElementById("btc").style.left=(posx-20)+"px";
}
POur le reste, il me semble avoir procédé correctement
J'ai placé ceci dans le template overall header new entre < head> et < /head>
- Code:
<script type="text/javascript" src="BubbleTooltips.js"></script>
<link href="tooltip.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};
</script>
le css dans ma feuille de style
- Code:
.tooltip{
width: 200px; color:#000;
font:lighter 11px/1.3 Arial,sans-serif;
text-decoration:none;text-align:center}
.tooltip span.top{padding: 30px 8px 0;
background: url(bt.gif) no-repeat top}
.tooltip b.bottom{padding:3px 8px 15px;color: #548912;
background: url(bt.gif) no-repeat bottom}
Merci par avance pour votre aide
EDIT FB pour mettre les balises HTML dans celles "code"
Dernière édition par demeter le 19/4/2010, 16:35, édité 1 fois