Hi,
How to change the background image dynamically which is set for the tooltip depending on the text used in the tooltip.
Change the image dynamically
Moderator: General Moderators
Something like ...
myId would be the ID attribute of the element, newClassName would be the CSS class with the background. You could change the background itself using document.getElementById('myId').style.background too.
Code: Select all
document.getElementById('myId').className='newClassName';- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm
The $tool is the tooltip information which contains Name, Address ,Age to be displayed
When only Name is to be displayed in the background image the space is left blank.
How to reduce the size of the image when the information in $tool reduces.
How to increase or decrease the image size depending on the text in $tool
When only Name is to be displayed in the background image the space is left blank.
How to reduce the size of the image when the information in $tool reduces.
How to increase or decrease the image size depending on the text in $tool
Code: Select all
echo "<li class=\"ToolText\" onMouseOver=\"javascript:this.className='ToolTextHover'\" onMouseOut=\"javascript:this.className='ToolText'\">--".$text_line[0]."<span>$tool</span></li>";Code: Select all
.ToolText{position:relative; text-decoration: none;}
.ToolTextHover{position:relative; z-index: 3;}
.ToolText span{display: none;}
.ToolTextHover span,.image, .block{
z-index: 100;
position: absolute;
top: -60px;
left: 70px;
height:400px;
width: 600px;
line-height: 20px;
padding: 50px 80px 80px 80px;
/* border: 1px solid #336;*/
background-image: url(a.gif);
background-repeat:no-repeat;
font-family: arial, helvetica, sans-serif;
font-size: 28px;
font-weight: normal;
color: #000;
text-align:left;
text-indent: 12px;
}
- superdezign
- DevNet Master
- Posts: 4135
- Joined: Sat Jan 20, 2007 11:06 pm