[RESOLVED] Rollover Effect

@SnotNov 30.2007

I am trying to replace javascript with this and I’m having trouble getting my personal settings plugged into it.

When my page page is loaded I want it to display this image

~~[url]~~http://www.drysnot.com/menuimages/forums_off.gif[/url]

when you mouse over the image I want it to change to this one

~~[url]~~http://www.drysnot.com/menuimages/forums_on.gif[/url]

Could you please show me how I add in the 2nd image that displays when you mouse over.

~~[QUOTE]~~

[/QUOTE]

Thank you so much for the help

to post a comment

CSS

10 Comments(s) _↴

@ray326Nov 30.2007 — #Use the images as the backgrounds of the two styles, i.e.

.rollover a { background:#000 url(menuimages/forums_off.gif); ...}

.rollover a:hover { background:#000 url(menuimages/forums_on.gif); ...}

@SnotauthorNov 30.2007 — #It may not be working because of these errors.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.drysnot.com%2F

This is my style.css it has two codes i'v been trying to figure out yours and another that I also can't get to work. I'm a complete noob

http://www.drysnot.com/style.css

This is my index.html I should be valid but I don't know if I have all the correct info in it or not.

http://www.drysnot.com/index.html

This is what I'm trying to make my page look like

http://www.drysnot.com/index2.html Depending on if you are using firefox with a screen res of 1280-1024 that page may look sweet. I'm trying to get the same rollover effect to work on the images before I start trying to get the tables replaced.

Do you know what I need to do next or what code I should change?

@WebJoelNov 30.2007 — #Your CSS:
.rollover a { background:#000 url(menuimages/forums_off.gif); ...}

.rollover a:hover { background:#000 url(menuimages/forums_on.gif); ...}

a:link, a:visited{

display:block;

width:[B]134 px;[/B]

height:[B]94 px;[/B]

background:url(

[B]menuimagesforums_off.gif)[/B];

}

a:active, a:hover{

background:url([B]menuimagesforums_on.gif[/B]);

display:block;

width:[B]134 px;[/B]

height:[B]94 px;[/B]

}[/QUOTE] might benefit if you removed the 'whitespace' between the integer and the unit-of-measure (do [B]134px[/B]; instead of [B]134 px[/B])

And the slashes in bold: -aren't they slashing in the wrong direction for an online site?

a bit of mild redundancy here:<table style="text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">[/QUOTE] -A 100% width anything, is not really going to require any [I]margin-left: auto; margin-right: auto;[/I] :rolleyes:

@SnotauthorNov 30.2007 — #http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.drysnot.com%2F

I removed the other code and made the changes to the style.css file.

This is the code i'm using to link to the style.css

[CODE]<link rel="stylesheet" href="style.css" type="text/css" media="screen">[/CODE]

Is that how it should be?

My index.html has been updated after I removed the extra code

@WebJoelNov 30.2007 — #perfect :p

@SnotauthorNov 30.2007 — #Sweet

So thats in order what do I need to do to make the images show up?

Current:http://www.drysnot.com/index.html

Goal:http://www.drysnot.com/index2.html

Thank you so much for helping me out with this.

@SnotauthorNov 30.2007 — #Haha!!!

I think I have it

I added this to the body of my index file

<div class="rollover"><a href="forums"></a></div>

One more question where do I go to learn how to change the position of the images?

@SnotauthorNov 30.2007 — #I was unable to edit the first post on these forums but this is the answer to the question: How do you add the roll over effect to your page using css.

1: Create a file named style.css with this code inside

[CODE]a:link, a:visited{
 display:block;
 width:###px;
 height:###px;
 background:url(
 /your/pic/location.gif);
 }
 a:active, a:hover{
 background:url(/your/pic/location.gif);
 display:block;
 width:###px;
 height:###px;
 }[/CODE]

2: Replace the ### with the px of your image eg 200px then replace the /your/pic/location.gif with your image path.

3: In your index.html inside the head you need a link to your style.css sheet
[CODE]<link rel="stylesheet" href="style.css" type="text/css" media="screen">[/CODE]

4: In your index.html file should have this code inside the body
[CODE]<div class="rollover"><a href="Path/to/goto/when/clicked"></a></div>[/CODE]

I think thats it if I missed something I hope a mod will fix it ?

@WebJoelDec 02.2007 — #a:link, a:visited{

display:block;

width:###px;

height:###px;

background-image:url(/your/pic/location.gif);

}

a:active, a:hover{

background-image:url(/your/pic/location[B][COLOR="Red"]2[/COLOR][/B].gif);

display:block;

width:###px;

height:###px;

}[/QUOTE] Make sure that your '[COLOR="Red"]active[/COLOR]' & '[COLOR="Red"]hover[/COLOR]' [COLOR="Red"]images[/COLOR] aren't the same ones, else, no visible change occurs. But yeah, this should do it.

-Ugly background-images in my example, -you can affect several 'states' (link, visited, hover, active)..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

p {font-size: 100%; line-height:1.0em; margin:8px 0 5px 0;}

html, body {min-height:100%; height:101%; padding-bottom:25px;

font:x-small Arial, Verdana, serif;

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */}

html>body {font-size:small; height:auto;}/* Assist IE6 & under, 100% height */

font-size: small; voice-family: ""}"";

voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, helvetica, serif; background-color:none;

font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}

h1{font-size: 1.93em;}

h2{font-size: 1.72em;}

h3{font-size: 1.52em;}

h4{font-size: 1.42em;}

h5{font-size: 1.32em;}

h6{font-size: 1.21em;}

</style>

<style>

#navs {margin:25px; border:2px solid gray; border-bottom:5px solid gray; border-left:4px solid gray; width:100px;}

#navs li {list-style-type:none; height:32px; border-bottom:1px solid gray; background-color:#000; text-align:center; padding:10px 3px 0 0;}

#navs li a {text-decoration:none; font-weight:bold; padding:10px 35px 10px 40px}

#navs li a:hover {text-decoration:underline;}

a { color:white}

#navs li a:link {background-image:url(bg-a.gif); color:white}

#navs li a:visited {background-image:url(bg-v.gif);}

#navs li a:hover {background-image:url(bg-h.gif); }

#navs li a:active {background-image:url(bg-act.gif);}

</style>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

<ul id="navs">

<li><a href="#">Link 1</li>

<li><a href="#">Link 2</li>

<li><a href="#">Link 3</li>

<li><a href="#">Link 4</li>

<li><a href="#">Link 5</li>

</ul>

</body>

</html>[/QUOTE]

[upl-file uuid=dee34430-a686-4307-8d55-b747915cacc0 size=3kB]bg-a.gif[/upl-file]

[upl-file uuid=57da04dd-1029-4daa-bdab-7ed7e9c3912d size=3kB]bg-act.gif[/upl-file]

[upl-file uuid=5fe6868d-a5e7-4af3-9567-73753bf1760a size=3kB]bg-h.gif[/upl-file]

[upl-file uuid=a0e96b02-b0bf-43b6-a717-36f0c758ca9d size=2kB]bg-v.gif[/upl-file]

@SnotauthorDec 02.2007 — #Thank you so much for the reply M8

Also in #CSS _↴

What should i use Mozilla Layout Problems Aligning a form to the center?

Success!

Help @Snot spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Rollover Effect

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Rollover Effect

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴