Help with .xxx a:hover

O

outcast

New Member
I am trying to make a picture change when you mouse over it, but I cant get it to work :/ I have an example here: http://www.sendspace.com/file/cmn1n5

In this there is a picture made out of two colored boxes. I want the green box to show normally, and the blue one to show when mouse over.

The main problem is that as soon as i insert the "a" in my class in Css the box jumps out of it current position and sets itself in the top left corner of the page :/

How can I make it stay in the same place and have this mouse over change the picture? Also how do I make it so there can be more different pictures if for example the user clicks down the mouse button on the picutre a red box shows?
 
benjamin.morgan

benjamin.morgan

New Member
Umm, the clicking down would have to be Javascript. If you are doing it with a tags/ div tags with a background image. then you could do the hover. Really would help if you pasted code or had it uploaded online.

---Don't like downloading anything---
 
Phreaddee

Phreaddee

Super Moderator
Staff member
either write the css/html in here, or post a live link.

its a non-descript download
your thread title is xxx ...

join the dots - no one will download it.
we dont want to recreate it, and its only relevant in situ...

please, protocol
harsh but fair.
 
O

outcast

New Member
Phreaddee said:
either write the css/html in here, or post a live link.

its a non-descript download
your thread title is xxx ...

join the dots - no one will download it.
we dont want to recreate it, and its only relevant in situ...

please, protocol
harsh but fair.
Click to expand...

Hm I dont understand the problem. The link I posted is to a zip with an isolated example with what I am trying to do with the html, css and picture file.
My title .xxx stands for a class based css that uses the a:hover, X is often used as something in place of something else.

But here is the Html code and CSS without the picture:
----------------------------------------------------------------------
<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" href="Test.css" />
</head>

<body>
<img class="xxx" src="pic.png" />
</body>

</html>
------------------------------------------------------------------------
@charset "utf-8";
/* CSS Document */


.xxx a{


position:absolute;
top: 100px;
left: 670px;
height:27px;
width:44px;

}

.xxx a:hover{


position:absolute;
top: 100px;
left: 670px;


}
 
ronaldroe

ronaldroe

Super Moderator
Staff member
I don't understand what you're trying to do here. There's no <a> element in your HTML. Your hover also doesn't change anything. Could you be more clear with what you're trying to do?

If you're just trying to swap an image, you can use a div and just set the background. Then, apply the :hover pseudo class directly to the div and change the background.
 
O

outcast

New Member
ronaldroe said:
I don't understand what you're trying to do here. There's no <a> element in your HTML. Your hover also doesn't change anything. Could you be more clear with what you're trying to do?

If you're just trying to swap an image, you can use a div and just set the background. Then, apply the :hover pseudo class directly to the div and change the background.
Click to expand...

I want to use just one png image with different "states" of the object, so it shows only a part of the image, and when hovering with mouse over it shows the other part of the png so it looks like its two images. Do you understand? I have read that this methiod is better and faster then using two different png:s ?
 
benjamin.morgan

benjamin.morgan

New Member
What do you mean jump out of place? It shouldn't jump out of place. Just read the thing on image sprites and instead of two elements just add one as a:hover and the second dimensions of the sprite.
 
You must log in or register to reply here.
Top