FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

css background

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Dark-Tech
now this is for a site that uses php and allows you to create a css code to cover a certain area in your own design...

anyway

i want to know how to do a mouseover effect or mouse in or hover effect on an image to affect something else

here is some or the body code i should say

body {
background-color: #000000;
color:#000;
background-image: url(http://www.cyberneticrisis.frihost.net/jpg/gaia/tech2.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom right;
}


i want the opacity of all things on the site to have its opacity change

#profile, #details, #wishlist, #about, #journal, #friends, #comments, #signature { background: #000000; filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5; }


in other words if i do a mouse over the
http://www.cyberneticrisis.frihost.net/jpg/gaia/tech2.jpg picture i want the opacity of all those things to be set to some thing or maybe even a simple display:none

and when the mouse is no longer hovering over the image i want it to show everything again or display all

can someone help me
Ranfaroth
Can you control the structure of your XHTML page ?
If it is the case, you can achieve what you want with something like that :
Code:
<div id"=hover">
<div id="profile" />
...[and all the elements you want to change]...
</div>
Code:
#hover {backgroun-image : url("your image");...}
#hover:hover * {opacity: 0.5;}
And you'll have to position all those children elements with absolute positionning...
cafefort
A tiny addition, hope you don't mind Smile

Code:
<div id"=hover">
<div id="profile" /> <--! can't close it this way-->
...[and all the elements you want to change]...
</div><!--profile div close it here-->
</div>


For the css:
Code:
#hover {backgroun-image : url("your image");...}
#hover:hover * {opacity: 0.5;}


1) the quotes in "your image" are actually optional according to the W3C doc.

2) #hover:hover : Well this won't work on IE, bacause our dear microsoft guys, don't implement hover pseudo to anything but links. DIVs in MSIE can't hold that.

3) "Opacity" won't work in IE too, there's another proprety they use... "filter" if my memories are good...

Anyway, that will of course function under firefox, opera and konqueror
but it will not under IE6 and above.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.