Jump to content

Why can’t I do this with images?


bobleny

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]
Link to comment
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]
Link to comment
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]
Link to comment
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.
Link to comment
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]
Link to comment
Share on other sites

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.