...

View Full Version : Images Changing - Mouse Over



davm22
11-07-2010, 04:47 PM
I am also looking for a bit of help with regards to images changing when the mouse goes over them.

E.g. When someone hovers (with their cursor) over a Contact Button ("photos/contact.png") image, it changes to another image darker colour ("photos/contact2.png")

Can someone point me in the right direction with this? I dont seem to be getting anywhere :(

teedoff
11-07-2010, 06:48 PM
You would create a second image like the first, but changing the color or whatever you wanted to be different about it, then set the style like so:

a:hover{background-image: (myImagePath.gif);}

DrDOS
11-07-2010, 07:00 PM
If your image is a foreground image you can also change the opacity on hover, so that the background color blends with it. That way you only need the one image. For older versions of IE you need the 'filter' css code.

Excavator
11-07-2010, 07:06 PM
Hello davm22,
I have a CSS rollover demo you can follow here (http://nopeople.com/CSS/CSS_rollover/index.html).

sathirtythree
11-07-2010, 07:22 PM
Here's where I learned how to do it. (http://www.cryer.co.uk/resources/javascript/script13_gallery.htm#_self)

you can just change the "onClick" to "onMouseover"

davm22
11-07-2010, 07:36 PM
Thanks all, still doesnt work!


<div id="rollover1"><a href="index2.html"></div>

then my external CSS file is:


#rollover1 a {
display: block;
height: 45px;
width: 155px;
background: url(photos/contact.png);
}


#rollover1 a hover {
display: block;
height: 45px;
width: 155px;
background: url(photos/rates.png);
}

The thing doesnt appear at all

Excavator
11-07-2010, 07:40 PM
Hard to say why without seeing all your code. When dealing with images, it's always best just to link us to the test site so we can see them.


#rollover1 a {
display: block;
height: 45;
width: 155;
background: url(photos/contact.png);
}


height and width both require some sort of measurement. Usually px?

davm22
11-07-2010, 08:05 PM
Hard to say why without seeing all your code. When dealing with images, it's always best just to link us to the test site so we can see them.


#rollover1 a {
display: block;
height: 45px;
width: 155px;
background: url(photos/contact.png);
}


height and width both require some sort of measurement. Usually px?

Sorry px is now included but the images still dont show, it does have the link now but its only the background colour

davm22
11-07-2010, 09:10 PM
Im not cut out for this :D. I am trying to do a simpler navigation system bar where by its only text and no images. I have the following within my home page:


<div id="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>

The following is in my CSS file:


#navbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#navbar li {
float:left;
}

#navbar a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

#navbar a:hover,a:active
{
background-color:#7A991A;
}

and everything works like it is supposed to as looked at here: http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced.

However, the </div> doesnt seem to stop it and the green background applies itself to my footer also which I dont want. Here is my footer:


<div id="footer">
<a href="index.html">Home</a> | <a href="news.html">News</a> | <a href="contact.html">Contact</a> | <a href="about.html">About</a></div>

and my CSS:


#footer a:link {
font-weight: bold;
text-decoration: underline;
color: #ffffff;
}

#footer a:visited {
font weight: bold;
text-decoration: underline;
color: #990000;
}

#footer a:hover {
font-weight: bold;
text-decoration: none;
color: #ed1c24;
background: #ffff00;
}

I would like these to stay separate and the green background not to appear on my footer also. Can someone help?

Thanks again

Lerura
11-07-2010, 09:29 PM
you have:
#navbar a:hover,a:active

The rules will apply to a:hover within #navbar and all a:active within the document, including #footer.

When separating with "," you are starting a hole new identifier

you also have:
#navbar a:link,a:visited

but since
#footer a:visited is more specific, this will be applied.

change
#navbar a:hover,a:active to #navbar a:hover,#navbar a:active
and
#navbar a:link,a:visited to #navbar a:link,#navbar a:visited

davm22
11-07-2010, 09:45 PM
you have:
#navbar a:hover,a:active

The rules will apply to a:hover within #navbar and all a:active within the document, including #footer.

When separating with "," you are starting a hole new identifier

you also have:
#navbar a:link,a:visited

but since
#footer a:visited is more specific, this will be applied.

change
#navbar a:hover,a:active to #navbar a:hover,#navbar a:active
and
#navbar a:link,a:visited to #navbar a:link,#navbar a:visited


Thats it working now! Thanks a lot for that, Ill keep going until I encounter my next problem :rolleyes:

davm22
11-07-2010, 09:58 PM
And Im back!

Why does the above "Contact" etc on the navigation bar appear as capitals? I would like them to appear as I type them. e.g. "Contact".

Is it due to me trying to use this font: Brush Script Std. Actually just tried it with Arial and it is capitalised also

Excavator
11-07-2010, 10:02 PM
Hello again davm22,
Your off to a great start really - don't give up yet.

When you specify an anchor like this #navbar a:link, a:visited { you apply the styling to both #navbar a:link and all visited a's.

Does that make sense?

Your CSS should look more like this:

#navbar a:link, #navbar a:visited {
display: block;
width: 120px;
font-weight:bold;
color: #fff;
background: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

That way it applies the styles to the visited anchor in #navbar only. Instead of all visited anchors like you originally had it.

Have a look at this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#navbar li {float: left;}
#navbar a:link, #navbar a:visited {
display: block;
width: 120px;
font-weight:bold;
color: #fff;
background: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
#navbar a:hover, #navbar:active {background: #7A991A;}
#footer {
text-align: center;
background: #ccc;
margin: 300px 0 0; /*delete this - it's just some top margin for display purposes*/
}
#footer a:link {
font-weight: bold;
text-decoration: underline;
color: #ffffff;
}
#footer a:visited {
font-weight: bold;
text-decoration: underline;
color: #990000;
}
#footer a:hover {
font-weight: bold;
text-decoration: none;
color: #ed1c24;
background: #ffff00;
}
</style>
</head>
<body>
<div id="container">
<div id="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<!--end navbar--></div>
<div id="footer">
<a href="index.html">Home</a> |
<a href="news.html">News</a> |
<a href="contact.html">Contact</a> |
<a href="about.html">About</a>
<!--end footer--></div>
<!--end container--></div>
</body>
</html>

Plenty of text only menus to look over here (http://nopeople.com/design/CSS%20tips/index.html).



p.s. The validator found an error or two in your CSS. Have a look at the links about validation in my sig below.

Excavator
11-07-2010, 10:03 PM
And Im back!

Why does the above "Contact" etc on the navigation bar appear as capitals? I would like them to appear as I type them. e.g. "Contact".

Is it due to me trying to use this font: Brush Script Std. Actually just tried it with Arial and it is capitalised also

You're telling it to with text-transform: uppercase;

davm22
11-07-2010, 10:08 PM
You're telling it to with text-transform: uppercase;

I copied most of it from a website so I never noticed that or the bold, I have now amended it.

Thanks for the post before the quoted reply also, very informative and I see what to do now. I have just started attempting to use HTML/CSS after buying a book and reading up on it a couple of days ago so Ive still got a long way to go yet.

Really big help though, thanks a lot

DrDOS
11-07-2010, 11:05 PM
In your first code this: #rollover1 a hover {
should have been this: #rollover1 a:hover {
Note the colon added.

Major Payne
11-08-2010, 08:49 AM
Maybe re-inventing the wheel is not the way to do it. These might help:

See following sites for navigation menus:

CSS Library Horizontal CSS Menus: http://www.dynamicdrive.com/style/csslibrary/category/C1/
http://www.dynamicdrive.com/dynamicindex1/
http://www.cssplay.co.uk/menus/
How to Style an Unordered List with CSS: http://www.webreference.com/programming/css_style2/index.html

How To:

http://www.w3.org/TR/WCAG10-HTML-TECHS/#links
http://www.creativepro.com/article/dreamweaver-how-create-you-are-here-navigation-links
http://efuse.com/Design/navigation.html
Simple JQuery Accordion menu: http://www.i-marco.nl/weblog/jquery-accordion-menu/
Drop-Down Menus, Horizontal Style: http://www.alistapart.com/articles/horizdropdowns/
The Right Way to Make a Dropdown Menu: http://www.sitepoint.com/blogs/2009/04/01/the-right-way-to-make-a-dropdown-menu/

Basic Online Flash Menu Maker: http://www.flashvortex.com/index.php?action=picksForm&generatorId=151
Flash Tutorials : Navigation Tutorials: http://www.tutorialized.com/tutorials/Flash/Navigation/1
22 Versatile Adobe Flash Menu and Navigation Tutorials: http://speckyboy.com/2009/05/22/22-versatile-adobe-flash-menu-and-navigation-tutorials/

davm22
11-08-2010, 08:41 PM
Very helpful post, thanks all

Major Payne
11-08-2010, 11:18 PM
You're welcome. :P



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum