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

Résolu

mony84 Messages postés 68 Date d'inscription mercredi 19 juillet 2006 Statut Membre Dernière intervention 5 octobre 2010 - 24 juil. 2007 à 12:53
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 samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
24 juil. 2007 à 13:21

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
6 avril 2009 à 17:38

Merci merci merci!! :D

Réponse 4 / 5

Pi_Xi Messages postés 2244 Date d'inscription samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
25 juil. 2007 à 10:58

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 samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149
25 juil. 2007 à 12:41

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 mercredi 19 mars 2008 Statut Membre Dernière intervention 5 juillet 2011
20 mars 2008 à 03:16

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 samedi 24 mars 2007 Statut Membre Dernière intervention 22 janvier 2016 149 > chouk57 Messages postés 4 Date d'inscription mercredi 19 mars 2008 Statut Membre Dernière intervention 5 juillet 2011
25 mars 2008 à 17:16

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 ?

Salut à tous.

Je suis actuellement entrain de créer un widget pour Windows Vista. Mais pourquoi poster ça dans «webmastering » tout simplement par ce que pour ce faire j’utilise du HTML, CSS, XML et JAVASCRIPT.

Bref voilà mon problème, j’ai fini le widget en question, mais le background est de couleur blanc et ne rend vraiment pas bien sur la SideBar. Alors je souhaiterais savoir s’il ya avait un moyen de rendre ce dernier transparent à l’aide de balise ou autre.

Voilà merci ! 
--
Ca c'est un excellent hamburger !

Ajustement automatique taille de la page

Bonjour à tous.

Me revoila avec deux questions concernant mon site en construction "http://www.guilde-lbu.fr".

J'ai travaillé les éléments graphiques (images se trouvant dans les tableau) via photoshop sur mon pc qui est en 1280 par 1024 dans les paramêtres d'affichage. Donc quand je suis sur mon pc la page s'affcihe nikel (bordures + le fait que la page s'affiche en entièr sans barres de défilement vertical ou horizontal = c'est ca que je veux) et dés que je l'affiche sur un poste en résolution différente (en loccurence inférieure d'une façon générale), bah mes bordures noires d'un pixel des tableaux et cellules du tableau se voient rognées par la droite, toutes sans ...

taille des input

Bonsoir , quand on crée un zone de texte est ce qu'on peut définir la taille du rectangle où on tape le texte ?

merci

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

Bonjour,

Je souhaiterais créer un bouton dans un formulaire qui change d'état lorsque l'on passe la souris dessus.
Rien de vraiment dur dis comme ca...

Les contraintes :
- Que ca marche sous IE et Firefox
- Pas de javascript

Et voici mes problèmes plus en détails, ca expliquera certainement mieux ce que je souhaite et les problèmes rencontrés.

Tout d'abord du code qui marche sous firefox... Mais pas sous internet explorer

Souligné au survol d’un hyperlien

Bonjour à tous voici mon problème.
Je suis en train de créer un site sous Dreamweaver et j’ai effectué un menu à gauche de celui-ci. Mais le problème c’est qu’il y a énormément d’hyperliens dans les sous menus ce qui nuie à la lisibilité du site (trop de surlignage et donne un effet illisible).Donc je voudrais savoir si il existe un script pour retirer le souligné sous les liens hypertextes et de le faire apparaître seulement au survol de la souris. Je précise que mon site est en HTML

Merci a tous pour votre aide

agrandir une image au passage de la souris

bonjours à tous,

je suis en pleine creation de site et je bloque sur une chose, j'ai des images miniature de 80 sur 60,
et j 'aimerai au passage de la souris l'image s'agrandir en 320 sur 240.
Il a une exemple le site http://www.entrevue-web.fr
merci de votre aide

Votre réponse

Discussions similaires