But it is not working also i need to work this for all remaining button images also, here i just hard coded the image name(button1.gif,buton2.gif)
Please tel me how can i change my code to achieve it
Suraj your CSS may not be working because it expects to find the image button1.gif in the same folder as your CSS file so you will need to update the path to the image.
for example:
[code]
background: url("/images/button1.gif") no-repeat top left;
[/code]
Thanks for ur quick reply, I just copy the images where my css file is there, My css file is in folder CSS,i copied required images in that folder and i changed url as
background: url("/CSS/button1.gif") no-repeat top left;
but no use. it didn't showing any effect on the image. please tel me where iam doing mistake,
shall i create any folder(images) in CSS folder to place images & change the code like this
background: url("/CSS/images/button1.gif") no-repeat top left;
Hi warren,
Pls forgive me for my past mistakes, pls save me from this problem, i vl explain again wat my problem is.. please forgive and give reply to me. First of all iam loading image in my site by using macro as
As i need to change image on mouseover, i use CSS for that purpose, so i changed the template as
{
background-image:url('Buttons_08.png') no-repeat center right;
}
i copied the images where the css file is but there is no effect , please tel me wat i have to do?
iam have been suffering from this problem from so many days ,please save me.....
Suraj I have politely told you this is nothing to do with Umbraco and is a general XHTML/CSS question.
The XHTML template you are trying to implement I recommend you try on that static xhtml file. Once you have managed to get your CSS image rollover to work on your static template.htm file then you can attempt to intergrate it into Umbraco.
Browse to your page using FireFox and use the FireFox addon [url]http://getfirebug.com[/url] and see why the CSS is not loading in the images.
I have politely answered your question which has nothing to do with Umbraco and will not be answering anymore of you general XHTML/CSS questions until you have a specific Umbraco question/problem you would like help with.
You haven't supplied the code for your AboutUsImage macro, but my guess is that your macro outputs an img-tag, with an image you want to show.
Problem is that your stylesheet uses a background image that will be behind the image in the a-tag. This means that the image in the a-tag is sitting on top of the background image defined in the stylesheet, and as a consequence of this your image roll-over that swithches the background image doesn't show.
Try to remove the macro from the a-tag and put a in it and see what happens.
Writing CSS file for the mouseover effect on images
Hi all,
how to write CSS for the following tamplate, actually i need to change images on mouseover.
i had template as:
i tried it like this :
Template:
------------
Sample.CSS:
---------------
#img
{
display: block;
width: 107px;
height: 23px;
background: url("button1.gif") no-repeat 0 0;
}
#img:hover
{
background: url("button2.gif") no-repeat 0 0;
}
But it is not working also i need to work this for all remaining button images also, here i just hard coded the image name(button1.gif,buton2.gif)
Please tel me how can i change my code to achieve it
Thanks in advance
Suraj
Suraj your CSS may not be working because it expects to find the image button1.gif in the same folder as your CSS file so you will need to update the path to the image.
for example:
[code]
background: url("/images/button1.gif") no-repeat top left;
[/code]
I hope this helps you out.
Warren
Thanks for ur quick reply, I just copy the images where my css file is there, My css file is in folder CSS,i copied required images in that folder and i changed url as
background: url("/CSS/button1.gif") no-repeat top left;
but no use. it didn't showing any effect on the image. please tel me where iam doing mistake,
shall i create any folder(images) in CSS folder to place images & change the code like this
background: url("/CSS/images/button1.gif") no-repeat top left;
please save me from this problem.........
Cheers,
Suraj
Ok, this post is no longer umbraco related...
Please google for some css tutorial as this is what you're currently struggling with. I'm sure you'll find 1000s of pointers.
Of course, you're still invited to ask as many questions as possible regarding setting up umbraco to serve your website(s).
Cheers,
/Dirk
Hi warren,
Pls forgive me for my past mistakes, pls save me from this problem, i vl explain again wat my problem is.. please forgive and give reply to me. First of all iam loading image in my site by using macro as
As i need to change image on mouseover, i use CSS for that purpose, so i changed the template as
.........
and write the CSS file as:
img
{
display: block;
width: 180px;
height: 27px;
background-image:url('Buttons_04.png') no-repeat center right;
}
img:hover
{
background-image:url('Buttons_08.png') no-repeat center right;
}
i copied the images where the css file is but there is no effect , please tel me wat i have to do?
iam have been suffering from this problem from so many days ,please save me.....
cheers,
suraj
Suraj I have politely told you this is nothing to do with Umbraco and is a general XHTML/CSS question.
The XHTML template you are trying to implement I recommend you try on that static xhtml file. Once you have managed to get your CSS image rollover to work on your static template.htm file then you can attempt to intergrate it into Umbraco.
Browse to your page using FireFox and use the FireFox addon [url]http://getfirebug.com[/url] and see why the CSS is not loading in the images.
I have politely answered your question which has nothing to do with Umbraco and will not be answering anymore of you general XHTML/CSS questions until you have a specific Umbraco question/problem you would like help with.
Warren :)
You haven't supplied the code for your AboutUsImage macro, but my guess is that your macro outputs an img-tag, with an image you want to show.
Problem is that your stylesheet uses a background image that will be behind the image in the a-tag. This means that the image in the a-tag is sitting on top of the background image defined in the stylesheet, and as a consequence of this your image roll-over that swithches the background image doesn't show.
Try to remove the macro from the a-tag and put a in it and see what happens.
Regards
Jesper Hauge
A simple.....CSS Image Hover Effects
Crony
is working on a reply...