CSS, Javascript Woes - Need some help!

Discussion in 'Web Design and Development' started by irmongoose, Jul 21, 2006.

  1. irmongoose macrumors 68030

    irmongoose

    Joined:
    Dec 3, 2001
    Location:
    Sometimes Tokyo, sometimes California
    #1
    Hello.

    I am trying to make my portfolio site. This page is what I have planned as the opening page. It loads and the image rollover works beautifully in Safari, but the image fails to render in Firefox. Can anyone give me any pointers on what I have done wrong?

    The source:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta http-equiv="Content-Script-Type" content="text/javascript">
    		<meta http-equiv="Content-Style-Type" content="text/css">
    		<title>Conceptualism</title>
    		<style type="text/css">
    			body
    				{
    					background-color: #999999;
    					background-image: url(one.png);
    					background-repeat: no-repeat;
    					background-position: bottom center;
    					margin: 0px;
    					padding: 0px;
    				}
    			#center
    				{
    					width: 282px;
    					height: 276px;
    					position: absolute;
    					top: auto;
    					bottom: 74px;
    					left: 50%;
    					right: 50%;
    					margin: 138px auto auto -130px;
    					border: none;
    				}
    		</style>
    		<script type="text/javascript">
    			function changeStyle()
    				{
    					document.getElementById("b1").style.backgroundImage="url(two.png)";
    					document.getElementById("b1").style.backgroundRepeat="no-repeat";
    				}
    
    			function putBack()
    				{
    					document.getElementById("b1").style.backgroundImage="url(one.png)";
    					document.getElementById("b1").style.backgroundRepeat="no-repeat";
    				}
    		</script>
    	</head>
    	<body id="b1">
    		<img src="two.png" style="display:none;" alt=""/>
    		<div id="center">
    			<a href="Main/index.html" onmouseover="changeStyle()" onmouseout="putBack()">
    				<img src="blank.png" alt="Enter" border=none>
    			</a>
    		</div>
    	</body>
    </html>
    
    What I am trying to accomplish is that onMouseOver changes the background image, thus emulating a rollover image. Is there a better way to implement this?

    Thanks in advance.

    By the way: the rest of the site is incomplete, I am actually changing the design, font, and color scheme, and am basically keeping only the start page, so no need to worry about the other pages.



    irmongoose
     
  2. slooksterPSV macrumors 68030

    slooksterPSV

    Joined:
    Apr 17, 2004
    Location:
    Nowheresville
    #2
    EDIT2: Ok let's see, is the PNG transparent? yeah it'd have to be right...
     
  3. irmongoose thread starter macrumors 68030

    irmongoose

    Joined:
    Dec 3, 2001
    Location:
    Sometimes Tokyo, sometimes California
    #3
    Yeah, it's transparent, it's to emulate a rollover. When the mouse rolls over the transparent image, it changes the background image from one.png to two.png.




    irmongoose
     
  4. slooksterPSV macrumors 68030

    slooksterPSV

    Joined:
    Apr 17, 2004
    Location:
    Nowheresville
    #4
    try adding <img src="two.png... inside the div tag
    and also try setting the URL to ./one.png and ./two.png
    see what results that pends
     
  5. irmongoose thread starter macrumors 68030

    irmongoose

    Joined:
    Dec 3, 2001
    Location:
    Sometimes Tokyo, sometimes California
    #5
    Thanks for the suggestions, but it's a no go. Weird, the same code worked in Firefox before... now it doesn't.

    :confused:

    Anything wrong or unusual about the code that might be causing the problem?



    irmongoose
     

Share This Page