# Solved: KompoZer CSS question - pseudo classes?



## abujoe (Apr 19, 2009)

(disclaimer:very inexperienced website builder ahead) 
Working in KompoZer for the past few months, I'm happy with the progress I'm making with my first site. I have one sticky part, that I just can't puzzle out by myself. I'd really appreciate any light that you could shed.
I want to have an image (a1.jpg) at the top of my content area (directly beneath the hmenu) that switches to a similar image (a2.jpg) of the same size when the site visitor passes the mouse over to get to the menu. Then it will switch back to the original image after the mouse moves on. 
I was told this type of hover is called a pseudo class.
Ive looked around for different ways of achieving this effect and the best (fastest loading) seems to be using only the KompoZer CSS stylesheet editor (rather than any javascript) and using only one image, which is created by editing a1.jpg and a2.jpg, one above the other, into a new image file (a3.jpg) that is twice as tall.
The new image is used in the CSS Editor as a background image and I guess only the appropriate half is shown at the appropriate time (at ? and at hover). 

Here are some examples that Ive found online that Im trying to adapt to my image on my page:

*Example 1.*
The web designer said using the CSS psuedo-element hover to apply the mouseover image effect. When your mouse pointer moves into the myImage DIV tag, our CSS slides the background image (using the background-position CSS property) appropriately, giving us our mouseover image
*Here is the HTML for this example:*

*Here is the CSS*:
.myImage { 
width: 100px; 
height: 100px; 
background: url('/path/to/myImage.png') no-repeat; 
background-position: 0 -100px; 
}
.myImage:hover { 
background-position: 0 0; 
}

*Example 2.*
This web designer said* *make the images side-by-side; first the original then the hover image. If the image is 100px wide, the total image with the two states would be 200px

*Here is the HTML for this example: *

link

*Here is the CSS:*
.yo a { 
display: block; 
width: 100px; 
height: 20px; 
background: transparent url(img.jpg) no-repeat; 
} 
.yo a:hover { 
background-position: -100px 0; 
}
I could be wrong, maybe its two entirely different techniques. Two differences I notice are that in the second example the HTML has a *href+#>link</a>* and in the style rule the background is *transparent*. Both are unclear to me, but maybe the link is referring to a link to an image file and the background part might mean the image goes transparent when the hover occurs. Just guessing, but what is href? Ive seen that before, but I havent come across an explanation.

Assuming I get that part straight then this is where I run into real problems:
First the element the image will be located in, in the example they used div, so I made a div, but when I right click on the status bar only limited choices pop out, none of which seem right. How do I define or declare the Class or pseudo class, as the case may be.
Then I create the style rule for it once Ive defined it, right? It appears that in the above examples they used the: Style applied to all elements of class (since they have a . in front) 
Assuming that is correct, can I give the rule just any name of my choice, such as .imagehover? 
If I do get the style rule created, then do I put the image (a3.jpg) only in the background tab? Where do I put the 2 sets of sizes? 
My images, a1.jpg (default) and a2.jpg (hover), were each 932px wide and 130px tall, so the new image, a3.jpg, is 932px x 260px.
 
If this doesn't make sense, please pardon my lack of knowledge or proper terminology, I realize this little trick is way past my less-than-minimum skill level, but this is the only frill Im allowing myself on this site. Any thing thats not clear enough, please ask me. 

Thanks in advance (_just for reading all this!_)
abujoe


----------



## amanxman (Mar 28, 2006)

Hey

Hopefully someone can help you with the indivudual details, but I'm outta time, but really think you should read this:

www.w3schools.com

the best css and html resource and tutorial imho

Start here: http://www.w3schools.com/html/default.asp
Then here: http://www.w3schools.com/xhtml/default.asp
Then here: http://www.w3schools.com/css/default.asp

Go through there and see if you can fix some problems yourself  will be great help to your coding ability.

Cheers


----------



## colinsp (Sep 5, 2007)

Search on google for image swap in css there are 100's of links, like *this*.


----------



## tomdkat (May 6, 2006)

abujoe said:


> I could be wrong, maybe its two entirely different techniques. Two differences I notice are that in the second example the HTML has a *href+"#">link</a>* and in the style rule the background is *transparent*. Both are unclear to me, but maybe the link is referring to a link to an image file and the background part might mean the image goes transparent when the hover occurs. Just guessing, but what is href? I've seen that before, but I haven't come across an explanation.[/FONT]


Ok, the "background" CSS attribute is a shorthand notation for the various background attributes available. So, you can condense:


```
background-color: #ff000;
background-image: url(images/picture.jpg);
background-position: top center;
```
into

```
background: #ff0000 url(images/picture.jpg) top center;
```
In both cases, the image technique you're using is called a "sprite."



> First the element the image will be located in, in the example they used div, so I made a div, but when I right click on the status bar only limited choices pop out, none of which seem right. How do I define or declare the Class or pseudo class, as the case may be.


In Kompozer, you need to manually define rules for pseudo classes. So, right click on the "<div"> in the status bar and click, "inline styles". When the CSS editor appears, enter the custom rule as ".class:hover" and press enter. Then, you can select that on the left and define the rule. Now, Kompozer doesn't support specifying numbers as the background position, so you're probably better off editing the CSS either in source view or in an external editor, like Notepad or emacs or whatever.



> Then I create the style rule for it once I've defined it, right? It appears that in the above examples they used the: Style applied to all elements of class (since they have a . in front)
> Assuming that is correct, can I give the rule just any name of my choice, such as .imagehover?


You can define ANY class name you like, as long as that class is assigned to the appropriate element, like this:


```
<style type="text/css">
.TDK:hover {
color: #ff0000;
font-size: bold;
background-color: #000000;
}

......

<div class="TDK"><p>This is some text</p></div>
```



> If I do get the style rule created, then do I put the image (a3.jpg) only in the background tab? Where do I put the 2 sets of sizes?
> My images, a1.jpg (default) and a2.jpg (hover), were each 932px wide and 130px tall, so the new image, a3.jpg, is 932px x 260px.


The first sample CSS above covers this. Using that CSS as a guide:


```
.myImage { 
width: 100px; 
height: 100px; 
background: url('/path/to/myImage.png') no-repeat; 
background-position: 0 -100px; 
}
.myImage:hover { 
background-position: 0 0; 
}
```
You would need to have an element (a DIV or something else) with the class "myImage". That element would have the composite image (a3.jpg in your case) as the background, but positioned so that the default image is shown. Then, when the mouse hovers over that element, the background is repositioned so the "hover" image is shown.

So, since your "a3" image has dimensions 932px x 260px, that means your default and hover images are one above the other. This means, you will need to adjust the background position for the 'Y' axis (to move the background up or down).

Here is a sample test case:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>CSS Sprite background test</title>
  <style type="text/css">
.divHover {
[b][color=red]background: transparent url(a3.jpg) no-repeat 0 0;
display: block;
width: 932px;
height: 130px;[/color][/b]
margin-right: auto;
margin-left: auto;
}
.divHover:hover {
[b][color=red]background: url(a3.jpg) 0 130px;[/color][/b]
}
  </style>
</head>
<body
 style="color: rgb(0, 0, 0); background-color: rgb(204, 255, 255);"
 alink="#000099" link="#000099" vlink="#990099">
<div class="divHover"></div>
</body>
</html>
```
Save this HTML to a file and save the attached image in the same spot as the above HTML. Then, load it in your browser and see what happens. 

Peace...


----------



## abujoe (Apr 19, 2009)

I think I have it! Most of it anyway. You know I have been looking at different rollover/hover/mouseover scripts and styles for months. (So long that I'm embarrassed to say specifically how many months) Of course, the first 75 or so I found were indecipherable to me so I just kept googling. I had this picture in my head of exactly what I wanted to do and I've been sort of obsessed. I went to Yahoo Answers several times, but the placement of the HTML always threw me.
Working in Kompozer, whenever I'd place something in the head section it would eventually pop up on the Normal View up on the top of everything even if it was also sitting there perfectly situated where I had placed it on the page. 
So anyway, I read through your reply and tried to visualize how it would fit onto my page and I just kept trying different ways. Thank you for taking so much time to help a complete stranger; this is an amazing community on this forum!
THIS time I avoided putting the HTML in the head in the source view until after I finished writing the CSS rule in the style sheet.
Here is the CSS I used:

.rollover
background: transparent url(a3hover.jpg) no-repeat scroll 0 0;
height: 90px;
width: 940px;
display: block;

.rollover:hover
background-position: 0 -130px;

That's as far as I got and the image appeared on the page right where I wanted it! And it switched over when I ran the mouse across it! I wasn't even done putting the rules in the CSS editor, but I just stopped right there.
So, I saved it quick and I haven't done anything yet with the HTML. This is what I was going to paste in the head:





Will it really slow down opening my page if I don't put the HTML in? I'm a little afraid to. I'm worried about the image popping up again when I do. Is that just a Kompozer eccentricity or is it me?
Of course, I have yet to test anything on different browsers, to say nothing of having this published.
Thank you so much,


----------



## tomdkat (May 6, 2006)

abujoe said:


> I think I have it! Most of it anyway.


Great! 


> So, I saved it quick and I havent done anything yet with the HTML. This is what I was going to paste in the head:


Ok, I'm not sure this is what you want to do. The CSS style you defined will *already* give the anchor the appropriate background because it is assigned class "rollover". So, this should cause the background image to appear:


```
<a href="sesite.htm" class="rollover"></a>
```
By placing the img tag inside the anchor tag, you will have the hover image displayed *before* you move the mouse over the anchor element.

So, I don't think you need to put the img inside the anchor, as you propose.

Now, since you've got a "sprite" defined, the image will be downloaded automatically by the browser, by virtue of being referenced in the CSS style rule, so the image will be downloaded when the page first loads. The reason you want to use the "sprite" is when the mouse hovers over the element, you don't want the browser to have to fetch the "hover" image. This gives the perception of a "fast" site since the user isn't waiting for images to download a lot.

Now, you WILL have to code some HTML since you will need to define the element that is assigned the "rollover" class. Without an element of class "rollover" in the HTML, the background image won't appear and behave the way you want when the mouse hovers over it.

If you just need the background image to appear and change when the mouse moves over it, use a "DIV", which is a generic element. If you want the user to be able to click something, you can either put an anchor inside the "rollover" DIV or you can assign the anchor the "rollover" class, as you propose above. If you can post a link to the site where this will go, we can get a better idea of what behavior you want and we can better advise you on how to proceed. 

Peace...


----------



## abujoe (Apr 19, 2009)

Ok, I have been experimenting with where to place this:
sesite.htm in the Source view.
Maybe I misunderstood, but I was under the impression I needed to put it somewhere up in the head area:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HOME

sesite.htm

*blah blah blah

Either I have the placement wrong or KompoZer is playing tricks with me. I see above that my style sheet added where the image is placed. Is that all thats necessary perhaps? As I said before, using just the CSS, the image is behaving perfectly, its only when I add the html that I get the phantom image on top.



tomdkat said:



I am really looking forward to the day I will have a page or 2 published to the site, but I kept getting "publishing failed" messages so I decided to remake all the pages (only 8). I had made them using tutorials from a site called site wizard. It took me a couple months, I can only work on this in my "free" time. It was probably a good way to get my feet wet, but the pages were all made of tables, no CSS, so I scrapped them and now I am using the User Guide from Charles Cooke that I linked to from the KompoZer help button. I've read it all and re-read many, many passages, and its been very helpful. I'm afraid the issue is me, until I am puzzling over a certain problem, I can't really see how to use the pieces of the guide. 
...and I know that dealing with the whole publishing issue again is awaiting me!
But I'm getting there, maybe I'll have something on that server I've been paying for since January pretty soon.

abujoe

Click to expand...

*


----------



## tomdkat (May 6, 2006)

abujoe said:


> Ok, I have been experimenting with where to place this:
> sesite.htm in the Source view.
> Maybe I misunderstood, but I was under the impression I needed to put it somewhere up in the head area:


Nope, you don't need to put that anchor in the block. That would normally go inside the element but since you've already got the image appearing where you want it to appear, you can delete the anchor you've highlighted in blue. 

Kompozer's publisher isn't very good so you should use a third party FTP client to upload the files to your server.

Peace...


----------



## abujoe (Apr 19, 2009)

Thanks so much to everyone for the answers and for pointing me to the great links! I don't know where I got the idea anything should be put up there in the head block, but I am very happy now with the hover image, it looks even better that I thought! 
abujoe


----------



## tomdkat (May 6, 2006)

Great! :up:

Peace...


----------

