Jump to content

Recommended Posts

I would wrap my link in a DIV and use a padding to sit the text where I would want it to sit.. then follow suit similar to what was mentioned by teynon said, however since your wanting the text to remain and have a background change behind it you may require a little more than just purely css, I could be wrong but Im going to say this is a rather easy task with a bit of javascript, might I suggest jQuery for your library so you don't have to worry about some issues of cross browser compliance going the route of standard javascript alone.

<!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=utf-8" />
<title>Change Example</title>
<style type="text/css" media="all">
#sample{list-style:none;width:140px;height:30px;}
#sample li{margin:0;padding:5px;}
#hiddenElement{background-image:url(example.jpg);position:absolute;left:-999em;} /*just so the image is loaded in a cache*/
</style>
</head>
<body>
<ul id="sample">
<li><a href="#link" class="over">Example</a></li>
<li><a href="#link" class="over">Example</a></li>
<li><a href="#link" class="over">Example</a></li>
<li><a href="#link" class="over">Example</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
$('.over').mouseover(function(){$(this).parent('li').css({'background-color':'#000'});});
$('.over').mouseout(function(){$(this).parent('li').css({'background-color':'#FFF'});});
});
</script> 
<div id="hiddenElement"></div>
</body>
</html>

 

Not 100% the best example and can be optimized a little but in all works for the general purpose

http://chrishacia.com/demo/change.html

also the example though set up and primed for an image doesn't actually use it in the example, thats lazyness on my part but a couple quick edits and that can be fixed. This example makes use of HTML's "unordered list" element and jQuery

<!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=utf-8" />
<title>Change Example</title>
<style type="text/css" media="all">
#sample{list-style:none;width:140px;height:30px;}
#sample li{margin:0;padding:5px;}
#hiddenElement{background-image:url(example.jpg);position:absolute;left:-999em;} /*just so the image is loaded in a cache*/
</style>
</head>
<body>
<ul id="sample">
<li><a href="#link" class="over">Example</a></li>
<li><a href="#link" class="over">Example</a></li>
<li><a href="#link" class="over">Example</a></li>
<li><a href="#link" class="over">Example</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
$('.over').mouseover(function(){$(this).parent('li').css({'background-color':'#000'});});
$('.over').mouseout(function(){$(this).parent('li').css({'background-color':'#FFF'});});
});
</script> 
<div id="hiddenElement"></div>
</body>
</html>

 

Not 100% the best example and can be optimized a little but in all works for the general purpose

http://chrishacia.com/demo/change.html

also the example though set up and primed for an image doesn't actually use it in the example, thats lazyness on my part but a couple quick edits and that can be fixed. This example makes use of HTML's "unordered list" element and jQuery

 

Thanks. Can you tell me how to get the background image to work. I replace example.jpg with my desired background and nothing. I'm assuming the background info goes here...

 

$('.over').mouseover(function(){$(this).parent('li').css({'background-color':'#000'});});

 

How do I write it like this?

 

$('.over').mouseover(function(){$(this).parent('li').css({'background-image:url ':'bg.jpg'});});

 

 

Apart from using jquery for reasons mentioned above (cross browser compatibility, which is just not true, unless you target IE6 and lower, and that is only to mimic the pseudo hover) (interesting enough 8 posts down this same person asks how to do this with css...)

 

Teynon already provided code that almost worked with just css. except that it should be .link:hover and not .link hover

for more info have a read on the pseudo hover class.

 

<style type="text/css"><!--  dont forget to give a type attribute!  -->
.link {
background-image: none;
}
.link:hover {
background-image: url(images/myimage.png);
}
</style>

 

 

Apart from using jquery for reasons mentioned above (cross browser compatibility, which is just not true, unless you target IE6 and lower, and that is only to mimic the pseudo hover) (interesting enough 8 posts down this same person asks how to do this with css...)

 

Teynon already provided code that almost worked with just css. except that it should be .link:hover and not .link hover

for more info have a read on the pseudo hover class.

 

<style type="text/css"><!--  dont forget to give a type attribute!  -->
.link {
background-image: none;
}
.link:hover {
background-image: url(images/myimage.png);
}
</style>

 

This code is not working. My background image does not show.

KDM, 

 

do you have what you tried online? this code should just works. but i am pretty sure you just copy pasted it without thinking, and declared it not working, without checking the path to the image. Which is pretty vital.

 

So if you could provide us with a a link to your on line example (you tested it right?) and the right path (or link) to the image we might be able to fix it in your circumstances. for now 'not working' tells us nothing.

Thanks for the help guys I got the code working. Here's an online example  http://capitolinvestmententerprises.com/test.html

I'm going to replace my old menu shown on the main page, with my new css nav menu.  The old one used image swap rollovers. Not really a good way to do this type of menu.

 

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

<style>
a {
background-image: none;
display: block;
padding-top:15px;
padding-left:10px;
width: 217px;
height: 54px;
background-repeat: no-repeat;
}
a:hover {
background-image: url(assets/images/navLinksBG.png);
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<a href="#">My Link</a>
<a href="#">My Link2</a>
</body>
</html>

 

How do I make so that EVERY link does not have this rollover background?

well that is pretty much the basics of css. you need to assign  a class to the link.

 

so for instance you have a class of monkeys.

 

in your style sheet you than put it like this:

 

a.monkeys{
  /* some effect*/
}

 

in html you do

 

<a class="monkeys" href="lalala.html" />

 

so now all links with the class of monkeys get that style

well that is pretty much the basics of css. you need to assign  a class to the link.

 

so for instance you have a class of monkeys.

 

in your style sheet you than put it like this:

 

a.monkeys{
  /* some effect*/
}

 

in html you do

 

<a class="monkeys" href="lalala.html" />

 

so now all links with the class of monkeys get that style

 

Ok I have this now

a.navLinks {
background-image: none;
display: block;
padding-top:15px;
padding-left:10px;
width: 217px;
height: 54px;
background-repeat: no-repeat;
}

 

How would I write the hover css?

 

a:hover.navLinks I'm guessing.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.