PDA

View Full Version : HELP: Mouseover

Cyberian
03-17-2003, 03:52 PM
I seen mouseovers that don't require graphic files (GIF and JPG); it only requires you to enter a colour and the mouseover colour it will change to. I have tried to search for the JS script myself, but no luck. All I found was ones that involve a graphic file. Does anyone know how I can make a mouseover button w/o graphic files?

I just find non-graphical buttons much easier to edit.
Graeme Hackston
03-17-2003, 06:00 PM
try a google search for

CSS mouseover example
Quiet Storm
03-17-2003, 06:22 PM
Welcome to the forums, Cyberian!

Don't listen to ' Graeme ', we're here to help...

Try this:


<a href="this.html"
onMouseOver="this.style.background='red';"
onMouseOut="this.style.background='transparent';">link here</a>
Graeme Hackston
03-17-2003, 06:34 PM
Quiet Storm I don't know what I said that could be taken as lack of help.

If I get what you mean, Lol on the Trim()

I thought CSS would be easier and, thinking forward, would cover more browsers than JS.
Quiet Storm
03-17-2003, 06:41 PM
Originally posted by Graeme Hackston
I thought CSS would be easier and, thinking forward, would cover more browsers than JS.

Logical (I think only in IE :) )

CSS Example:

<head>

<style>
a:hover {color:#ff0000;}
</style>

</head>



Graeme, I was thinking we should help people here... on this site, not redirect them somewhere else. ;)
Graeme Hackston
03-17-2003, 06:44 PM
True but I've never done it with CSS and the question was going unanswered. I think 8 views.
brothercake
03-17-2003, 07:01 PM
<style type="text/css">

element.classname { background-color:yellow; }
element.classname:hover { background-color:white; }

</style>

You can apply :hover to any element, and completely change the element style onmouseover.

It works in moz, O7, Safari and Konqueror. It doesn't work at all in IE, but you can compensate with DHTML Behaviors.
Graeme Hackston
03-17-2003, 07:05 PM
I was under the impression that CSS worked in IE. Quiet Storm's response makes more sense.
Graeme Hackston
03-17-2003, 11:23 PM
Ok, I knew I'd seen this before but don't surf with IE. I thought I was mistaken.

Anyway, I finally found it on a disk I'd saved a year ago. Unfortunately I don't know who the author is.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<title>Untitled</title>

<style>

.myButton{
display:block;
font-size:12px;font-family:arial;font-weight:bold;
background-color: #336;
color: #ccc;
border: 1px solid;
border-color: #ccc #000 #000 #ccc;
text-decoration: none;
padding:2px 16px;
text-transform:uppercase;
}

.myButton:hover{
display:block;
font-size:12px;font-family:arial;font-weight:bold;
background-color: #9ac;
color: #000;
border: 1px solid;
border-color: #000 #ccc #ccc #000;
text-decoration: none;
padding:2px 16px;
text-transform:uppercase;
}

</style>

</head>

<body bgcolor="#aaaaaa">

<table border="0" cellpadding="0" cellspacing="0">
<tr>

<td><a href="wherever.htm" class="myButton">Home page</a></td>
<td><a href="wherever.htm" class="myButton">Home page</a></td>
<td><a href="wherever.htm" class="myButton">Home page</a></td>
<td><a href="wherever.htm" class="myButton">Home page</a></td>
<td><a href="wherever.htm" class="myButton">Home page</a></td>
<td><a href="wherever.htm" class="myButton">Home page</a></td>

</tr>
</table>

</body>
</html>
Cyberian
03-18-2003, 04:21 AM
WOW! I got help fast! Thanks a lot, everyone. I will try the different codes above.
brothercake
03-18-2003, 05:12 AM
It's good stuff that arbitrary hover; very powerful (http://www.meyerweb.com/eric/css/edge/menus/demo.html)
Graeme Hackston
03-18-2003, 05:34 AM
Brothercake, that's pretty cool. I noticed the menu on the left doesn't respond all the time in O7. Works perfect in Moz 1.3. O7 seems a little buggy and slugish in places, maybe that's 1 of them.

Now we just need IE to follow suit...