CSS - Rollover Effect
My current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect.
What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change. So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result. Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it. Code: body#home a#home, body#products a#prodnav, body#faq a#faqnav, body#contact a#connav { background: url(images/02.png) no-repeat; } Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> .cssnav { position: relative; font-family: BrowalliaUPC; font-size: 25px; background: url(images/02.png) no-repeat; white-space: nowrap; display: block; width: 100; height: 30; margin: 0; padding: 0; } .cssnav a { display: block; color: #000000; font-size: 25px; width: 211px; height: 44px; display: block; float: left; color: white; text-decoration: none; } .cssnav img { width: 100px; height: 30px; border: 0 } * html a:hover { visibility:visible } .cssnav a:hover img { visibility:hidden } .cssnav span { position: absolute; left: -1px; top: -1px; margin: 0px; padding: 0px; cursor: pointer; width: 100px; } </style> <title>Untitled Document</title> </head> <body id="home"> <div class="cssnav"> <a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" /> <center> <span>Home</span> </center></a></div> </body> </html> Similar TutorialsI am having trouble getting the widths to work right. I got this code off the site and I am not sure what all it does. There are about 4 or 5 places that you can adjust the width. Can some one check out the CSS below and let me know what all it does. Code: body { margin:50px; background-color:#ffffff; font:13px Arial; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; position: absolute; } /* now lets get rid of position:relative for IE */ * #nav, * #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { width: 82px; display: block; color: black; text-decoration: none; background-color: white; border: 1px solid #000000; padding: 5px; font:12px verdana bold; /* N6 needs this to cascasde the font style */ background:url(menubg.jpg) no-repeat 0px 0px; text-align: center; } /* BMH for IE 5 */ * html #nav a { width: 95px; w\idth: 95px; } #nav li { float: left; width: 90px; /* width of the individual bars */ position: relative; } #nav li ul { position: absolute; left: -999em; width: 95px; } #nav li a:hover { color: #FFFFFF; background-color: #B40820; background:url(menubg.jpg) no-repeat 0px -40px; } #nav li:hover ul, #nav li.sfhover ul { left: auto ; } #nav ul { text-align: center; display: block; } Here is the site (Test Menu) it is on currently. I want to make it centered in the table any ideas? Pretty much I am a newbie to CSS and JS and I was hoping someone could outline the CSS a little better and let me know what it does. Thanks James Ok ive never really used this effect on any of my designs but i would like to. How do i make a <td> background color change on mouse over with css?? and also how would i align an image to the bottom right or bottom left part of a paragraph, i allready know how to do it to the top right and top left. thanks in advance. as you can see on: Click Me when you hover over the links on the menu the height of the box changes since it is set to auto, is there a fix so it doesn't move? i know that IE doesnt support the :hover being added to anything but links, is this the same with :active? was just wondering whether i could have a style change when the user clicks on a form button I'm perplexed. I have a div, Code: <div class="classname"> containing a table in muliple pages. I tried applying css style to the div using .classname{ css }, backgroundcolor took affect but color and font-size didn't, its works on others pages though. So I tried Code: <table style="color: red; font-size: 12px;"> This worked! I can't understand why the css would not affect the div itself. Talk about annoying. If anyone has any possible explanations, I'd like to hear. css are assigned to individual div's. body has backgroundcolor only. Im trying to a hover effect with css kinda like the one here http://tabbywrocks.tumblr.com/ on images. i was wondering if anybody could give me a site to some example code that i could look at or something. i looked a bit myself but i couldnt find anything that had exactly what i wanted. Im hoping you don't need JavaScript for it but i think you might Hi there, I am trying to acheive an effect like the image below.. so when the link is hovered on, there is a light gray bg, but with a 1px space above and below the bg. This is my CSS I have, but it is displaying what looks like a 2px border because my link has a top and bottom gray border. Any ideas how I can acheive this effect? PHP Code: #categories_home a{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; padding: 2px 2px 2px 25px; border-bottom: 1px solid #ececec; border-top: 1px solid #ececec; display:block; } #categories_home a:hover{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; display:block; padding: 2px 2px 2px 25px; background-color: #f6f6f6; border-bottom: 1px solid #ffffff; border-top: 1px solid #ffffff; } can some one please help me out in creating that red areas... is any method possible using CSS tht cutting border margin effect... or is using a image the only option. even with using image. how can i get the right side one ? the corner part where its cut cross .. The url has been blocked? So I'll try this way: spidersandmilkdotcomforwardslashspiderdotcss The web page that I am having a problem editing is: www dot postalstampssale dot com We are having a problem getting the mouse over effect on the three (3) jpg images in the upper right hand corner. We have added the appropriate CSS mouse over coding just under the <TITLE> are on the top. We have a;sp added the CSS coding at the end of the page. However, we can not figure out how to attach the proper coding to each image. The current coding is: <img src="Images/Canada/Canada_Scott_356_Front.jpg" width="90" height="60" alt="" border="0" align="right"> <img src="Images/Germany/Germany_Scott_65.jpg" width="89" height="62" alt="" border="0" align="right"> <img src="Images/Bermuda/Bermuda_Scott_55.jpg" width="54" height="64" alt="" border="0" align="right"> Can someone please suggest how to modify the above coding. Thank you in advance. I'm creating a menu and use margin as a separator between menu elements. On the first and second level, margin works but no matter what I put on the third, they're all stick together. html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="menu_1st_normal"> <a href="default.asp?catID=17">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=5">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=44">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=45">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=46">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=6">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=7">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=8">abcde</a> </div> <div class="menu_1st_normal"> <a href="default.asp?catID=9">abcde</a> </div> </body> </html>
menu.css: css Code: Original - css Code .menu_1st_top{font-size:12px;padding:3px 2px 4px 12px; background: url(../images/menu_top_left.gif) no-repeat #0066CC 0px 0px; font-weight:bold;margin:0px 0 1px 0;color:white} .menu_1st_top a{color:white; font-weight:bold;} /* 1st level menu normal*/ .menu_1st_normal{font-size:12px;padding:3px 2px 4px 12px; background: #0066CC 0px 0px; font-weight:bold;margin:0 0 1px 0;color:white} .menu_1st_normal a{color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* 2nd level menu normal*/ .menu_2nd_normal{font-size:11px;padding:3px 2px 4px 20px; background:#3399FF;margin:0px 0px 1px 0px;} .menu_2nd_normal a{font-size:11px;color:white;font-weight:bold;} /* 3r level menu normal */ .menu_3rd_normal{font-size:11px;padding:3px 2px 4px 28px; background:#33CCFF;margin 0px 0px 1px 0px;} .menu_3rd_normal a{font-size:11px;color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* bottom image */ .menu_bottom_image{width:155px;height:10px;background:url(../images/menu_bottom_155.gif) no-repeat;font-size:1px;margin:0 0 1px 0;}
I have try with both firefox and IE, the result is the same. Any ideas? Thank you. Hi guys, This site Valentino dot com has the menu slide out another transparent image when you mouse over it. How is this done? How can I do this? What is the code etc? Peter I am making this page and I have a css link thing on my pages and on the mycss.ccs has the code to change the kind of button but I only want it to take a effect with the buttons that I give them a name that matches the name of the buttons it should effect. Thank you. hi , how to simulate (nowrap) effect using CSS thanks http://www.meyerweb.com/eric/css/ed...ral/glassy.html Doesn't work in IE (surprise surprise) but apart from that it is an extremely cool effect! Along the left side of bing are some text links in a table cell. When bing loads you can see a semi-transparent block to give the text contrast if the background has a light color. Also, there is a rollover effect that shades the text. 1. How do I get the semi-transparency? 2. how do Iget the rollover effect? I'm trying to figure out how to do something that I'm sure is possible in CSS, but I haven't seen an example of it anywhere yet. I would like to create a grid. The boxes in the grid would contain text, and when you mouse-over that box it would change to different text. The idea behind this is that in the top row you would have a problem. Then if you follow the column down from that problem you would see the name of a product, and when you mouseover the name of the product, the text changes from the name of the product to the solution the product offers. Hopefully I didn't convolute that too much. Has anyone seen something like this that might steer me in the right direction? I just got done with the second CSS tutorial for today. Please drop a comment telling me what you think. http://www.majd-gfx.com/tutorials.php?cmd=view&cat=css&id=16 I have a style sheet, now I am modifying some buttons on some of my pages. So I added the following to my style sheet: INPUT.NEW { background-color: EDEDED; border-color: EDEDED; color: 024467; font-family: arial, verdana, ms sans serif; font-size: 7pt; } And used the following line to call it in the button: <input class="INPUT.NEW" type="button" value="Back" onclick="document.location.href='whatever.jsp?theFlag=1'"> Which doesn't work, but if I rename "INPUT.NEW" to just "INPUT" on both pages it works. But I can't have it called INPUT because one already exists on the page. This is a style sheet that I did not write, someone else did, so I'm trying to make this change. Any help would be appreciated. question about onmouseout effect using css my question is if i move the mouse over an image which is a link to get any effect i can use a:hover{ } lets say for example i have a horizontal row which contains images and these are links, ex= home aboutus ... total of 5 links just above this horizontal row lets say i have the same set of 5 images which by default are hidden using display: none; <img src="homehidden.jpg" id="home"> <img src="abouthidden.jpg" id="about"> ... #home{ display: none; } #about{ display: none; } ... only when i mouse over any of the links which are visible by default, i would like to show 1 image relavant to the link ex=home which is above all the 5 visible images so should my css code be visiblerowhomeimage:hover{ #home.visibility: visible; } which would show the invisible image on mouse over for home, aboutus etc... please advice if my code is correct. thanks. |