Web Hosting Talk






PDA

View Full Version : website rollover effect

mkelly09
11-12-2005, 07:01 PM
Hello,

I am trying to accomplish a rollover effect similar to what is described at this website:
http://wellstyled.com/css-nopreload-rollovers.html

My website is at: http://www.pokerjocks.com/newlayout/
Obviously this is not completed yet

What i am trying to do is this: When a user puts there mouse over the Email symbol, i would like for the navigation text to change to E-mail.

I have one long picture: http://www.pokerjocks.com/newlayout/longpic.jpg which is set to show only the navigation. I am trying to have it shift the background position when someone hovers over the email picture.

This is my current code, and i can't figure out why it isn't working:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>PokerJocks.com - Who Says Poker Isn't A Sport?</title>
<style type="text/css">
<!--
body {
text-align:center;
padding:0;
margin:5px 0 0;
font:normal 11px Arial, Helvetica, Sans-serif;
color:#666;
background-image: url(bg.jpg);

}
a:hover {
color:#A77749;
}
a {
color:#777;
}
#container {
text-align:left;
background-color:#4a4a4a;
width:700px;
margin:auto;
position:relative;
padding:0px;

}

#pageHeader {
width:700px;
height:84px;
background:#666 url(index_01.gif) no-repeat;
margin:0;
padding:0;
}
#pageHeader h1,h2 {
padding:0;
margin:0;
display:none;

}
#header2 {
position:absolute;
top:84px;
left:0px;
width:590px;
height:25px;
background:#FFF url(index_02.gif) no-repeat 0px 0;

}
#navigation {
position:absolute;
top:84px;
left:516px;
width:127px;
height:25px;
background:#FFF url(longpic.jpg) no-repeat 0px 0;

}

#navigation A.email:hover {background-position: -127px 0;}


#header2 .p1 span{
display:none;
}
#navigation .p1 span{
display:none
}

#mail {
position:absolute;
top:84px;
left:626px;
width:27px;
height:25px;
background:#FFF url(index_04.gif) no-repeat 0px 0;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="pageHeader">
<h1><span>PokerJocks.com</span></h1>


</div>
<div id="header2">
<p class="p1"><span>Who Says Poker Isn't A Sport?</span></p>
</div>
<div id="navigation">
<p class="p1"><span>Navigation</span></p></div>
<a class="email" href="mailto:chadpaxton@pokerjocks.com"><div id="mail"></div></a>

</div>


</body>
</html>


Does anyone know what im doing wrong?
TomorrowHosting
11-12-2005, 11:57 PM
I don't know what you are doing, but I found doing a code like this:

<a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', 'http://www.my-free-coupons.com/tomorrowhosting.gif', true)"><img src="http://www.my-free-coupons.com/tomorrowhosting.jpg" width="650" height="175" border="0" name="image1"></a>


http://www.my-free-coupons.com/tomorrowhosting.jpg is the original image, and http://www.my-free-coupons.com/tomorrowhosting.gif is the rollover image.

Hope this helps!
the_pm
11-13-2005, 10:42 AM
Ugh, still not working for you yet? :)

I'll work up a working example for you as soon as I get a chance. You'll see, the CSS rollover method is almost laughably easy, once you've gotten the hang of it!