rollover effect. origional image not appearing

This is a discussion on "rollover effect. origional image not appearing" within the Web Page Design section. This forum, and the thread "rollover effect. origional image not appearing are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Mar 3rd, 2007, 03:33
New Member
Join Date: Mar 2007
Location: Michigan, US
Age: 18
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Question rollover effect. origional image not appearing

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
Reply With Quote

  #2 (permalink)  
Old Mar 3rd, 2007, 07:30
Ryan Fait's Avatar
SuperMember

SuperMember
Join Date: May 2006
Location: Las Vegas
Posts: 3,786
Thanks: 0
Thanked 0 Times in 0 Posts
Re: rollover effect. origional image not appearing

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/
Reply With Quote
  #3 (permalink)  
Old Mar 3rd, 2007, 13:20
masonbarge's Avatar
Highly Reputable Member
Join Date: Jan 2006
Location: Atlanta GA
Posts: 631
Thanks: 0
Thanked 0 Times in 0 Posts
Re: rollover effect. origional image not appearing

You need to post your code with kind of question. Otherwise, how can anyone tell what's wrong?
Reply With Quote
  #4 (permalink)  
Old Mar 3rd, 2007, 13:37
New Member
Join Date: Mar 2007
Location: Michigan, US
Age: 18
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Re: rollover effect. origional image not appearing

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: Select all
<!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: Select all
<!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

Last edited by WeirdClayJisKOOL; Mar 3rd, 2007 at 13:49.
Reply With Quote
  #5 (permalink)  
Old Mar 3rd, 2007, 13:59
New Member
Join Date: Mar 2007
Location: Michigan, US
Age: 18
Posts: 8
Thanks: 0
Thanked 0 Times in 0 Posts
Re: rollover effect. origional image not appearing

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

Code: Select all
<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

Last edited by WeirdClayJisKOOL; Mar 3rd, 2007 at 14:09.
Reply With Quote
Reply

Tags
rollover

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Ordered List (Rollover Effect) Problem in I.E 6 Aaron1988 Web Page Design 0 Mar 10th, 2008 03:56
[SOLVED] multiple image rollover not restoring image snappy JavaScript Forum 4 Nov 5th, 2007 14:38
White pixels appearing in image (IE only) JennyChaos JavaScript Forum 7 Jul 20th, 2007 12:12
mystery non-appearing image jessixcate Graphics and 3D 1 Apr 14th, 2007 02:48
Film Strip Rollover Effect Accurax Web Page Design 9 Nov 6th, 2006 15:13


All times are GMT. The time now is 10:35.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43