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

Résolu

mony84 Messages postés 68 Date d'inscription Statut Membre Dernière intervention -
SAMOS - 6 avril 2009 à 17:38

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

Afficher la suite

A voir également:

Css a title
Enlever le soulignement d'un lien css - Astuces et Solutions
Css exposant ✓ - Forum CSS
Enlever trait sous un lien href ✓ - Forum Webmastering
CSS/Comment enlever couleur liens ? ✓ - Forum CSS
Css download - Télécharger - HTML

5 réponses

Réponse 1 / 5

Pi_Xi Messages postés 2244 Date d'inscription Statut Membre Dernière intervention 149

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:

<link rel="stylesheet" href="infobulle.css" type="text/css">

et dans le corps:

<a href="#" class="info">survolez ce lien... <span>infobulle</span></a>

Ca peut se faire en JavaScript aussi ;)

Bonnes bulles!

SAMOS

Merci merci merci!! :D

Réponse 4 / 5

Pi_Xi Messages postés 2244 Date d'inscription Statut Membre Dernière intervention 149

Hello,

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

Le code html:

<head>
<script language="JavaScript" type="text/javascript" src="javascript/style.js"></script>
</head>

<body>

 <script language="JavaScript" type="text/javascript">
 <!--
       maketip('TIP1','title','texte');
 -->
 </script>
 
 <div id="infodiv" style="position: absolute; visibility: hidden; z-index: 20; top: 0px; left: 0px;"></div>

 <a href="#TIP1" onMouseOver="tip('TIP1');" onMouseOut="untip();">Survolez ce lien...</a>
 
</body>

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('<div id="'+name+'" name="'+name+'" style="position:absolute; visibility:hidden; z-index:20; top:0'+px+'; left:0'+px+';"><table width='+IWIDTH+' border=0 cellpadding=2 cellspacing=0 bgcolor="#333399"><tr><td class="tiptd"><table width="100%" border=0 cellpadding=0 cellspacing=0><tr><th><span class="ptt"><b><font color="#FFFFFF">'+title+'</font></b></span></th></tr></table><table width="100%" border=0 cellpadding=2 cellspacing=0 bgcolor="#CCCCFF"><tr><td><span class="pst"><font color="#000000">'+text+'</font></span></td></tr></table></td></tr></table></div>'+"\n");
}

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)<winW)?x+12:x-255)+px; idiv.top=(((y+90)<winH)?y+12:y-90)+px;
  idiv.visibility=ns4?"show":"visible";
//  window.status="idiv="+idiv+"X:"+(idiv.left?idiv.left:"NAN")+", Y:"+(idiv.top?idiv.top:"NAN")+", x:"+x+", y:"+y;
}

function mousemove(e){

 if(e)   {x=e.pageX?e.pageX:e.clientX?e.clientX:0; y=e.pageY?e.pageY:e.clientY?e.clientY:0;}
 else if(event) {x=event.clientX; y=event.clientY;}
 else {x=0; y=0;}
 if(document.documentElement) // Workaround for scroll offset of IE
  {
    x+=document.documentElement.scrollLeft;
    y+=document.documentElement.scrollTop;
  }
 if(idiv) showtip();
}

// EOF infobox.js

function NiftyCheck(){

if(!document.getElementById || !document.createElement)
    return(false);
var b=navigator.userAgent.toLowerCase();
if(b.indexOf("msie 5")>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;i<l;i++){
    AddTop(v[i],bk,color,size);
    AddBottom(v[i],bk,color,size);
    }
}

function RoundedTop(selector,bk,color,size){

var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
    AddTop(v[i],bk,color,size);
}

function RoundedBottom(selector,bk,color,size){

var i;
var v=getElementsBySelector(selector);
for(i=0;i<v.length;i++)
    AddBottom(v[i],bk,color,size);
}

function AddTop(el,bk,color,size){

var i;
var d=document.createElement("b");
var cn="r";
var lim=4;

if(size && size=="small"){ cn="rs"; lim=2}
d.className="rtop";
d.style.backgroundColor=bk;
for(i=1;i<=lim;i++){
    var x=document.createElement("b");
    x.className=cn + i;
    x.style.backgroundColor=color;
    d.appendChild(x);
    }
el.insertBefore(d,el.firstChild);
}

function AddBottom(el,bk,color,size){

var i;
var d=document.createElement("b");
var cn="r";
var lim=4;

if(size && size=="small"){ cn="rs"; lim=2}
d.className="rbottom";
d.style.backgroundColor=bk;

for(i=lim;i>0;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<v.length;i++){
    if(v[i].className==selclass){
        objlist.push(v[i]);
        }
    }
return(objlist);
}

window.onload=function(){
if(!NiftyCheck())
    return;
Rounded("div.item","#FFFFFF","#d0d0d0");
Rounded("div.recommend","#FFFFFF","#e0e0e0");
Rounded("div.navcontainer","#FFFFFF","#f0f0f0");
infoinit();
}

Ce code date un peu, y'a surement plus léger pour le même résultat.

Réponse 5 / 5

Pi_Xi Messages postés 2244 Date d'inscription Statut Membre Dernière intervention 149

Je viens de décortiquer son code... l'est pas simple non plus (cf. les 2 .js!), pis bien long aussi.

Le code html:

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<link href="css/jcebox.css" rel="stylesheet" type="text/css" media="all"/>
<!--[if IE]><link href="css/jcebox_ie.css" rel="stylesheet" type="text/css" media="all"/><![endif]-->
<script type="text/javascript">
 jQuery.noConflict();
 jceUtils.config.convert=1;
 jceUtils.config.resize=1;
 jceUtils.config.overlay=1;
 jceUtils.config.overlay_opacity=0.6;
 jceUtils.config.fadespeed=500;
 jceUtils.config.scalespeed=500;
 jceUtils.config.pngfix=1;
 jceUtils.config.pngfix_id='_trans';
 jceUtils.config.tip_class='tooltip';
 jceUtils.config.tip_opacity=1;
 jceUtils.config.tip_fxspeed=150;
</script>
</head>
<body>

<img style="border-width: 0px; margin: 5px; float: left; width: 202px; height: 320px" class="jce_tooltip" src="couleur.jpg" alt="couleur.jpg" title="blablabla..." width="202" height="320" />

</body>
</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 :)

chouk57 Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Bonjour, est-il possible de réaliser cette même info-bulle qui suit la souris avec une image à la place du texte dans l'infobulle ? J'ai vu que ça pouvait se faire sur ce site : http://rioter-france.fr.nf/

Merci de m'aider car ça fait plusieurs jours que je cherche désespérément ce code...

Cordialement

Pi_Xi Messages postés 2244 Date d'inscription Statut Membre Dernière intervention 149 > chouk57 Messages postés 4 Date d'inscription Statut Membre Dernière intervention

Bonjour,

je reprendrais le code du post 1, et j'ajouterais un background à a:hover.info span, càd:

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;
  background: url(monImage.gif);
}

(j'ai ajouté la dernière ligne)

Discussions similaires

Background transparent ?

Ajustement automatique taille de la page

taille des input

Changer l'arrière plan d'un bouton (CSS)

Souligné au survol d’un hyperlien

agrandir une image au passage de la souris

Votre réponse

Discussions similaires