|
CSS - Css Image Rollover With An Alt Tag
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;
}
Similar TutorialsI 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;
}
how do i have images rollover? ie when the mouse i NOT on the image its img1 and when mouse is its img2?? i cant work that out cheers actually i have sort of done it but with some problems: Code:
a:link, a:visited {
background: url('images/offlinks/contactus.jpg');
}
a:hover {
background: url('images/onlinks/contactus.jpg');
}
</style>
</head>
<body>
<a href="whatever"> hello </a>
it works if i put any text where hello is! but thenthat background has text so it makes it unreadable? Code:
.contact a:link, .contact a:visited {
background-image: url('images/offlinks/contactus.jpg');
text-decoration:none;
color:#CED3DB;
font-size:25px;
}
.contact a:hover {
background-image: url('images/onlinks/contactus.jpg');
}
in the book doing this would make the links in contact class have that image but it doesnt work? OK, I've gotten this to work a hundred times before, but today I am stumped. Basically, I am trying to create an image rollover with CSS. here is my CSS: Code: a.footer_box3{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_off.png') no-repeat;
border:none;
display:block;
}
a.footer_box3:hover{
width:222px;
height:169px;
background-image:url('images/footer/footer_test/footer_box3_on.png') no-repeat;
border:none;
display:block;
}
the above CSS is in the header of the document. Here's the code for the rollover in the page: Code: <td background="images/footer/footer_test/footer_box3_off.png" width="222" height="169"> <a href="our_people.asp" class="footer_box3"></a> </td> You can see the site here Scroll down to the bottom of the page where there are 4 footer boxes. I am only trying to get the third box to swap images on hover. can anyone see what I am doing wrong? thanks OK, I've made this work in the past with no problem, but for some reason, I can't figure out this simple snippet of css for a navigation rollover with an image. Here's my code: Code:
a.creative_development{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title.gif');
}
a.creative_development:hover{
width:289px;
height:28px;
background-image:url('../images/services_titles/creative_title_on.gif');
}
I've checked the paths, folder name, and image names, but it's not working. Can someone see what I'm doing wrong? thanks Hello CSS Readers & Experts, I have a very common problem that Ive done some searches on, but yet to find the solution. My Image Rollover flickers. You can view this problem at www.clickcolumbia.com/onlinecommunity im guessing it has somethin to do with my css, heres the code a.mainlevel:link, a.mainlevel:visited { display: block; background: url(../images/menu_bg.png) no-repeat; vertical-align: middle; font-size: 11px; font-weight: bold; color: #ffffff; text-align: left; padding-top: 5px; padding-left: 18px; height: 20px !important; height: 25px; width: 100%; text-decoration: none; } a.mainlevel:hover { background-position: 0px -25px; text-decoration: none; color: #333333; } Please help I'm running into a problem with IE and using the :hover sub-class on an image within a class. IE: .zoomer img:hover {}. Works just fine, nice and neat in any other browser. Page in question: [URL=http://www.cavemanapparel.com/ncaa-c-34.html[/URL] Code: .zoomer img:hover { background: #008; margin-left: auto; margin-top: -400px; position: absolute; z-index: 999; display: block; border: 0; height: 60%; width: 40%; overflow: visible; clear:both; }
I've tried placing various hacks and/or solutions I've found across the web inside: <!--[if IE]> <![EndIf]--> but the POSITION attribute seems to be ignored and takes on the code in the .css file. I know WHY it's doing it but can't seem to fix it. Well, I guess if I knew exactly why it's doing it I would be able to fix it. Right? Anyway, if you view the page source, I'm sorry for the shoddy work. It's been a long couple of days. Any insight or solutions are greatly appreciated. Does anyone have have an idea of why the problem I am about to describe is happening? View this link in IE 6: paintingshiva.com / 2006rd / www / template / gallery.html can't post url.. take out spaces between slashes URL This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content. Rollover the right side ART navigational elements (colored circles). The weird circumstance: When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal. I can not figure out why this is happening. I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect. I 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 peeps, having trouble getting background images to display rollOvers for a <td> tag in IE (pc and mac). Works fine in firefox and safari. Heres me code: CSS: Code: .house_menu_cell {
background-image: url(../images/nav/homes/glo_house_nav_bg_0.gif); cursor:pointer;
}
.house_menu_cell:hover {
background-image: url(../images/nav/homes/glo_house_nav_bg_1.gif); cursor:pointer;
}
HTML: Code: <td class="house_menu_cell"> Any help would be great. Ive spent about an hour trauling the net with no luck! Cheers mish Hi all, Wondering if anyone knows a tweak to make the following work in IE7 using pure CSS? I have an image that grows when it is rolledover. Css simply as follows: .graph { width: 200px; height: 50px; } .graph:hover { width: 600px; height: 150px; } Works fine in FF (as usual!) Regards Charlie I have these thumbnail images that I want to have a thin border around them when you rolloever. A thin gray border that isn't tight to the image, but has a bit of padding. I have other link styles, so I'm naming this "a.thumbs" it seems right, but I can't get it to work. I'm not sure whether to put a border on the image...set it at 1 or 0, I've tried both....and I still can't get the style to work. At one point, it worked, but all it was doing was picking up my link style. What's the problem with the code....or what is the best way to achieve this kind of rollover? Thanks. a.thumbs:link{ padding: 5px 15px; border: 1px solid #FFFFFF; } a.thumbs:visited{ padding: 5px 15px; border: 1px solid #CCCCCC; } a.thumbs:hover{ padding: 5px 15px; border: 1px solid #CCCCCC; } Hi everyone, I have a menu whereby when it's active it is highlighted by two combining images. Whenever the active link is hovered over the image disappears. I'd like for the image(s) to stay put when it's active and the cursor hovers over it. This particular .css file is above my pay grade and I'm not confident I can do this and have it look good across all browsers. Just click on the header links and hover over it to see what I'm talking about. Thanks for any input, here's the site... spotabusiness dot com/new_spota1 (I apparently can't add URLs yet) i ahve seen sites, using one image rollover that has one image one on top of the other... can someone give me a clue on the syntax thanks Hi, my rollover image for my table does not work. It does not seem to preload the images as expected, so the rollover effect does not look good. There seems to be some type of a lag when I rollover. I don't understand why? Below is the code. It can also be found at http://members.lycos.co.uk/eflix/junk.html Code: <html>
<head>
<SCRIPT language="JavaScript">
if (document.images){
var preloadPic1 = new Image();
preloadPic1.src = 'http://members.lycos.co.uk/eflix/TBOFF.gif';
var preloadPic2 = new Image();
preloadPic2.src = 'http://members.lycos.co.uk/eflix/TBON.gif;';
}
</SCRIPT>
<STYLE>
.topbar {background-image:url('http://members.lycos.co.uk/eflix/TBOFF.gif'); }
.topbar2 {background-image:url('http://members.lycos.co.uk/eflix/TBON.gif;');}
</STYLE>
</head>
<body>
<br><br><br><br><br><br><br>
<table cellspacing=0 cellpadding=0 border=0 width=770>
<tr><td>
<table cellspacing=0 cellpadding=0 width=770 border=1 bordercolor=#6DBEE8
style="border-collapse: collapse; border-width: 1px;">
<tr height=20>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">A</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">B</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">C</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">D</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">E</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">F</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">G</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">H</a>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.html tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.css For some reason, it refuses to rollover... in the actual site I've tried implementing it, all of them come up in the secondary start (black text, blue bg) rather than the default state (white text, transparent bg). Neither times does it actually "rollover". What am I doing wrong? Code from: webvamp[.]co[.]uk/blog/coding/graphical-css-rollover-menu/#example Hi everyone, I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore. Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus. When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image. So what doesn't work? Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7... Please help me...!! I've attached the relevant code, added comments and colored the parts that I think might cause the problem. html: Code: <div id="globalnav">
<ul id="menu1">
<li id="nav_home"><a href="../home/" title="Home">home</a></li>
<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
</ul>
<ul id="menu2">
<li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
<li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
<li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
</ul>
</div>
css: Code: @charset "utf-8";
/* English Menu bar */
/* Box for the entire menu (two rows of ul) */
#globalnav {
height: 130px;
width: 675px;
}
/* Create box and put background image for each menu line */
#globalnav ul#menu1 {
height: 62px;
width: 675px;
background: transparent url(../images/menu1.jpg) top left no-repeat;
padding: 0;
position: relative;
margin: 0 0 5px 0;
}
#globalnav ul#menu2 {
height: 62px;
width: 675px;
background: transparent url(../images/menu2.jpg) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}
/* Boxes for each link square on the menu */
#globalnav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 75;
}
#globalnav li, #globalnav a {
height: 62;
display: block;
}
#globalnav a {
line-height: 62px;
text-decoration: none;
text-indent: -9999px;
display: block;
}
/* Define the area on the background image of the ul which coressponds to each link box */
#nav_home {left: 0; width: 75px;}
#nav_about {left: 225px; width: 75px;}
#nav_recruit {left: 525px; width: 75px;}
#nav_company {left: 150px; width: 75px;}
#nav_clients {left: 375px; width: 75px;}
#nav_contacts {left: 600px; width: 75px;}
/* Maybe the next part is unnecessary... */
#nav_home {background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about {background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit {background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company {background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients {background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts {background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}
/* Hovered menu items */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */
#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */
body#home #nav_home {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6. Oh and I'm using transitional DTD. is that ok? Disregard pot I simply transposed li and a tag thanks anyway... Hi guys. This is my first post and I'm relatively new to CSS so I apologize if my post reeks of newcomer! I'm currently setting up my site with an external stylesheet. Everything has been coming along fine until I decided to setup a menu with css rollover image links. For some reason I simply cannot get the image to appear whatsoever. Everything else is working (such as position and size (I have temporarily given it a border for locational purposes)) within the code but the image just does not appear. I have looked this up for some time now and cannot come to a resolution. I have tried altering the code, changing paths, etc. etc. But I can't get it. Would really appreciate some help. Here is the rollover portion of my css: Code: #rollhome
{
display:block;
float:left;
margin: 0 auto;
width:122px;
height:50px;
text-decoration: none;
background-image:url("images/topmenu_home.png") no-repeat 0 0;
border:#000000 solid 2px;
text-indent:-99999px;
z-index:20;
}
#rollhome:link, #rollhome:visited
{
background-position: 0;
}
#rollhome:hover
{
background-position: 0 -50px;
}
And here is the rollover portion of my html: Code: <div id="rollovers"> <a id="rollhome" href="#"title="rollhome">Home</a>< /div> Any help would be most appreciated! Hi, I'm developing a childrens story website, and ran into a problem with the layout in Firefox. Everything worked perfectly on my local server, but after I uploaded it to my hosting account I came across a strange problem. When I first go to the homepage everything looks, and works, fine. And if I refresh the page a few times, it still all looks fine. But if I click on the "Home" link a few times the whole layout breaks on every 3rd or 4th click of the home button. You can see the design at http://develDOTstephenhmDOTcom/bedtime/index.php. (Sorry for the link, but it's my first post and I can't add urls yet) This problem doesn't exist in IE7, just Firefox as far as I can tell. I know the rest of the sites layout is a bit messed up in IE7 at the moment, as I haven't gotten around to adding the IE7 only css info yet. I'm sure it's a stupid error on my part, but I was hoping somebody could point me in the right direction. Thanks a lot in advance to anyone who can help. For the image rollovers the basic html for each one is: <a class="happylarry" href="happylarry.php"> <div class="image_text"> Happy is an Irish Leprechaun who lives in the left-hand pocket of your child.<br /><br />And of course his real name is not 'Happy'. His real name is 'Larry'. But Larry Leprechaun is such a happy little fellow, and he gets up to so much mischief, that all of his friends and family call him 'Happy Larry'. </div> </a> and the relevant css is: a.happylarry { display: block; float: left; min-width: 222px; width: auto!important; width: 222px; height: 524px; background: url('images/happylarry.png') no-repeat 0 0; text-align: center; margin-right:13px; text-decoration:none; } a.happylarry:hover { background-position: 0px -524px; } .image_text{ color:#FFFFFF; max-width:180px; margin-left:25px; *margin-left:0px; margin-top:250px; text-align:left; font-size:12px; font-family: Arial, Helvetica, sans-serif; } |
|||||||