rollover effect. origional image not appearing

WeirdClayJisKOOL · March 3rd, 2007, 12:33 AM

what i have is an image, and when i rollover it, it turnes into a divverent image. the problem is, the origionaly image doesn't always appear, so it just shows the one when you roll over it. how can i fix this?

i don't know if this makes a difference, but it's in a div

Ryan Fait · March 3rd, 2007, 04:30 AM

Here's an example of the best way to do this via CSS. You won't experience your problem.

http://www.newguyinennis.com/samples/css_hover/

masonbarge · March 3rd, 2007, 10:20 AM

You need to post your code with kind of question. Otherwise, how can anyone tell what's wrong?

WeirdClayJisKOOL · March 3rd, 2007, 10:37 AM

ok well there is stuff in there i have because i'm using the page basically so it will generate a aol instant messenger message window, so if you're wondering what some of the stuff is, thats what it's for. the original code i was using is this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<head>
<title>WeirdClayJisKOOL aim redirect</title>
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="http://xhila.com/style.css" media="screen">
<style type="text/css">
.sneaky { display: none; visibility: hidden; }
.myspace{
height:420px; 
  width:760px; 
  overflow: hidden; 
  background: url(http://i25.photobucket.com/albums/c8...ntomyspace.jpg) top left no-repeat; 
  display: block;
  } 
.myspace:hover{
  background: url(http://i25.photobucket.com/albums/c8...cerollover.jpg) bottom left no-repeat; 
  }
.divall {
   width:760px;
   height:420px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-227px;
   margin-left:-380px;
  }
.picdiv {
background-color:transparent; color:999999;
border:0px solid; border-color:000000;
width:765px; height:430px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-380px; margin-top:20px; text-align:center;
visibility:visible;}

body {overflow-y:hidden!important;}
body {overflow-x:hidden!important;}
body {background-color:white; }

{cursor: url(http://www.profiletweaks.com/cursors/2/devilhand.ani);} A {cursor: url(http://www.profiletweaks.com/cursors...ilhandleft.ani);}

</style>
<script language="javascript">
    function reDirect() { document.aim.submit() }
</script>
</head>
<body onLoad="reDirect()">
<form  method="post" action="aim:goim?screenname=WeirdClayJisKOOL&message=Hey!" name="aim">
<span class="sneaky"><input type="submit" value="AIM"></span>
</form>
</body>
<body>
<div class="divall">
<div class="picdiv"><a href="http://www.myspace.com/WeirdClayJisKOOL" class="myspace"></a></div>
</div>
</body>
</html>

then using the link that you gave me, i changed it to this:

Code:

<!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="description" content="">
        <link rel="stylesheet" type="text/css" href="http://xhila.com/style.css" media="screen">
        <title>WeirdClayJisKOOL aim redirect</title>
        <style type="text/css">
            .sneaky { display: none; visibility: hidden; }
            ul#linkList {
                padding:0;
                margin:0;
            }
            
            ul#linkList li {
                list-style-type:none;
                float:left;
                margin:0 1px 0 1px;
            }
            
            ul#linkList li a {
                display:block;
                width:760px;
                height:420px;
                text-decoration:none;
                background:url("return to myspace.jpg") no-repeat 0px 0px;
            }
            
            ul#linkList li a:hover {
                background:url("return to myspace.jpg") no-repeat 0px -420px;
            }
            .divall {
               width:760px;
               height:420px;
               position:absolute;
               top:50%;
               left:50%;
               margin-top:-227px;
               margin-left:-380px;
              }
            .picdiv {
            background-color:transparent; color:999999;
            border:0px solid; border-color:000000;
            width:765px; height:430px; overflow:auto;
            position:absolute; z-index:2; left:50%; top:0%;
            margin-left:-380px; margin-top:20px; text-align:center;
            visibility:visible;}

            body {overflow-y:hidden!important;}
            body {overflow-x:hidden!important;}

            {cursor: url(http://www.profiletweaks.com/cursors/2/devilhand.ani);} A {cursor: url

            (http://www.profiletweaks.com/cursors...ilhandleft.ani);}

            body {background-color:white; }

</style>
<script language="javascript">
    function reDirect() { document.aim.submit() }
</script>
</head>
<body onLoad="reDirect()">
<form  method="post" action="aim:goim?screenname=WeirdClayJisKOOL&message=Hey!" name="aim">
<span class="sneaky"><input type="submit" value="AIM"></span>
</form>
</body>
<body>
<div class="divall">
<div class="picdiv">
<ul id="linkList">
<li><a href="http://www.myspace.com/WeirdClayJisKOOL" title="Return to Myspace"></a></li>
</ul>
</div>
</div>
</body>
</html>

after i changed it, it seems to work in IE, but not FX. it also seems to take longer time to load.

EDIT:It loads in FX, and the image is seen, and upon rollover it changes, but then changes back even when the mouse is still there. so unless you constantly move the mose over it, it doesn't stay changed

WeirdClayJisKOOL · March 3rd, 2007, 10:59 AM

sorry to keep posting, but i think i fixed it. i removed this line of code:

Code:

<link rel="stylesheet" type="text/css" href="http://xhila.com/style.css" media="screen">

which was from the page where i took the code to generate the instant message. now i think it's working but i am going to have people try it who are using different browsers and such

thanks a lot for your help i really appreciate it.

EDIT: again, sorry for keep posting, but I talked to my friend and she said it still wasn't working for her. i believe she is using IE. so if you don't mind if you could look at my code and she what to do to clean it up that would be amazing. thanks