[css]affecter un style au title d'une image Résolu/Fermé

Question

salut,
je veux affecter un style css au texte qui apparait lors du survol d'une image, ca d le contenu de l'attribut title d'une image.
J'ai vu ça sur  le site https://www.netunivers.com/ ( bas de la page).

quelqu'un sait comment faire?
merci

Pi_Xi · Accepted Answer

Bonjour, c'est une infobulle et voici le code css: Par exemple, le fichier "infobulle.css": a.info { position:relative; text-decoration: none; } a:hover.info { text-decoration: underline; background: none; } a.info span {display: none;} a:hover.info span { display: inline; position: absolute; top:1.5em; left:0.5em; z-index: 20; background: #6586C5; color: #fff; border:1px solid #666; width:150px; text-align:center; font-weight:normal; font-size: 10px; line-height:12px; padding:2px 4px; } Le code html: dans l'entête de ta page: et dans le corps: survolez ce lien... infobulle Ca peut se faire en JavaScript aussi ;) Bonnes bulles!

mony84 · Answer

bonjour,
merci beaucoup  Pi_Xi, mais avec avec ce code tu renvoie le contenu de a span ('infobulle') vers une zone précise : position absolute. Or sur la site netunivers.com, le texte suit le mouvement de la souris quand on survole l'image et il n'a pas de position fixe.

Pi_Xi · Answer

Hello, j'ai un vieux code JavaScript qui est plus lourd, mais l'infobulle suit bien le mouvement du curseur: Le code html:

Survolez ce lien... et le fichier "style.js": var IWIDTH=250 // Tip box width var ns4 // Are we using Netscape4? var ie4 // Are we using Internet Explorer Version 4? var ie5 // Are we using Internet Explorer Version 5 and up? var kon // Are we using KDE Konqueror? var x,y,winW,winH // Current help position and main window size var idiv=null // Pointer to infodiv container var px="px" // position suffix with "px" in some cases function nsfix(){setTimeout("window.onresize = rebrowse", 2000);} function rebrowse(){window.location.reload();} function hascss(){ return gettip('infodiv')?true:false } function infoinit(){ ns4=(document.layers)?true:false, ie4=(document.all)?true:false; ie5=((ie4)&&((navigator.userAgent.indexOf('MSIE 5')>0)||(navigator.userAgent.indexOf('MSIE 6')>0)))?true:false; kon=(navigator.userAgent.indexOf('konqueror')>0)?true:false; x=0;y=0;winW=800;winH=600; idiv=null; document.onmousemove = mousemove; if(ns4&&document.captureEvents) document.captureEvents(Event.MOUSEMOVE); // Workaround for just another netscape bug: Fix browser confusion on resize // obviously conqueror has a similar problem :-( if(ns4||kon){ nsfix() } if(ns4) { px=""; } } function untip(){ if(idiv) idiv.visibility=ns4?"hide":"hidden"; idiv=null; } function gettip(name){return (document.layers&&document.layers[name])?document.layers[name]:(document.all&&document.all[name]&&document.all[name].style)?document.all[name].style:document[name]?document[name]:(document.getElementById(name)?document.getElementById(name).style:0);} // Prepare tip boxes, but don't show them yet function maketip(name,title,text){ //if(hascss()) document.write('

'+title+'

'+text+'

'+" "); } function tip(name){ if(hascss()){ if(idiv) untip(); idiv=gettip(name); if(idiv){ winW=(window.innerWidth)? window.innerWidth+window.pageXOffset-16:document.body.offsetWidth-20; winH=(window.innerHeight)?window.innerHeight+window.pageYOffset :document.body.offsetHeight; if(x<=0||y<=0){ // konqueror can't get mouse position x=(winW-IWIDTH)/2+(window.pageXOffset?window.pageXOffset:0); y=(winH-50)/2+(window.pageYOffset?window.pageYOffset:0); // middle of window } showtip(); } } } function showtip(){ idiv.left=(((x+260)0 && b.indexOf("opera")==-1) return(false); return(true); } function Rounded(selector,bk,color,size){ var i; var v=getElementsBySelector(selector); var l=v.length; for(i=0;i0;i--){ var x=document.createElement("b"); x.className=cn + i; x.style.backgroundColor=color; d.appendChild(x); } el.appendChild(d,el.firstChild); } function getElementsBySelector(selector){ var i; var s=[]; var selid=""; var selclass=""; var tag=selector; var objlist=[]; if(selector.indexOf(" ")>0){ //descendant selector like "tag#id tag" s=selector.split(" "); var fs=s[0].split("#"); if(fs.length==1) return(objlist); return(document.getElementById(fs[1]).getElementsByTagName(s[1])); } if(selector.indexOf("#")>0){ //id selector like "tag#id" s=selector.split("#"); tag=s[0]; selid=s[1]; } if(selid!=""){ objlist.push(document.getElementById(selid)); return(objlist); } if(selector.indexOf(".")>0){ //class selector like "tag.class" s=selector.split("."); tag=s[0]; selclass=s[1]; } var v=document.getElementsByTagName(tag); // tag selector like "tag" if(selclass=="") return(v); for(i=0;i

Pi_Xi · Answer

Je viens de décortiquer son code... l'est pas simple non plus (cf. les 2 .js!), pis bien long aussi. Le code html: puis récupère les 2 fichiers .js et les 2 .css (cf. les url dans le code source), y'a du ménage à faire dans jcebox.css qui peut se réduire à: #jceutils_lightbox a img{ border: none; } .tooltip { z-index: 9999; width: 180px; text-align:left; color: #000000; background-color:#898E79; border:1px solid black; padding: 4px; } .tooltip h4 { font-weight: bold; font-size: 11px; margin: 0px; } .tooltip p { font-size: 11px; } Le résultat est vraiment pas mal :)

mony84 · Answer

merci ça fonctionne très bien :-)

[css]affecter un style au title d'une image

5 réponses

Discussions similaires