CSS - Need Help Creating Rollover Links Using Images

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

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

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??

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

I'm not sure if the title describes exactly what I mean, but here it goes.

I'm working on this website: http://denartcc.org/d/

The menu along the top has images that change position when you hover over them. The thing that I'm trying to do is create something that looks like this site's menu: http://www.aopa.org/ Notice how hovering over one of the menu items reveals another blue bar that contains more links. This is what I'm trying to create.

Unfortunately I'm stuck when it comes to comparing these side-by-side, and I just don't know how to create that secondary set of links. The code I'm using is below.

CSS:
Code:

#amenu {
	list-style: none;
	padding: 0;
	margin:auto 0 0 0;
	width: 930px;
	height: 30px;
	background-color: black;
	position: relative;
	border-bottom:medium solid white;
	float:left;
}
#amenu ul  {
	display: none;
	position: absolute;
}

#amenu ul li {
	}

#amenu li a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}

.home {
	width: 120px;
	height: 30px;
	background: url(../images/menu/home.png) no-repeat;
	left: 20px;
	top: 0px;
}

.airspace {
	width: 163px;
	height: 30px;
	background: url(../images/menu/airspace.png) no-repeat;
	left:160px;
	top:0;
}

.community {
	width: 174px;
	height: 30px;
	background: url(../images/menu/community.png) no-repeat;
	left:343px;
	top:0;
}

.controllers {
	width: 195px;
	height: 30px;
	background: url(../images/menu/controllers.png) no-repeat;
	left:537px;
	top:0;
}

.pilots {
	width: 174px;
	height: 30px;
	background: url(../images/menu/pilots.png) no-repeat;
	left:752px;
	top:0;
}

#amenu a:hover {
	background-position: left bottom;
}

#amenu a:hover span{
	display: block;
}

HTML
Code:

<div>
		<ul id="amenu">
			<li><a href="#" class="home">Home<span></span></a></li>
			<li>
			<a href="#" class="airspace">Airspace<span></span></a>
				<ul>
				<li>ZDV Airports</li>
				<li>Preferred Routing</li>
				<li>Try Something New</li>
				</ul>
			</li>
			<li><a href="#" class="community">Community<span></span></a></li>
			<li><a href="#" class="controllers">Controllers<span></span></a></li>
			<li><a href="#" class="pilots">Pilots<span></span></a></li>
		</ul>
	</div>

How do create text that has a background AND foreground image? The effect I am after is looking through one image (I already have a transparent one that should work) to see text which is on top of a background image.

I figure that these would come into play...but I have not been able to make the right combination of divs, etc., to make this happen.

.back {
background: url(backsrc.gif) bottom left repeat-x;
}

.fore {
background: url(foregrdsrc.png) bottom left no-repeat;
}


I don't think this detail will matter, but just in case... I want this appearance for the text of every <td> in a particular table.

Thanks,
oak island

I have pictures lined up horizontally in a content box, which is fine. The issue I am having is having links beneath each picture. The issue I have is that all of the links bunch up next to the last picture horizontally and don't appear on a separate line underneath the images.

HTML

Code:

<div id="content">   <h2>Pictures from Events</h2>      <ul class="hoverbox"> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST1.jpg" alt="description" /><img src="images/TEST1.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST2.jpg" alt="description" /><img src="images/TEST2.jpg" alt="description" class="preview" /></a> </li> <li> <a href="#"><img src="images/TEST3.jpg" alt="description" /><img src="images/TEST3.jpg" alt="description" class="preview" /></a> </li> </li> </ul> <p id="links"><a href="#"> Epic Fridays|&nbsp;</a> <a href="#">Zen West&nbsp;</a> <a href="#">|Green Turtle&nbsp;</a> <a href="#">|Craig's&nbsp;</a>  </div>

CSS


Code:

#content {   float: right;   width: 560px;   height: 300px;   color:#2C5923;     background-image:url(images/Picscontent2.jpg);     background-repeat: no-repeat;     padding-top:20px;     padding-left:20px;

 

Hello, I encounterd this problem when I was making a website for a friend. The goal was to make a website that downloaded as fast as possible and had a good navigation etc. I made the navigation bar and I made different Div's for each button. I ended up making it so that the background color in the Div changed color when you rolled over it. That worked fine in Mozilla but not IE.

Then I wanted to make it so if you click the box (not just the text in the box i.e. "Home", "About Me", etc. However I could not figure out how to do it.

My question is, do rolover background changes work in I.E. at all? How do I make it so when you click the box it directs you to the link?

Thanks,
~Brendan

on this page http://tampabay-online.org/cetr/artists.php

I am getting lines under the images and text that are links (I do not want the line under the images). This happens in Firefox. It displays how I want it to in IE and Opera. I usually design my sites for Firefox but I really trust Opera's compliance.

my css includes :
Code:

a img {
border: none;
}

Any ideas where the lines are coming from?

Thanks!

Hi Folks,

I've implemented a custom underline for all text links using background properties, but have found that my linked transparent PNG images are now affected with the underline as well.

I've tried correcting this by applying background-image:none; to the affected PNGs -- I even used !important;. No luck. I also saw some mention of using the display:block; property to correct a similar problem. No luck.

Suggestions?

Thanks in advance!

P.S. I was all set to post a link to a live example, but it seems new users can't post links? Hopefully the above description will suffice.

Simple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them.


HTML
Code:

div id="bar-links">
<center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td>
</tr>
<tr>
<td background="images/barlist_02.gif" width="20"></td>
<td background="images/barlist_03.gif" width="456">&nbsp;</p>
<div id="bar-links">
<h4><a href="#" title="Riley's Pub">Riley's Pub</a>&nbsp;
<a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> &nbsp;
<a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> &nbsp;
<a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> &nbsp;
 </h4>
 </div>
</td>
<td background="images/barlist_04.gif" width="24"></td>
</tr>
<tr>
<td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td>
</tr>
</table>
</div>

CSS

Code:

#bar-links { 	text-indent:inherit; 	text-align:left; 	 }

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>

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. :/