Hover Effect on Buttons

[SaikonoYume]

I'm working on a project for school, and we have to have an effect on our navigation that triggers when the mouse is hovering over one of the buttons. I've already set up a hover command for other links on the page, so I'm not quite sure exactly how to go about adding the effect to the buttons.

Please keep in mind that I'm fairly inept at CSS and HTML, so try to be specific if you have ideas.

[Twey]

It's fairly easy to do: simply specify the alternate style in the :hover pseudoclass.
.button {
/* normal button style */
color: red;
}

.button:hover {
color: blue;
}The only tricky bit is that for the hover effect to work in IE<7, the .button elements must be <a>s.

[SaikonoYume]

Essentially, that's what I want to do, however I have specific graphics I need to use. I have a graphic for the button when it's not being hovered over and one I want to use when it is being hovered over. And I apologize if the transition from what you gave me to what I want should be obvious.

[mburt]

.button {
/* normal button style */
background:url('path/to/normalImage.jpg');
}

.button:hover {
background:url('path/to/hoverImage.jpg');
}

[pcbrainbuster]

Wait a second Twey -

Are you saying that the hover psuedo class only works in IE<=6 (JS expression)?

[mburt]

The hover class doesn't work in IE 6 and lower for everything besides the anchor element, you have to make annoying hacks.

[SaikonoYume]

Right, next stupid question: I put that up with all the other CSS codes, right?

[mburt]

Right, next stupid question: I put that up with all the other CSS codes, right?
And yes, you do.

[SaikonoYume]

Yeah, I'm totally inept. It didn't work.

[mburt]

You'll need to show your source code for us to help you.

[SaikonoYume]

<title>Feathered Dreams :: Home</title>
<style type="text/css">
body {
background-color: #808080;
font: "Times New Roman", Times, serif;
color: #000000;
margin-left: 15px;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
}

</style>

<!--Banner Header-->
</head><p><img src="Banner.png" alt="Banner" width="692" height="251" /></p>
<!--Text Table-->
<table width="709" height="423" border="0">
<tr>
<th width="5" height="419" scope="col"></th>
<th width="199" scope="col">
<!--Nav Tables-->
<table width="191" border="0">
<tr>
<th width="185" scope="col"><div align="center"><img src="Home.png" alt="Home" width="156" height="79" /></div></th>
</tr>
<tr>
<td><div align="center"><a href="../Resume/Resume.html"> <img src="Resume.png" alt="Resume" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Writing/Writing.html"><img src="Writing.png" alt="Writing" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Art/Art.html"><img src="Art.png" alt="Art" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Contact/Contact.html"><img src="Contact.png" alt="Contact" width="156" height="79" border="0" /></a></div></td>
</tr>
</table>
</th>
<th width="10" scope="col">&nbsp;</th>
<th width="443" align="left" valign="top" bgcolor="#555555" scope="col"><p class="style2"><br />
TEXT HERE </p>
<p class="style2">&nbsp;</p> </th>
<th width="30" scope="col">&nbsp;</th>
</tr>
</table>


<p>&nbsp;</p>
</body>


</html>

[Twey]

Um... where is it?

[SaikonoYume]

Did it really not show up? Oi.... Well, sweet.

[mburt]

I think Twey meant that you didn't include the new code we gave.

[SaikonoYume]

Mostly because I don't have any clue where to put it. I'm not a web programmer, I'm in an introductory class and they taught us Dreamweaver about two months ago when everyone in the class was concerned with the movie we were making.

[Twey]

You said it didn't work, that suggested you tried and failed.

It should go in the stylesheet (in between the <style> and </style> tags) with the rest of the CSS.

[mburt]

<title>Feathered Dreams :: Home</title>
<style type="text/css">
body {
background-color: #808080;
font: "Times New Roman", Times, serif;
color: #000000;
margin-left: 15px;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
}
.button {
/* normal button style */
background:url('path/to/normalImage.jpg');
}

.button:hover {
background:url('path/to/hoverImage.jpg');
}
</style>

<!--Banner Header-->
</head><p><img src="Banner.png" alt="Banner" width="692" height="251" /></p>
<!--Text Table-->
<table width="709" height="423" border="0">
<tr>
<th width="5" height="419" scope="col"></th>
<th width="199" scope="col">
<!--Nav Tables-->
<table width="191" border="0">
<tr>
<th width="185" scope="col"><div align="center"><img src="Home.png" alt="Home" width="156" height="79" /></div></th>
</tr>
<tr>
<td><div align="center"><a href="../Resume/Resume.html"> <img src="Resume.png" alt="Resume" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Writing/Writing.html"><img src="Writing.png" alt="Writing" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Art/Art.html"><img src="Art.png" alt="Art" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Contact/Contact.html"><img src="Contact.png" alt="Contact" width="156" height="79" border="0" /></a></div></td>
</tr>
</table>
</th>
<th width="10" scope="col">&nbsp;</th>
<th width="443" align="left" valign="top" bgcolor="#555555" scope="col"><p class="style2"><br />
TEXT HERE </p>
<p class="style2">&nbsp;</p> </th>
<th width="30" scope="col">&nbsp;</th>
</tr>
</table>


<p>&nbsp;</p>
</body>


</html>

[SaikonoYume]

Yes, I put it there, it didn't work, so I removed it. That's force of habit for me; I apologize. When I do something in Dreamweaver and it doesn't work, I just remove the code and try to find something else.

[mburt]

Well, for one, you didn't include the hover class anywhere. And two, it won't work in IE, so if you're testing in IE. Well, you get the picture.

[SaikonoYume]

I'm not in IE, so there's a plus.

And I didn't include a hover class because I don't know what that is. When I mentioned this class being introductory, I meant that. They pretty much said "This is HTML. Doing this makes text italic, doing this makes it bold. Yay for you, now go a do a project."

[mburt]

We don't know which object the hover needs to be applied to, and you also have to specify the image sources in the css code.

.button {
/* normal button style */
background:url('path/to/normalImage.jpg');
}

.button:hover {
background:url('path/to/hoverImage.jpg');
}

[SaikonoYume]

The hover needs to be applied to the images here:


<th width="185" scope="col"><div align="center"><img src="Home.png" alt="Home" width="156" height="79" /></div></th>
</tr>
<tr>
<td><div align="center"><a href="../Resume/Resume.html"> <img src="Resume.png" alt="Resume" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Writing/Writing.html"><img src="Writing.png" alt="Writing" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Art/Art.html"><img src="Art.png" alt="Art" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Contact/Contact.html"><img src="Contact.png" alt="Contact" width="156" height="79" border="0" /></a></div></td>


What I need is for the image to go from this: http://i20.photobucket.com/albums/b248/SaikonoYume/Art.png to this: http://i20.photobucket.com/albums/b248/SaikonoYume/Art_shadow.png

[mburt]

All those images have different sources. But this may work:

<html>
<head>
<title>Feathered Dreams :: Home</title>
<style type="text/css">
body {
background-color: #808080;
font: "Times New Roman", Times, serif;
color: #000000;
margin-left: 15px;
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
}
.button:hover {
background:url('http://i20.photobucket.com/albums/b248/SaikonoYume/Art_shadow.png');
}
</style>

<!--Banner Header-->
</head><p><img src="Banner.png" class="hover" alt="Banner" width="692" height="251" /></p>
<!--Text Table-->
<table width="709" height="423" border="0">
<tr>
<th width="5" height="419" scope="col"></th>
<th width="199" scope="col">
<!--Nav Tables-->
<table width="191" border="0">
<tr>
<th width="185" scope="col"><div align="center"><img src="Home.png" class="hover" alt="Home" width="156" height="79" /></div></th>
</tr>
<tr>
<td><div align="center"><a href="../Resume/Resume.html"> <img src="Resume.png" class="hover" alt="Resume" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Writing/Writing.html"><img src="Writing.png" class="hover" alt="Writing" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Art/Art.html"><img src="Art.png" class="hover" alt="Art" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Contact/Contact.html"><img src="Contact.png" class="hover" alt="Contact" width="156" height="79" border="0" /></a></div></td>
</tr>
</table>
</th>
<th width="10" scope="col">&nbsp;</th>
<th width="443" align="left" valign="top" bgcolor="#555555" scope="col"><p class="style2"><br />
TEXT HERE </p>
<p class="style2">&nbsp;</p> </th>
<th width="30" scope="col">&nbsp;</th>
</tr>
</table>


<p>&nbsp;</p>
</body>
</html>

[SaikonoYume]

I copied the code you provided exactly and it still didn't work. I think I'm just going to tell my T.A. on Monday that I couldn't get it to work and hope she's forgiving. Unless you have other ideas. But seriously, don't hurt yourself trying to help.

[pcbrainbuster]

Just use this... -

<html>
<head>
<title>Title</title>
</head>
<body>
<input type="image" src="first image" name="change" style="height: 25px; width: 100px;" alt="">
<script type="text/javascript">
var normal = "first image"
var changed = "second image"

document.onmouseover=function() {
var s = event.srcElement||e.target
if (s.name="change") {
s.src=changed}
document.onmouseout=function() {
s.src=normal}
}
</script>
</body>
</html>

Make sure you do this -

1) type="image"
2) name="change"
3) limit height and width
4) set the normal image for each and then set that at variable normal and then set the new image at changed variable...

[mwinter]

But this may work:

You gave the images a "hover" class name, but the CSS selector calls for a "button" class name.

I've only included the table in the code below:


<table width="191" border="0">
<tr>
<th width="185" scope="col"><div align="center"><img src="Home.png" class="button" alt="Home" width="156" height="79" /></div></th>
</tr>
<tr>
<td><div align="center"><a href="../Resume/Resume.html"> <img src="Resume.png" class="button" alt="Resume" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Writing/Writing.html"><img src="Writing.png" class="button" alt="Writing" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Art/Art.html"><img src="Art.png" class="button" alt="Art" width="156" height="79" border="0" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="../Contact/Contact.html"><img src="Contact.png" class="button" alt="Contact" width="156" height="79" border="0" /></a></div></td>
</tr>
</table>

Are those div elements really necessary? If their only purpose is to align the images, apply the align attribute to the table cells, or preferably use CSS to achieve the same thing.



<input type="image" src="first image" name="change" style="height: 25px; width: 100px;" alt="">

Perhaps I'm missing something in this thread, but image buttons - the purpose of which is to submit data to the server - don't really seem appropriate.



<script type="text/javascript">
var normal = "first image"
var changed = "second image"

It would be simpler to structure the filename. For example, image.png and image-hover.png.



document.onmouseover=function() {

I would suggest limiting the scope of event listeners as much as possible. If only an image should react to an event, don't make the whole document listen for it.



var s = event.srcElement||e.target

This will raise an exception in many browsers: most don't have a global event variable, and there's no defined e variable.



document.onmouseout=function() {
s.src=normal}
}

Another exception: there's no defined variable, s.

My image swap script (http://mwinter.webhop.info/image-swap/) is probably overdue for another rewrite, but it would be one option if the CSS route isn't acceptable.

Mike

[pcbrainbuster]

Perhaps I'm missing something in this thread, but image buttons - the purpose of which is to submit data to the server - don't really seem appropriate.
Does it REALLY matter?


It would be simpler to pattern the filename. For example, image.png and image-hover.png.
I'm confused here :)


I would suggest limiting the scope of event listeners as much as possible. If only an image should react to an event, don't make the whole document listen for it.
Well what other way is there? You could repeatedly do onmouseover onmouseout to each button but I assumed this would be easier for him/her...


This will raise an exception in many browsers: most don't have a global event variable, and there's no defined e variable.
I'm really only currently an IE coder but probably will get cross-browser in due time...


Another exception: there's no defined variable, s.
Isn't there? that line var s = ...

[mwinter]

Perhaps I'm missing something in this thread, but image buttons - the purpose of which is to submit data to the server - don't really seem appropriate.

Does it REALLY matter?

Well, yes. Besides, there's absolutely no reason not to use an img element.





It would be simpler to structure the filename. For example, image.png and image-hover.png.

I'm confused here :)

Rather than define two separate filenames, define a single base name. The second filename can be derived from the first. This way, the src attribute of the img element can be the single source for both the regular and hover image filenames.





I would suggest limiting the scope of event listeners as much as possible. If only an image should react to an event, don't make the whole document listen for it.

Well what other way is there? You could repeatedly do onmouseover onmouseout to each button but I assumed this would be easier for him/her...

Loop through a collection of the relevant images (the document.images collection is the obvious choice here) and programmatically add the listeners.



Isn't there? that line var s = ...

That variable is local to the other listener.

Mike