Log in

View Full Version : 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" :D


Thanks
rangana
02-23-2008, 08:36 AM
CSS can't create image. To create CSS effects during hover. You could have something like:


<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. :D
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 :

<!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> :D
alsolaei
02-23-2008, 10:57 AM
i tried to also change the code but didn't work

any other way :D or how can i learn css easily :cool:

thanks
TimFA
02-23-2008, 04:08 PM
Here, try this.

CSS


.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


<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 ;)
alsolaei
02-25-2008, 05:28 PM
it's give me the code text in the normal preview ( may be i paste it in the wrong place)

so is the code text should be after ...
thetestingsite
02-25-2008, 05:47 PM
Ok, in your text editor (or being that you are using frontpage, go to the HTML or Code View) and paste in the following:



<!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="#">Test</a>

Contents Here
</a>
</body>
</html>


After that, make sure you have images made up with the same names as those highlighted above. If it still does not work, let us know what is not working and we can help you further.

Hope this helps.
alsolaei
02-25-2008, 06:01 PM
:D :D Thank you :D

it's working now

so how I can configure the hight and width ?
thetestingsite
02-25-2008, 06:46 PM
you can either change the height and width of the image itself, or you can place these attributes in the code:



<style type="text/css">
a:link {background:url('normal.jpg'); text-decoration:none; height: 5px; width: 5px;}
a:hover{background:url('hover.jpg'); text-decoration:underline; height: 5px; width: 5px;}
a:active{background:url('active.jpg'); color:#0000ff; height: 5px; width: 5px;}
</style>


Hope this helps.
alsolaei
02-26-2008, 03:26 PM
Nice :D

Thanks alot