|
CSS - Using Css For Rollover Images
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) Similar Tutorialsin 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? hi all, I am trying to figure out how to have multiple CSS Rollover images with links on one page. Any ideas, tips, suggestions or samples are greatly appreciated! Brook I can't seem to find this solution anywhere I want an image rollover with CSS to work in IE, but IE hates me so I can't get it. Here is one of my buttons: CSS: #tab_nav #home_tab { background: url(images/home.jpg) no-repeat; width: 97px; height: 33px; cursor: pointer; } #tab_nav #home_tab:hover {background: url(images/home-over.jpg) no-repeat; width: 97px; height: 33px; } Here is the HTML too in case you want it: <div id="tab_nav"> <div id="home_tab" onClick="javascript:window.location.href='index.php';"></div> </div> Now, the rollover works well in Mozilla, but it doesn't work in IE. Does anyone know how I can acheive this? Thanks BTW, here is the page I am just learning CSS and I found this site and they have a step through example, but I am having problem where they use body.about dt#about, body.about dt#about a, body.services dt#services, body.services dt#services a, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.contact dt#contact, body.contact dt#contact a { background-position: 0 -100px; } to select different parts of an image to display. Also, supposedly, you put in the body tag of the index.html file <body class="about"> and it is supposed to use the about image, but I am unsure how to enable the others. Anyone have an idea. The code is too much to post here, but I could possibly email it if anyone needs it. So, I'm pretty new to all this, and any help is really key. So, on my site, I have a lot of rollover images. I may be breaking usability rules! The site has a lot of hand drawn elements that are supposed to act as nav. So, we implemented hand drawn nav that changes color when you rollover it. The problem is that when you click on those rollovers, a big dotted box appears around the selected one... it looks especially tacky if you don't go over to the next page. All of these elements have this box. Is there a way to tell the browser not to show that selection box?? i have a basic html page which includes a number of hyperlinks using jpeg images... essentially <img> tags wrappped in <a> tags. i want to create a rollover effect with these links so that when a link is highlighted (mouseover) the jpeg image changes to another seperate jpeg impage. is it possible to do this with html/css and if so how can i do this? i have read about a method of doing this which combines both the original image (before mouseover) and the mouseover image into one single jpeg and changing the image's x-coordinate using css so that there is no preload/image flicker issues when the link is clicked on, but i'm not sure exactly how to code this. any help is appreciated. Hello everyone, I wanted to ask, how to place a text over a rollover image. Most ppl recommend to set the image as background in table or div tag, but that would prevent to make the image a rollover. To put it simply, I want to create an effect, I have seen e.g. at ehow.com When you place your cursor on a button in the menu, the text gets underlined. When you place your cursor on a button in the submenu ("Browse How Tos"), the text gets ubderlined AND the image changes. Is this somehow a combination of rollover text and image? My question basically is: HOW DO YOU CREATE SUCH AN EFFECT? Thank you for your replies, Tomas Good day all, I have set up my index page for my site with css rollovers instead of javascript rollovers, and I really like the loading time, the problem that I am having is that when I click on the image rollover link there appears a white box around the image. how can this be avoided? Please see the link below for what I am trying to explain... http://www.karmaimports.net/indexcss.htm thanks in advance... Brook Hi ! Me again :P So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself: (view-source for xhtml and css) http://fotoz.hit.bg/test/menu.html The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ? And most importantly why does it occur? Thanks! p.s I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below. It works but I get the flickering with visibility:hidden and even if i just move the img out of the way I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers 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. 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. :/ 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 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? 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, 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 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> I am trying to implement the below code for my own page. The issue for me is I don't know how to get the background image to overlay the link text. Unlike in the example I don't want the text links on top of the image, I would like to be behind. Is this possible? Live demo of example: http://www.tutorio.com/media/css-tutorials/rollover-example.htm Code: <div class="rollover"> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> <a href="#">Tutorio</a> </div> Code: .rollover a {
display:block;
width: 90px;
padding:10px 10px 10px 7px;
font: bold 13px sans-serif;;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -35px;
color: #049;
}
.rollover a:active {
background-position: 0 -70px;
color:#fff;
}
I've tried adding an image between the <a and </a> and tried to change that when hovered. Code: <a href="about.htm"><img src="images/testimage.png" alt="" class="testimage"/></a> Code: a.img.testimage:hover {
background-position: 0 -40px;
}
|
|||||||