Inline hover

[The Little Guy]

I am building a css string using javascript, the string looks like the following code, and for readability I made it multi-line originally it is one line

 

{
right:26px;top:20px;
position:absolute;
width:16px;height:16px;
background-image:url(\'http://img.nebala.com/main/icons16x16.png\');
display:block;cursor:pointer;
}
:hover{
background-position:-16px 0;
}

 

The string is then added to an element using:

htmlElement.setAttribute('style', atts);

 

The string well doesn't work because the CSS is wrong, what can I do to make the css correct? I need to some how using an inline hover. What I am using above is what I read, but it doesn't work...

[haku]

You are best off predefining a specific class or ID in your CSS, then use javascript to attach that classname/ID to the element in question. When you do this, the element will automatically pick up the defined CSS styles.

[The Little Guy]

I know that, but the problem is that the css is dynamic, that is why I need to use JavaScript, because I want to set the background position of the image. I have one image that holds 2+ images, and each image has a hover image, by using javascript I can set where the image will start. Then using a hover effect I can change the image's x position when the user hover overs it. I am trying to avoid having to make 100 classes.

[haku]

Ahh I can see where the problem comes in.

 

I have no idea if you can set pseudo classes inline. I've never seen it done. You could just use a javascript :hover effect instead, since you are already using javascript to do this.

[The Little Guy]

I figured out an answer to my problem

 

basically what I did was all JS

 

- First I created a link, with two attributes: class, content.

- Class has either "icon16x16" or "icon32x32" depending on the icon set I want to use.

- Content is formated like so: "B{background-color:#FFF;}"

- Content has regex used on it in the JS to get the value(s) before "{" and inside "{}" for this example "B" means "bold"

- Then we look at some if statements, and find "B" and set the image to the position and set it's onmouseover/onmouseout in the javascript

- Finally it is all added to the tag to make it look like an icon

 

Here is the full thing at the moment:

function setIcons(){
var icons = document.getElementsByTagName('a');
for(var i=0;i<icons.length;i++){
	if(icons[i].getAttribute('class') == 'icon16x16' ||
		icons[i].getAttribute('class') == 'icon32x32'){
		var content = icons[i].getAttribute('content');
		var patt1 = new RegExp("(.+?)|((.+?)\{.+\})");
		var value = patt1.exec(content)[0];
		var patt2 = new RegExp("\{(.+?)\}");
		var xtraStyle = patt2.exec(content);
		if(xtraStyle != null){
			xtraStyle = xtraStyle[1];
			var atts = xtraStyle;
		}else{
			var atts = '';
		}
		var backPos = '';
		var backPosH = '';
		if(value == 'X'){
			backPos += '0 0';
			backPosH += '-16px 0';
			atts += 'background-position:0 0;';
		}else if(value == '_'){
			backPos += '0 -16px';
			backPosH += '-16px -16px';
			atts += 'background-position:0 -16px;';
		}
		if(value == 'B'){
			backPos += '0 0';
			backPosH += '-32px 0';
			atts += 'background-position:0 0;';
		}
		if(value == 'U'){
			backPos += '0 -32px';
			backPosH += '-32px -32px';
			atts += 'background-position:0 -32px;';
		}
		if(value == 'I'){
			backPos += '0 -64px';
			backPosH += '-32px -64px';
			atts += 'background-position:0 -64px;';
		}
		if(value == '<'){
			backPos += '0 -96px';
			backPosH += '-32px -96px';
			atts += 'background-position:0 -96px;';
		}
		if(value == '^'){
			backPos += '0 -128px';
			backPosH += '-32px -128px';
			atts += 'background-position:0 -128px;';
		}
		if(value == '>'){
			backPos += '0 -160px';
			backPosH += '-32px -160px';
			atts += 'background-position:0 -160px;';
		}
		var url = '';
		var d = '';
		if(icons[i].getAttribute('class') == 'icon16x16'){
			url = 'http://img.nebala.com/main/icons16x16.png';
			d = 16;
		}else{
			url = 'http://img.nebala.com/main/icons32x32.png';
			d = 32;
		}
		atts += 'background-image:url(\''+url+'\');background-repeat:no-repeat;width:'+d+'px;height:'+d+'px;display:block;cursor:pointer;}';
//			:hover{background-position:-16px 0;}
		icons[i].setAttribute('style', atts);
		icons[i].setAttribute('onmouseover', 'this.style.backgroundPosition = "'+backPosH+'";this.style.backgroundColor = "#ddefff";');
		icons[i].setAttribute('onmouseout', 'this.style.backgroundPosition = "'+backPos+'";this.style.backgroundColor = "#FFFFFF";');
	}
}
}