0

Hi there!

I have tooltips on my site that appear when you hover over text/image but i would like different background for different hovers. the code at the moment accepts all variables passed in but doesnt initalise and apply the styles.

I have attached my code and would be thankful for any help I receive:

HTML

<a MouseOver="tooltip.show('About Us', 89, 'cont1');">text</a>

CSS

#ttcont {
 display:block;
 background: url(imgs/bars/3.png) top right no-repeat;
}
 #ttcont2 {
 display:block;
 background: url(imgs/bars/2.png) top right no-repeat;
}
#ttcont3 {
 display:block;
 background: url(imgs/bars/1.png) top right no-repeat;
}

JS

var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 40;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h, no;
 var ie = document.all ? true : false;
 return{
  show:function(v,w,no){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + no);
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;

   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;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();

Thank you in advance!

2
Contributors
16
Replies
17
Views
6 Years
Discussion Span
Last Post by public-image
0

I'm not sure if I understood you correctly, but you can try this example:

<head>
<style>
 #ttcont {
 display:block;
 background: url(imgs/bars/3.png) top right no-repeat;
}
 #ttcont2 {
 display:block;
 background: url(imgs/bars/2.png) top right no-repeat;
}
#ttcont3 {
 display:block;
 background: url(imgs/bars/1.png) top right no-repeat;
}
</style>
</head>
<body>
<script type="text/javascript">
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 40;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h, no;
 var ie = document.all ? true : false;
 return{
  show:function(v,w,no){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id + no);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + no);
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.style.display = 'block';
   c.innerHTML = v;

   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;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();
</script>

<a href="#" onmouseover="tooltip.show('About Us', 89, 'cont1');">text</a>
</body>
0

The tooltip is showing, as it was doing in my own code but it still is not displaying correctly (no background).

0

It shows 500 Internal Server Erorr now but from what I saw, You're not passing the third paramether to the show method, which should set the id name, as in here:

tooltip.show('About Us', 89, 'cont1')
0

Okay so it is showing the styles now.. but it will only ever show the first style that you rollover, so if a style is different for another rollover it doesn't change it.

Also my rollover backgrounds are doubling.. I have a no-repeat for the background images in my css and so I know it cannot be that.

Edited by public-image: n/a

0

ttcont2 is repeated twice, That's why the background is doubled:

<div id="ttcont2" style="opacity: 0.95; display: block; width: 89px; top: 491px; left: 84px;">
<div id="tttop"></div>
<div id="ttcont2">Daily Gopher</div>
<div id="ttbot"></div></div>
0

Those divs are created via JS I'm not really much of a Javascript person, you may have noticed :P - I can do the basics, get stuff by ID and make vars.
Can you tell me what I would perhaps remove and would you know why it only styles by the first rollover?

0

Here is the portion of the code:

tt = document.createElement('div');
    tt.setAttribute('id',id + no);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id + no);
    b = document.createElement('div');

This tt.setAttribute('id',id + no); and this c.setAttribute('id',id + no); set the ID for the divs.

I suggest you change: c.setAttribute('id',id + no); to c.setAttribute('id',id + no + 'text');

0

I did and that worked although now the only problem is it uses the same style for each rollover regardless of sending a different style. - It will set the same style for every rollover ONLY after the first rollover is made.

Edited by public-image: n/a

0

I see now. Ok this is my first example modified to change the background:

<head>
<style>
 .cont1 {background-color:red;}
 .cont2 {background-color:green;}
</style>
</head>
<body>
<script type="text/javascript">
var tooltip=function(){
 var id = 'tt';
 var top = 3;
 var left = 3;
 var maxw = 300;
 var speed = 10;
 var timer = 40;
 var endalpha = 95;
 var alpha = 0;
 var tt,t,c,b,h, no;
 var ie = document.all ? true : false;
 return{
  show:function(v,w,no){
   if(tt == null){
    tt = document.createElement('div');
    tt.setAttribute('id',id);
    t = document.createElement('div');
    t.setAttribute('id',id + 'top');
    c = document.createElement('div');
    c.setAttribute('id',id);
    b = document.createElement('div');
    b.setAttribute('id',id + 'bot');
    tt.appendChild(t);
    tt.appendChild(c);
    tt.appendChild(b);
    document.body.appendChild(tt);
    tt.style.opacity = 0;
    tt.style.filter = 'alpha(opacity=0)';
    document.onmousemove = this.pos;
   }
   tt.setAttribute('class', no);
   tt.style.display = 'block';
   c.innerHTML = v;

   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;
  clearInterval(tt.timer);
  tt.timer = setInterval(function(){tooltip.fade(1)},timer);
  },
  pos:function(e){
   var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
   var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
   tt.style.top = (u - h) + 'px';
   tt.style.left = (l + left) + 'px';
  },
  fade:function(d){
   var a = alpha;
   if((a != endalpha && d == 1) || (a != 0 && d == -1)){
    var i = speed;
   if(endalpha - a < speed && d == 1){
    i = endalpha - a;
   }else if(alpha < speed && d == -1){
     i = a;
   }
   alpha = a + (i * d);
   tt.style.opacity = alpha * .01;
   tt.style.filter = 'alpha(opacity=' + alpha + ')';
  }else{
    clearInterval(tt.timer);
     if(d == -1){tt.style.display = 'none'}
  }
 },
 hide:function(){
  clearInterval(tt.timer);
   tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
  }
 };
}();
</script>

<a href="#" onmouseover="tooltip.show('About Us', 89, 'cont1');">text</a>

<a href="#" onmouseover="tooltip.show('About You', 89, 'cont2');">text2</a>
</body>
0

Notice the CSS it changes the class rather than the id;

<style>
 .cont1 {background-color:red;}
 .cont2 {background-color:green;}
</style>
0

Still no success with that but I added in the style. Although if it fixes it then I'd be more than happy to go for that route

Edited by public-image: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.