Rollover links with images?

KDM · June 2, 2011

How would I make an image be displayed when someone rolls over a text link? I'll want the image displayed behind the text link.

teynon · June 2, 2011

<style>

.link {

background-image: none;

}

.link hover {

background-image: url(images/myimage.png);

}

</style>

monkeytooth · June 2, 2011

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.

KDM · June 2, 2011

can you explain the use of javascript along with the code he posted?

KDM · June 2, 2011

Here is a good sample of what I'm talking about.

https://www.mint.com/how-it-works/

Look at the nav menu on the left. I tried looking at it in firefox. I don't know what I'm doing . Can someone get the styles for this and show me?

monkeytooth · June 3, 2011

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

teynon · June 3, 2011

Just use display: block; on the link class, then set the width and height of the link box to show the image behind it.

KDM · June 3, 2011

<!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'});});

cssfreakie · June 3, 2011

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>

KDM · June 3, 2011

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">
.link {
background-image: none;
}
.link:hover {
background-image: url(images/myimage.png);
}
</style>

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

cssfreakie · June 4, 2011

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.

teynon · June 4, 2011

I tested this on my desktop.

<html>
<head>
<style>
a {
background-image: none;
display: block;
width: 200px;
height: 200px;
}
a:hover {
background-image: url(LeftTurn.png);
}
</style>
</head>
<body>
<a href="#">My Link</a>
</body>
</html>

gospabode2 · June 4, 2011

The Code you just posted seemed to be working when I tested it. Do you still have an issue and if so, what?

[attachment deleted by admin]

teynon · June 5, 2011

Nice cat. But i'm not he one with the problem.

cssfreakie · June 5, 2011

it's indeed a nice cat ::)

but seriously check the path!

gospabode2 · June 5, 2011

Whoops Sorry, Teynon, Guess I got a little overexcited! Now I know why trashcat is not amused.

KDM · June 5, 2011

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?

cssfreakie · June 5, 2011

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

KDM · June 5, 2011

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.

teynon · June 5, 2011

a.navLinks:Hover

KDM · June 5, 2011

a.navLinks:Hover

I got it working now, thanks. One thing I don't understand is why this didn't work?

<a href="#" class="a.navLinks">Website Hosting</a><br />

But this did

<a href="#" class="navLinks">Website Hosting</a><br />

teynon · June 5, 2011

a.classLinks

The a before the . refers to a tag in css.

for example:

p.classLinks references <p> with classname of "classLinks"

img.monkeys references <img with classname of "monkeys"

div.lala references <div> with class name of "lala"

Sign In

Rollover links with images?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information