Jump to content


Photo

Why can’t I do this with images?


  • Please log in to reply
4 replies to this topic

#1 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 20 June 2006 - 07:09 AM

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?

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

-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 20 June 2006 - 09:22 AM

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]

#3 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 20 June 2006 - 07:17 PM

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]

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

-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...

#4 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 21 June 2006 - 11:32 AM

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.

#5 bobleny

bobleny
  • Members
  • PipPipPip
  • Advanced Member
  • 429 posts

Posted 21 June 2006 - 10:00 PM

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?

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

-- www.firemelt.net --
First do me a favor and read this: JavaScript is NOT Java - Then read this: www.php.net - When your done with that, read this Topic
After that, floors open. I and anyone else will be MORE than happy to answer YOUR query! [Topic Solved]
Cheer up, the worst has yet to come...




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users