Comment mettre une image dans se genre de script

bonjours,

J'ai un code qui contient un script , et je voudrais y mettre une image a la place d'un texte

voici le code :

<a onmouseover="afficheInfoBulle(3782387)" onmouseout="tooltip.hide();" href="test.html"><img style="width: 120px; height: 90px;" id="desc_3782387" src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg?y4qef" title="" alt="" class="altentry"></a>		<div class="timerContainer">
							
		<script type="text/javascript" charset="utf-8">
			var desc_3782387 = ["test texte","test 2 "];
		</script>

sa donne un script qui fait suivre l'infobulle a l'image si dessus

je voudrais changer sa : ["test texte","test 2 "] par [" mon image "]

merci
Modifié par kaytos (04 Mar 2010 - 22:41)

Faudrait voir le code de la fonction afficheInfoBulle()

afficheInfoBulle(id)
{

	// On vérifie que le dom est bien load pour pas faire planter IE < 8

	if (/Microsoft/.test(navigator.appName)) 
{
		
if (/loaded|complete/.test(document.readyState))

			tooltip.show('desc_' + id);
	}
	else 
		tooltip.show('desc_' + id);
}

Modifié par kaytos (04 Mar 2010 - 22:42)

il faudrais surment avoir sa aussi

se place avant afficheInfoBulle(id)

tooltip=function(){
    var temp = '';
	var id = 'tt';
	var top = -15;
	var left = 2;
	var maxw = 300;
	var tt,t,c,b,h,title,desc;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
            if(typeof(window[v])=="undefined"){
                return;
            }
            if(v!=temp){
                if($(v)){
                    $(v).alt="";
                    $(v).title="";
                }
                v=window[v];
                title=v[0];
                desc=v[1];
                if(desc.replace( /\s/g, "" )=='')
                    return;
                temp = v;
                if(!tt || !$('tt')){
                    tt = document.createElement('div');
                    tt.setAttribute('id',id);
                    tt.className="info_bulle";
                    t = document.createElement('div');
                    t.setAttribute('id',id + 'top');
                    c = document.createElement('div');
                    c.setAttribute('id',id + 'cont');
                    b = document.createElement('div');
                    b.setAttribute('id',id + 'bot');
                    tt.appendChild(t);
                    tt.appendChild(c);
                    tt.appendChild(b);
                    document.body.appendChild(tt);
                }
            }
            tt = $('tt');
            Event.observe($(document),'mousemove',this.pos);
			tt.show();
            t.innerHTML = title
			c.innerHTML = desc;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top - $('tt').getHeight();
		},
		pos:function(e){
			xyAxis = $('tt').cumulativeScrollOffset();
			var u = ie ? event.clientY + xyAxis['top'] : e.pageY;
			var l = ie ? event.clientX + xyAxis['left'] : e.pageX;

			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		hide:function(){
			if(tt){
                tt.hide();
                Event.stopObserving($(document),'mousemove',this.pos);
			}
		}
	};
}()

ici le code de la fonction infobulle
Modifié par kaytos (04 Mar 2010 - 22:43)

Hello,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).



Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

C'est bon j'ai rectifier mon erreur , je vous pris de bien vouloir m'excuse pour cette erreur de ma part.

Vu que l'infobulle utilise innerHTML tu peux essayer de mettre ton image dans la variable :
var desc_3782387 = ["test texte",'<img src="tonimage.png" alt="" />'];

bonjours,

Le problème c'est sa , quand je met sa comme sa , l'infobulle ne s'affiche plus

voici le code complet + un code de ma fiche css

/*************** Infobulle *********************/
/*



*/
var tooltip=function(){
    var temp = '';
	var id = 'tt';
	var top = -15;
	var left = 2;
	var maxw = 300;
	var tt,t,c,b,h,title,desc;
	var ie = document.all ? true : false;
	return{
		show:function(v,w){
            if(typeof(window[v])=="undefined"){
                return;
            }
            if(v!=temp){
                if($(v)){
                    $(v).alt="";
                    $(v).title="";
                }
                v=window[v];
                title=v[0];
                desc=v[1];
                if(desc.replace( /\s/g, "" )=='')
                    return;
                temp = v;
                if(!tt || !$('tt')){
                    tt = document.createElement('div');
                    tt.setAttribute('id',id);
                    tt.className="info_bulle";
                    t = document.createElement('div');
                    t.setAttribute('id',id + 'top');
                    c = document.createElement('div');
                    c.setAttribute('id',id + 'cont');
                    b = document.createElement('div');
                    b.setAttribute('id',id + 'bot');
                    tt.appendChild(t);
                    tt.appendChild(c);
                    tt.appendChild(b);
                    document.body.appendChild(tt);
                }
            }
            tt = $('tt');
            Event.observe($(document),'mousemove',this.pos);
			tt.show();
            t.innerHTML = title
			c.innerHTML = desc;
			tt.style.width = w ? w + 'px' : 'auto';
			if(!w && ie){
				t.style.display = 'none';
				b.style.display = 'none';
				tt.style.width = tt.offsetWidth;
				t.style.display = 'block';
				b.style.display = 'block';
			}
			if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
			h = parseInt(tt.offsetHeight) + top - $('tt').getHeight();
		},
		pos:function(e){
			xyAxis = $('tt').cumulativeScrollOffset();
			var u = ie ? event.clientY + xyAxis['top'] : e.pageY;
			var l = ie ? event.clientX + xyAxis['left'] : e.pageX;

			tt.style.top = (u - h) + 'px';
			tt.style.left = (l + left) + 'px';
		},
		hide:function(){
			if(tt){
                tt.hide();
                Event.stopObserving($(document),'mousemove',this.pos);
			}
		}
	};
}();

function afficheInfoBulle(id){
	// On vérifie que le dom est bien load pour pas faire planter IE < 8
	if (/Microsoft/.test(navigator.appName)) {
		if (/loaded|complete/.test(document.readyState))
			tooltip.show('desc_' + id);
	}
	else 
		tooltip.show('desc_' + id);
}

function showToolTip(element, message){
	if($('ToolTipBox'))$('ToolTipBox').remove();
	toolTip = document.createElement('div');
	toolTip.setAttribute('id','ToolTipBox');
	toolTip.setAttribute('class','ToolTipBoxError');
	toolTip.innerHTML = message;
	var toolDimensions= toolTip.getDimensions();
	var elemDimensions= element.getDimensions();
	var pos=element.cumulativeOffset();
	pos.left=pos.left-toolDimensions.width;
	pos.top=pos.top+toolDimensions.height+elemDimensions.height;
	toolTip.setStyle({
	  "top": pos.top + "px",
	  "left": pos.left+"px"
	});
	document.body.appendChild(toolTip);
	toolTip.show();
	element.observe('focus',hideToolTip);
}


function hideToolTip(){
	if($('ToolTipBox'))$('ToolTipBox').remove();
}Rubrique=function(B,A){$$("."+A+" .buttonContinu").each(function(C){C.onmouseover=function(G){var D=$(B);var E=this.getDimensions().width;var F=D.getDimensions();var H=this.cumulativeOffset();H.left=H.left-F.width+E-5;H.top=H.top+F.height;document.body.appendChild($(B));D.setStyle({top:H.top+2+"px",left:H.left+"px"});D.show()};C.onmouseout=function(D){$(B).hide()}})};Event.observe(window,"load",function(A){if($("SearchStringFileUser")&&$("SearchStringFileUser")!=""){$("SearchStringFileUser").observe("click",function(){$("SearchStringFileUser").value=""})}});

css :

.UserLink 
.bg1{background:#E6E6FF}
.UserLink
{
margin-top:15px
}
#text
{
width:500px;
margin:50px auto
}
#tt
{
display:block;
position:absolute;
background:#000000;
border-width:1px;
border-style:solid; 
border-color:red;
color:#666!important;
text-align:left;
font-family: Verdana, Arial;
font-size: 10px;
width:220px;
padding:10px 10px 10px 13px
}

j'ai aussi un autre fichier si jamais vous en avez besoin
Modifié par kaytos (06 Mar 2010 - 00:24)