CSS image?

**alsolaei** · 02-23-2008, 08:26 AM

HI all

i did this with frontpage DHTML but it's gave me 2 styles and I need 3 so how can i make a CCS button thats have 3 styles 1- the normal image 2- the mouse over image 3- the on click image.

and how can i add it to the HTML in frontpage " im not an expert"

Thanks

**rangana** · 02-23-2008, 08:36 AM

CSS can't create image. To create CSS effects during hover. You could have something like:

Code:

<html>
<head>
<title>My Title Here</title>
<style type="text/css">
#myid:hover{background:url('myimage.jpg'); color:#000;}
</style>
</head>
<body>
<div id="myid">
Contents Here
</div>
</body>
</html>

In frontpage, I suppose there are 3 views. The design,normal and HTML. You could add your codes on the HTML view.

**alsolaei** · 02-23-2008, 09:12 AM

no i didn't mean the CCS will create the image

here is more details

i have 3 images

1- the normal image

2- the mouse over image " will change when you mouse over the normal image"

3 on click image " when you click on the normal image"

so it's just change the images not the colors

**rangana** · 02-23-2008, 09:36 AM

See if this code fit your requirements :

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
a:link{background:url('normal.jpg'); text-decoration:none;}
a:hover{background:url('hover.jpg'); text-decoration:underline;}
a:active{background:url('active.jpg'); color:#0000ff;}
</style>
</head>
<body>
<a href="#">
Contents Here
</a>
</body>
</html>

**alsolaei** · 02-23-2008, 10:57 AM

i tried to also change the code but didn't work

any other way

or how can i learn css easily

thanks

**TimFA** · 02-23-2008, 04:08 PM

Here, try this.

CSS

Code:

.image
a:link,
a:visited {
width: width_of_image;
height: height_of_image;
cursor: default;
display: block;
background: url(NORMAL_IMAGE);
}

.image
a:hover {
background: url(ON_HOVER_IMAGE);
}

.image
a:active {
background: url(ON_CLICK_IMAGE);
}

HTML

Code:

<div class="image">
<a href="#">&bnsp;</a>
</div>

If you were going to link it anyways, then just change the above one. It seems overly complicated to me, but it was the way I use for my sites nav so at least it works.

Let me know how it goes,
Tim

**alsolaei** · 02-25-2008, 04:12 PM

will i may still cant make it

**BLiZZaRD** · 02-25-2008, 04:42 PM

What about the above 2 examples isn't working for you? They both work...

**alsolaei** · 02-25-2008, 05:03 PM

I have tried to do them but no use ( maybe because I didn't but them in the right way)

so can you please make it Easier

thanks

**BLiZZaRD** · 02-25-2008, 05:20 PM

I understand that, but what exactly isn't working? Do the images not show up? Some but not all? Explain what isn't working so that we can assist you.

If I don't know whats wrong I can't fix it

Thread: CSS image?

Thread Tools

Search Thread

CSS image?

Bookmarks

Bookmarks

Posting Permissions