Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Problems in Safari and Chrome

    Hi everyone,

    I having a bit of trouble with my coding and was wondering if anyone could help me.

    I'm attempting to make a page where when you hover over a link the picture on the page changes. This works fine in IE and Firefox but doesn't seem to work in Safari or Chrome.

    I know the problem is a lack of ';' but have tried putting them in a few places and haven't had much luck and was hoping someone could help me.

    Here is the code for the page:

    Code:
    
    <!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=utf-8" />
    <title>??????</title>
    
    <script type="text/javascript">
    
    if (document.images) {
    
    image1 = new Image;
    image2 = new Image;
    image3 = new Image;
    image4 = new Image;
    image5 = new Image;
    image6 = new Image;
    
    image1.src = "ExamplePics/whitespace.jpg"
    image2.src = "ExamplePics/1.jpg"
    image3.src = "ExamplePics/2.jpg"
    image4.src = "ExamplePics/3.jpg"
    image5.src = "ExamplePics/6.jpg"
    image6.src = "ExamplePics/4.jpg"
    
    };
    
    
    </script>
    <link href="Reset.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    
    #maintable {
    	width: auto;
    	border-top: 3px solid #000000;
    	border-left: 3px solid #000000;
    	border-right: 3px solid #000000;
    	border-bottom: 3px solid #000000;
    	background-color: #fff;
    }
    
    #header {
    	padding-top: 50px;
    	padding-left: 10px;
    	padding-right: 10px;
    	border-bottom: 3px solid #000000;
    }
    
    .title {
    	color: #000000;
    	font: Verdana, Geneva, sans-serif;
    	font-size: 35px;
    }
    
    .links {
    	color: #000000;
    	font: Verdana, Geneva, sans-serif;
    	font-size: 15px;
    }
    
    #maincontent {
    	overflow:hidden;
        background: #FFF;
        position:relative;
    	display: table;
    }
    
    #mainlinks {
    	padding-top: 50px;
    	font: Verdana, Geneva, sans-serif;
    	font-size: 25px;
    	padding-right: 20px;
    	display: table-cell;
    }
    
    #picture {
    	width:50px;
    	height: 50px;
    	padding-top: -100px;
    	padding-left: 100px;
        position:absolute;
    	display: table-cell;
    }
    
    
    #footerleft {
    	width: auto;
    	background-color: #ffffff;
    	padding-top: 20px;
    	border-top: 3px solid #000000;
    	padding-bottom: 2px;	
    }
    
    #footerright {
    	width: auto;
    	background-color: #ffffff;
    	padding-top: 14px;
    	border-top: 3px solid #000000;
    	padding-bottom: 3px;		
    }
    
    .developer {
    	float:right;
    	font-size: 12px;
    }
    
    .footerpadding {
    	padding: 0px;
    	margin: 0px;
    	border: 0px;
    }
    
    .icons {
    	position: relative;
    	left: 610px;
    }
    
    
    .navigation {
    	font-size: 19px;
    	position: relative;
    	left: 640px;
    	text-decoration: none;
    }
    
    a { 
    	color: #000000;
    	text-decoration:none 
    }
    
    a:visited, a:link {
    	color: #000000;
    }
    
    @-moz-document url-prefix() {
     .icons {
        position: relative;
    	left: 610px;
      }
    }
    
    
    
    
    </style>
    </head>
    
    <body>
    
    <p>&nbsp;</p>
    <div id="maintable">
    
    	<div id="header">
    		<p class="title"><a href="Index.html">Ben KeyStone</a><font class="navigation"><a href="Index.html">Home</a>&nbsp;&nbsp;&nbsp;		<a href="portrait.html">Portrait</a>&nbsp;&nbsp;&nbsp;<a href="events.html">Events</a>&nbsp;&nbsp;&nbsp;<a href="music.html">Music</a>&nbsp;&nbsp;&nbsp;<a href="personal.html">Personal</a>&nbsp;&nbsp;&nbsp;<a href="contact.html">Contact</a></font></p></div>
    			<div id="maincontent">
    				<div id="mainlinks">
    
    					<a href="subpage.html"
    						onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Lorem ipsum</ul><br /></a>
    					<a href="http://www.google.com"
    						onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Maecenas auctor</ul><br /></a>
    					<a href="http://www.twitter.com"
    						onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Pellentesque habitant</ul><br /></a>
    					<a href="http://www.reddit.com"
    						onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Proin et enim magna</ul><br /></a>
    					<a href="http://www.bbc.co.uk"onMouseover="document.imagename.src=image6.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Jaffa enim magna</ul></a>
    					</div>
                        
                        
    					<div id="picture">
    					<img src="ExamplePics/whitespace.jpg" name="imagename" border="0" width="700" height="500">
    				</div>
    		</div>
    <!--allowing a gap between the main content and header-->
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    
    
    		<div id="footerleft">
    			<div class="footerpadding">&copy; 2011 ????????<br />
    				The view and thoughts of the website are my own and not of any organisation that I work for. 
    				<img src="ExamplePics/facebook.jpg" width="20" height="20" border="0" class="icons"/>&nbsp;&nbsp;<img src="ExamplePics/twitter.jpg" width="20" height="20" border="0" class="icons" />&nbsp;&nbsp;<img src="ExamplePics/linkedin.jpg" width="20" height="20" border="0" class="icons" /></div></div>
    </div>
    <font class="developer">Created by ?????????</font>
    </body>
    </html>
    Last edited by venegal; 12-20-2011 at 05:44 PM. Reason: fixed code tags

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,835
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Please enclose your code in [CODE] tags. And it would be helpful to know on what domain the images are on, i.e.:

    image2.src = "http://domain.com/ExamplePics/1.jpg"
    ...so that I don't have to try to diagnose your problem with all the image links broken...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #3
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about that! It's my first time posting and first time coding so kinda new to it all! I've sorted out the images to the are available online. Just want to note it is a prototype website so images used will not be used in final web design.

    Code:
    <!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=utf-8" />
    <title>Home</title>
    
    
        
    
    
    <script type="text/javascript">
    
    if (document.images) {
    
    image1 = new Image;
    image2 = new Image;
    image3 = new Image;
    image4 = new Image;
    image5 = new Image;
    image6 = new Image;
    
    image1.src = "http://i.imgur.com/l2E4e.jpg"
    image2.src = "http://i.imgur.com/Hb1oa.jpg"
    image3.src = "http://i.imgur.com/vFbYk.jpg"
    image4.src = "http://i.imgur.com/ci3mO.jpg"
    image5.src = "http://i.imgur.com/3Q6MX.jpg"
    image6.src = "http://i.imgur.com/hGVEy.jpg"
    
    };
    
    
    </script>
    <link href="Reset.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    
    #maintable {
    	width: auto;
    	border-top: 3px solid #000000;
    	border-left: 3px solid #000000;
    	border-right: 3px solid #000000;
    	border-bottom: 3px solid #000000;
    	background-color: #fff;
    }
    
    #header {
    	padding-top: 50px;
    	padding-left: 10px;
    	padding-right: 10px;
    	border-bottom: 3px solid #000000;
    }
    
    .title {
    	color: #000000;
    	font: Verdana, Geneva, sans-serif;
    	font-size: 35px;
    }
    
    .links {
    	color: #000000;
    	font: Verdana, Geneva, sans-serif;
    	font-size: 15px;
    }
    
    #maincontent {
    	overflow:hidden;
        background: #FFF;
        position:relative;
    	display: table;
    }
    
    #mainlinks {
    	padding-top: 50px;
    	font: Verdana, Geneva, sans-serif;
    	font-size: 25px;
    	padding-right: 20px;
    	display: table-cell;
    }
    
    #picture {
    	width:50px;
    	height: 50px;
    	padding-top: -100px;
    	padding-left: 100px;
        position:absolute;
    	display: table-cell;
    }
    
    
    #footerleft {
    	width: auto;
    	background-color: #ffffff;
    	padding-top: 20px;
    	border-top: 3px solid #000000;
    	padding-bottom: 2px;	
    }
    
    #footerright {
    	width: auto;
    	background-color: #ffffff;
    	padding-top: 14px;
    	border-top: 3px solid #000000;
    	padding-bottom: 3px;		
    }
    
    .developer {
    	float:right;
    	font-size: 12px;
    }
    
    .footerpadding {
    	padding: 0px;
    	margin: 0px;
    	border: 0px;
    }
    
    .icons {
    	position: relative;
    	left: 610px;
    }
    
    
    .navigation {
    	font-size: 19px;
    	position: relative;
    	left: 640px;
    	text-decoration: none;
    }
    
    a { 
    	color: #000000;
    	text-decoration:none 
    }
    
    a:visited, a:link {
    	color: #000000;
    }
    
    @-moz-document url-prefix() {
     .icons {
        position: relative;
    	left: 610px;
      }
    }
    
    
    
    
    </style>
    </head>
    
    <body>
    
    <p>&nbsp;</p>
    <div id="maintable">
    
    	<div id="header">
    		<p class="title"><a href="Index.html">BenJamin</a><font class="navigation"><a href="Index.html">Home</a>&nbsp;&nbsp;&nbsp;		<a href="portrait.html">Portrait</a>&nbsp;&nbsp;&nbsp;<a href="events.html">Events</a>&nbsp;&nbsp;&nbsp;<a href="music.html">Music</a>&nbsp;&nbsp;&nbsp;<a href="personal.html">Personal</a>&nbsp;&nbsp;&nbsp;<a href="contact.html">Contact</a></font></p></div>
    			<div id="maincontent">
    				<div id="mainlinks">
    
    					<a href="subpage.html"
    						onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Lorem ipsum</ul><br /></a>
    					<a href="http://www.google.com"
    						onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Maecenas auctor</ul><br /></a>
    					<a href="http://www.twitter.com"
    						onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Pellentesque habitant</ul><br /></a>
    					<a href="http://www.reddit.com"
    						onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Proin et enim magna</ul><br /></a>
    					<a href="http://www.bbc.co.uk"onMouseover="document.imagename.src=image6.src" onMouseout="document.imagename.src=image1.src"><ul>&bull;&nbsp;Jaffa enim magna</ul></a>
    					</div>
                        
                        
    					<div id="picture">
    					<img src="http://i.imgur.com/l2E4e.jpg" name="imagename" border="0" width="700" height="500">
    				</div>
    		</div>
    <!--allowing a gap between the main content and header-->
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    
    
    		<div id="footerleft">
    			<div class="footerpadding">&copy; 2011 <br />
    				The view and thoughts of the website are my own and not of any organisation that I work for. 
    				<img src="http://i.imgur.com/9J9sE.jpg" width="20" height="20" border="0" class="icons"/>&nbsp;&nbsp;<img src="http://i.imgur.com/nsW41.jpg" width="20" height="20" border="0" class="icons" />&nbsp;&nbsp;<img src="http://i.imgur.com/zDrXU.jpg" width="20" height="20" border="0" class="icons" /></div></div>
    </div>
    <font class="developer">Created by</font>
    </body>
    </html>
    Last edited by venegal; 12-20-2011 at 05:43 PM. Reason: fixed code tags

  • #4
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Quote Originally Posted by outsidethelin View Post
    I know the problem is a lack of ';' but have tried putting them in a few places and haven't had much luck and was hoping someone could help me.
    What makes you think a missing semicolon is causing the problem? The actual issue is that that image sits in a container that has overflow: hidden. Since the container is too small for holding the image, it won't show.

    The other browsers apparently don't care because of display: table (why did you do that anyway?)

    In any case, this is a CSS issue, not Javascript, so I'll move the thread.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •