Change the image dynamically

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
rash28
Forum Commoner
Posts: 38
Joined: Wed Aug 01, 2007 1:21 am

Change the image dynamically

Post by rash28 »

Hi,

How to change the background image dynamically which is set for the tooltip depending on the text used in the tooltip.
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post 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.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

element.style.backgroundImage
rash28
Forum Commoner
Posts: 38
Joined: Wed Aug 01, 2007 1:21 am

Post 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;
}
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post 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.
rash28
Forum Commoner
Posts: 38
Joined: Wed Aug 01, 2007 1:21 am

Post 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
Post Reply