High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

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

Dernière réponse le 6 avr 2009 à 17:38:58 mony84, le 24 jui 2007 à 12:53:40 
 Signaler ce message aux modérateurs

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 http://www.netunivers.com ( bas de la page).

quelqu'un sait comment faire?
merci

Configuration: Windows XP
Firefox 2.0.0.5

Meilleures réponses pour « [css]affecter un style au title d'une image » dans :
Les CSS pour présenter vos images Voir Pour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
CSS - list-style-type refuse de fonctionner (Résolu) Voir
Css / Positionner Du Texte Voir
Javascript - Librairies d'effets pour vos images VoirAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Faire une newsletter VoirFaire une newsletter Une newsletter est une lettre d'information envoyée périodiquement par mail à des abonnés. Composée de texte, illustrations, liens renvoyant vers votre site, son contenu peut être par exemple une sélection de produits, un...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
Posez votre question Répondre

1

Pi_Xi, le 24 jui 2007 à 13:21:42
  • +2

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!

   
Répondre à Pi_Xi

8

 SAMOS, le 6 avr 2009 à 17:38:58

Merci merci merci!! :D

   
Répondre à SAMOS

2

mony84, le 25 jui 2007 à 03:46:07
  • +1

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.

   
Répondre à mony84

3

Pi_Xi, le 25 jui 2007 à 10:58:01

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épondre à Pi_Xi

4

Pi_Xi, le 25 jui 2007 à 12:41:29

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

   
Répondre à Pi_Xi

6

chouk57, le 20 mar 2008 à 03:16:19
  • +1

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

   
Répondre à chouk57

7

Pi_Xi, le 25 mar 2008 à 17:16:40
  • +1

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)

   
Répondre à Pi_Xi

5

mony84, le 26 jui 2007 à 03:44:52

Merci ça fonctionne très bien :-)

   
Répondre à mony84
Posez votre question Répondre
Ils ont besoin de votre aide