|
CSS - How To Change This Rollover Code?
In the HTML below I use CSS-code of Bonrouge (see http://bonrouge.com/br.php?page=rollover2) to make a rollover for an image. I would like to change the code so that onMouseOut the image doesn't change back to the original one but remains the rollover image. I have tried a lot of things but cannot get it working. Could someone help?
This is the code I use now: Code: <html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<style type="text/css"><!--
/** rollover 2 (pure css) **/
#rollover2 a {text-decoration:none; display:block; height:100%; }
* html #rollover2 a {width:100%; }
#rollover2 {list-style-type:none; width:150px; margin:auto; padding:0;}
#rollover2 li {float:left; height:145px; width:145px; }
#rollover2 li#a a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/acteuropt.jpg);}
#rollover2 li#a a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/kopmetprisma3opt.jpg); }
#rollover2 li#b a{background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/goudvisbovenopt.jpg); }
#rollover2 li#b a:hover {background-image:url(http://www.deacademievoorinnovatieftrainen.nl/images/denk2opt.jpg); }
#rollover2 a img {border:0; width:0; height:1px; margin-top:-1px; font-size:0; overflow:hidden; }
-->
</style>
</head>
<body>
<div id="cssrollovers">
<h1>Pure CSS Rollovers</h1>
On hover, the background-image changes.
<br>The :hover images don't preload, so we can fix that by putting them in the links but styled so that they are invisible.
<br><br>
<ul id="rollover2" class="cfix">
<li id="a"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/denk1opt.jpg" width="30px"; height="30px" border="0" /></a></li>
<li id="b"><a href="#"><img src="http://www.deacademievoorinnovatieftrainen.nl/images/johnhopt.jpg" width="30px"; height="30px" border="0"/></a></li>
</ul>
</div>
</body>
</html>
Similar TutorialsI developed a site years ago using JavaScript for a roll-over function. Now the client is having issues with customers not being able to use the roll-over function because they have Java Script disabled. Is it possible to do this using css? For an example, see this page: chellatextiles.com/Textfab/cocotweed.html Rollover a color thumbnail and it replaces the fabric details. There are about 500 thumbnails through the site that I would need to change. Hey guys, I'm hoping what I need to do involves only CSS (though, it wouldn't shock me if I needed a lot more!) Anyways, the basic thing I'm doing is a table that hold lots of numbers. I'm creating a "times table" - which looks roughly something like this: ......1 2 3 //top row (multiples) 1.....1 2 3 2.....2 4 6 3.....3 6 9 Now, when you rollover, let's say, the '6' - the TD background color for the '6', left '2' and top '3' would change to a different color (bolded in this example). This would work the same way for every other number as well, which involves overlapping classes. I can only get one rollover working, with simple 'hover' commands. I've search for an answer for hours, to no avail. any suggestions? And here's a more "code specific" example of the table: <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>1</td><td>1</td><td>2</td><td>3</td> </tr> <tr> <td>2</td><td>2</td><td>4</td><td>6</td> </tr> <tr> <td>3</td><td>3</td><td>6</td><td>9</td> </tr> </table> Thanks so much guys! I would like to create a text rollover that not only changes color but also changes the word being displayed. For example: the link on the screen would first appear to be red and would read "A". When rolled over, the link would turn black and the would read "ABOUT". I have read about transparencies and visibility, but am not sure how to impliment it. I want to keep the coding as simple as possible. Nothing is worse than too much code! Thanks. Hello all, Working on this page: http://gatehouse.graffetto.com/rollover.html When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div. Any ideas how to rig this up for IE? Here's the simple version of the code: Code: <div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';"> <div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div> <div class="storyByline">1/7/07 - By Max Bowen</div> <div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div> </div> any help would be great, thanks! I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! Hi, q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text. q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image? I am trying build a bottom bucket with two different links, that when you rollover either one of the images a different image is shown. Well I have all of that working but if you rollover the first image and while the li ul image is being shown take your mouse and move to the right. The hover state of the second ul is now shown. But if you go backwards and start moving your mouse to the left, nothing happens, which is great! I have tired all sorts of things. Right now I have a link that has a very stripped down version of what it is suppose to be. I have tired different z-index's but still nothing. Thanks for the help! http:// www. movementinteractive. com/ clients/ ParkAve_web/web/tab_test.html Hi, I have a button as follow: Code:
#memberlogin .login{
background:url(/images/memberlogin_btn.gif) no-repeat left top;
display:block;
width:130px;
height:31px;
border:0;
}
I need to make a rollover. This is one image, same as this method: http://www.nowcss.com/links/image-rollover-with-css I tried it this way Code:
#memberlogin a.login span {
display: none;
}
#memberlogin a.login:hover {
background: url(/images/memberlogin_btn.gif) repeat 0px -31px;
}
but it's not working, do you know what I'm doing wrong here? Thanks in advance. I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text. <style type="text/css"> #nav a:hover { background: url("arrow_hover.png") no-repeat; } #nav a img { width: 88px; height: 67px; position: absolute; top: 200px; left: 500px; border: 1px solid black; visibility: hidden; } #nav a:hover img { visibility:visible; } </style> <div id="nav"> <ul> <li><a href="#">Link1<img src="camera.jpg" alt="" /></a> <li><a href="#">Link2<<img src="home.png" alt="" /></a></li> <li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li> <li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li> </ul> </div> Hi everyone, I'm having a rollover image problem in IE6. The problem isn't that the rollover isn't working - it's that the initial image before the rollover isn't displaying. You can see what I mean at: http://www.francesli.myubertor.com/ Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML for Menu: Code: <!-- --------------- main menu --------------- --> <div id='menu_outer'> <div id='menu_inner'> <ul> <li id="up_menu1" class="sel"> <a class="sel" href="/" title="" target="" rel="">Home</a> </li> <li id="up_menu2" class="unsel"> <a class="unsel" href="/Properties.php" title="" target="" rel="">Properties</a> <ul> <li id="up_menu2_1" class="unsel"> <a class="unsel" href="/ActiveListings.php" title="" target="" rel="">Active Listings</a> </li> </ul> </li> <li id="up_menu3" class="unsel"> <a class="unsel" href="/ForBuyers.php" title="" target="" rel="">For Buyers</a> <ul> <li id="up_menu3_1" class="unsel"> <a class="unsel" href="/FirstTimeBuyers.ubr" title="" target="" rel="">First Time Buyers</a> </li> </ul> </li> <li id="up_menu4" class="unsel"> <a class="unsel" href="/ForSellers.php" title="" target="" rel="">For Sellers</a> <ul> <li id="up_menu4_1" class="unsel"> <a class="unsel" href="/20TipsforSellingYourHome.ubr" title="" target="" rel="">20 Tips for Selling Your Home</a> </li> </ul> </li> <li id="up_menu5" class="unsel"> <a class="unsel" href="/Blog.php" title="" target="" rel="">Blog</a> </li> <li id="up_menu6" class="unsel"> <a class="unsel" href="/Links.php" title="" target="" rel="">Links</a> </li> <li id="up_menu7" class="unsel"> <a class="unsel" href="/Contact.php" title="" target="" rel="">Contact</a> <ul> <li id="up_menu7_1" class="unsel"> <a class="unsel" href="/AboutMe.ubr" title="" target="" rel="">About Me</a> </li> </ul> </li> </ul> </div> </div> CSS for Menu: Code:
/* Navigation Menu */
#menu_outer {
top: 77px;
background: transparent url(../../content/image/287.png) repeat-x scroll 0% 0%;
height: 42px;
padding-top: 7px;
text-transform: uppercase;
}
#ubertor #menu_outer li a {
color: #FFFFFF;
font-weight: bold;
}
/* Home */
#up_menu1.sel a{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 60px;
height: 27px;
}
#up_menu1.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
width: 60px;
height: 27px;
}
#up_menu1.unsel{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 60px;
height: 27px;
}
/* Properties */
#up_menu2.sel a, #up_menu2.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 90px;
height: 27px;
}
/* For Buyers */
#up_menu3.sel a, #up_menu3.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 99px;
height: 27px;
}
/* For Sellers */
#up_menu4.sel a, #up_menu4.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 101px;
height: 27px;
}
/* Blog */
#up_menu5.sel a, #up_menu5.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 58px;
height: 27px;
}
/* Links */
#up_menu6.sela, #up_menu6.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 65px;
height: 27px;
}
/* Contact */
#up_menu7.sel a, #up_menu7.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 82px;
height: 27px;
}
#ubertor #menu_outer li li a {
text-transform: none;
background-color:#CCCCCC;
background-image:none;
color:#222222;
display:block;
float:none;
padding:2px 10px;
text-indent:0;
width:auto;
height: auto;
}
#menu_inner ul li a, #menu_inner ul li a:hover {padding: 0px 0px}
Help will be very appreciated, I'm supposed to have this done today. :/ My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css: Code: css a { text-decoration: none; }
a:link { color: #0000FF; }
a:active { color: #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
color: #0000FF;
border: 1px solid #0000FF;
padding: 5px;
width: 190px;
background-color: #ffffff;
}
body
{
color: #ffffff;
background-color: #2F4F4F;
}
div
{
margin-top: 50px;
margin-bottom: 50px;
}
Thx for your help =) EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions? Hi, I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE. Dom. Quote: .nav-cell-main-nonsel { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle1.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } .nav-cell-main-sel, .nav-cell-main-nonsel:hover { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle2.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } Cheers, Dom. Hey folks, I'm having issues with a dropdown menu in IE 6 to the tune of it not showing up when it's rolled over. Here's the page in question. Here's the CSS I"ve used for it: Code:
/* LANDING PAGE MENU LAYOUT */
#landingMenu {
width:960px;
height:450px;
position:relative;
background:transparent none;
}
#landingMenu li {
float:left;
font-size:14px;
font-weight:bold;
}
#landingMenu li a {
width:192px;
float:left;
background:#ffc000 url(images/landingMenu_bg.jpg) no-repeat top;
display:block;
text-align:center;
min-height:255px;
padding-top:15px;
}
/* ENTER TOP PADDING AND ACCORDING HEIGHT FOR EACH DIVISION (NORMAL HEIGHT IS 360PX, ADJUSTED FOR FOOTER HEIGHT CLEARANCE)
#landingMenu li#CDS_menu a { min-height:255px; padding-top:35px;}
*/
#landingMenu li li {
background:transparent none;
float:none;
padding:0;
height:auto;
text-transform:none;
list-style:disc;
margin-left:40px;
margin-top:5px;
font-size:14px;
color:#0f1190;
font-weight:bold;
}
* html #landingMenu li li { margin-left:20px; }
#landingMenu li li.landingCaption { list-style:none;margin-top:10px;margin-left:25px; }
* + html #landingMenu li li { margin-left:-160px;width:150px;}
* + html #landingMenu li li.landingCaption { width:150px;display:block;margin-left:-160px; }
#landingMenu li ul {
display: none;
position: absolute;
margin-top:125px;
background:transparent none;
z-index:600;
width:192px;
}
#landingMenu li > ul { top: auto; left: auto; }
#landingMenu li:hover ul, li.over ul { display: block; }
/* END LANDING MENU */
Main issue is that I don't even have a copy of IE 6 to fix for, and I've been going off of screen shots from the client. Any thoughts? Hi, Does anybody know how i can have an image that switches to another image on rollover and also has a link? Thanks currently at my site i have rollover images on my menu which are gif files and have parallel gif files that are "lit up" which show when the user puts their mouse over the gif which looks very pretty and i like it, unfourtnatly it uses javascript. this creates a couple issues, one is that the user needs javascript for this too work, the other is i think it's casuing my page to load slow. someone said something about doing rollover images with CSS. im willing to try it but i don't understand or have a clue how to do this. also is using CSS any better? (speed wise most importantly) I am currently trying to figure out how to make a webpage with a navigation bar that consists of rollover images, BUT if the site has CSS and/or images disabled for a visually impaired user, text will appear as links. I have been searching the net, but have had no success in a solution other than not using images. HTML for Navigation Code: <!--NAVIGATION--> <ul> <li id="home"><a href="index.html"></a></li> <li id="students"><a href="students.html"></a></li> <li id="faculty"><a href="faculty.html"></a></li> <li id="facilities"><a href="facilities.html"></a></li> <li id="maps"><a href="maps.html"></a></li> </ul> CSS for first Button Code:
/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}
li#home{
background-image: url(images/nav_home.png);
width: 205px;
height: 52px;
display: block;
}
li#home a{
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#home a:hover{
background-image: url(images/nav_home.png);
background-position: 204px 0;
}
in IE the hourglass flickers...so i need to put a image on it and stuff......should i just overlap the image with negative margin or write text to a picture? Hello guys Please see the attached .zip, it contains a .swf file which shows what I am trying to accomplish in css, and a html file with the progress i've made. I would like there to be no images involved. I have been trying for a good few days now. I can almost get it to work in IE (Except the 1px gap between button and end-block), but in other browsers its just not working. Any help is greatly appreciated, Cheers, Rob |
|||||||