Jump to content

Archived

This topic is now archived and is closed to further replies.

bobleny

Why can’t I do this with images?

Recommended Posts

Now, I have this nice little css script here. It just changes colors with a:hover. I've been trying all sorts of stuff to get it to do the same thing with an image. Why can't I just go background-image:url("blah.png"); for a:hover? That seems like it would work... Is there a way to do this CSS?

I know you can with JavaScript but I want to do it with CSS. Is this possible?

[code]<html>
<head>
<style type="text/css">
ul.topnav
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:blue;
background-color:black;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:blue; color:black;}
li {display:inline}
</style>
</head>

<table align="center">
<tr><td>
<body>
<ul class="topnav">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</td></tr>
</table>

</body>
</html>[/code]

Share this post


Link to post
Share on other sites
It should change the background image when you mouseover the link with that code.

Make sure the the path to blah.png is correct, or use an absulote path:
[a href=\"http://www.mysite.com/blah.png\" target=\"_blank\"]http://www.mysite.com/blah.png[/a]

Share this post


Link to post
Share on other sites
OK, I've redone the code with the images. The paths are correct. When you move your mouse over them, they do nothing. Am I doing something wrong?

I have uploaded the file and images. It can be viewed here -> [a href=\"http://www.firemelt.net/.01page22.htm\" target=\"_blank\"]http://www.firemelt.net/.01page22.htm[/a]

[code]<html>
<head>
<title>CSS Rollover Test</title>
<style type="text/css">
body
{
background-color:#000000;
}


img
{
border-style:none
}


ul.topnav
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}


a.guide:hover
{
background-image:url('guide1.2.png');
}


a.about:hover
{
background-image:url('about1.2.png');
}


a.flash:hover
{
background-image:url('flash1.2.png');
}


a.jokes:hover
{
background-image:url('joke1.2.png');
}


li
{
display:inline
}

</style>
</head>

<table align="center">
<tr><td>
<body>
<ul class="topnav">
<li><a class="guide" href="#"><img src="guide1.0.png" /></a></li>
<li><a class="about" href="#"><img src="about1.0.png" /></a></li>
<li><a class="flash" href="#"><img src="flash1.0.png" /></a></li>
<li><a class="joke" href="#"><img src="joke1.0.png" /></a></li>
</ul>
</td></tr>
</table>

</body>
</html>[/code]

Share this post


Link to post
Share on other sites
I see your problem!

In your anchor tag you have an image already displayed. Now the image is overlayed ontop of you background, so your background image is not displayed as it is underneath you image.

You'll be best of with javascript to swap the images over.

Share this post


Link to post
Share on other sites
You don't know how much yor post helped! I got it to work. [a href=\"http://www.firemelt.net/.01page22.htm\" target=\"_blank\"]http://www.firemelt.net/.01page22.htm[/a] but if you view it in IE it looks great and in FF it is half gone? Any ideas as to how to fix this?

[code]<html>
<head>
<title>CSS Rollover Test</title>
<style type="text/css">
body
{
background-color:#000000;
}


img
{
border-style:none
}


a.guide
{
background-image:url('guide1.0.png');
}


a.joke
{
background-image:url('joke1.0.png');
}


a.guide:hover
{
background-image:url('guide1.2.png');
}


a.joke:hover
{
background-image:url('joke1.2.png');
}
</style>
</head>
<body>

<table align="center">
<tr>
<td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td>
<td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td>
</tr>
</table>

<table align="left">
<tr><td><a class="guide" href="#"><img src="t.gif" alt="" /></a></td></tr>
<tr><td><a class="joke" href="#"><img src="t.gif" alt="" /></a></td></tr>
</table>

</body>
</html>[/code]

Share this post


Link to post
Share on other sites

×

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.