Page 1 of 1
Change the image dynamically
Posted: Mon Aug 06, 2007 2:30 am
by rash28
Hi,
How to change the background image dynamically which is set for the tooltip depending on the text used in the tooltip.
Posted: Mon Aug 06, 2007 4:11 am
by onion2k
Something like ...
Code: Select all
document.getElementById('myId').className='newClassName';
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.
Posted: Mon Aug 06, 2007 8:35 am
by superdezign
element.style.backgroundImage
Posted: Tue Aug 07, 2007 3:28 am
by rash28
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
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;
}
Posted: Tue Aug 07, 2007 5:05 am
by superdezign
rash28 wrote: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
If you make your CSS dynamic in the first place, that shouldn't be a problem.
Posted: Tue Aug 07, 2007 5:26 am
by rash28
Hi,
How to make it...
Any links or tutorials based on that.
I have fixed the width and heigth of the image.
I want to reduce the size of image from all the four sides when the text content is reduced in tooltip