SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    RE: onmouseover Popup problem

    I've created a portfolio site and i have some images which when the mouse is hovered over them i want a popup window to appear. I have the CSS sorted for this and am quite new to javascript so the code i have written doesn't seem to work and im unsure why. Could someone point me in the right direction?

    HTML 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" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Creative Bubbles | Web Design &amp; Graphic Design Agency in Notitngham, UK</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.creativebubbles.co.uk/creative-bubbles-news.rss" />
    <script type="text/javascript" src="scripts/scripts.js"></script>
    </head>
    
    <body>
    	<div id="maincontainer">
    		
    		<div id="topNav">
    			<p>
    				<a href="#" accesskey="h" title="Creative Bubbles graphic design, marketing and web design agency"><em>H</em>ome</a> | 
    				<a href="#" accesskey="a" title="About Creative Bubbles expertise in design, marketing and web design"><em>A</em>bout Us</a> |	
    				<a href="#" accesskey="s" title="Information about services Creative Bubbles offer from design, marketing and web design"><em>S</em>ervices</a> | 
    				<a href="#" accesskey="o" title="The work Creative Bubbles does in print, marketing and web design"><em>O</em>ur Work</a> | 	
    				<a href="#" accesskey="n" title="News about what Creative Bubbles is doing in the web industry from print, marketing, web and graphic design"><em>N</em>ews</a> | 
    				<a href="#" accesskey="c" title="Contact Us for information or getting a quote"><em>C</em>ontact Us</a>	
    			</p>
    		</div>
    		
    		<div id="header">
    			<img src="images/site/logo.jpg" alt="Creative Bubbles Logo" width="192" height="109" id="logo" title="Creative Bubbles" />		
    			<div id="quickNavigation">
    				<p>Quick Navigation: <a href="#" accesskey="h" title="Creative Bubbles graphic design, marketing and web design agency">Home</a></p>
    			</div>
    		</div>
    		
    	
    		<!-- Image and News Section -->
    		
    		
    		
    		<div id="topSection">
    		
    			<div id="topSectionImageHolder">
    			
    			<img src="images/site/10194242.jpg" alt="Photo of Women Blowing Bubbles to Indicate Creative Bubbles Brand Being Fun to Work With" width="457" height="237" id="brandImage" title="Creative Bubbles a fun and easy web design agency to work with" />			</div>
    			
    			<div id="news">
    			
    				<div id="topOfNews">
    			
    					<div id="newsHeadline">
    						<h1><a href="#" accesskey="n" title="News about what Creative Bubbles is doing in the web industry from print, marketing, web and graphic design">Latest News</a> <a href="http://www.creativebubbles.co.uk/creative-bubbles-news.rss"><img src="images/site/rss.gif" alt="RSS" border="0" title="RSS" /></a></h1>
    					</div>
    					
    					<div class="date" id="date">Febuary 10th 2007</div>
    				</div>
    				
    					
    					<div class="newsSummary">
    						<p><a href="#">Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked </a></p>
    						<p>Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked </p>
    			  </div>
    					<div class="newsSummary">
    						<p><a href="#">Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked </a></p>
    						<p>Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked by a specialist IT firm in York to redesign </p>
    			  </div>
    					
    			</div>
    			
    	  	</div>
    		
       		<!-- Content -->
    		<div id="content">
    		
    			<div id="leftcol">
    			
    				<div id="servicesSummary">
    				
    					<h1>Creative Bubbles Has Arrived.....</h1>
    					<p>Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked </p>
    					<p>Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked by a specialist IT firm in York to redesign its website. Creative has been asked </p>
    					
    					<a href="#">Web Design &amp; New Media <span class="greyhighlight">+</span></a><br />
    					<a href="#">Web Application Development <span class="greyhighlight">+</span></a><br/>
    					<a href="#">Graphic Design  <span class="greyhighlight">+</span></a><br />
    					<a href="#">Free Web Surveys  <span class="greyhighlight">+</span></a><br />
    					<a href="#">View Our Full Range of Services <span class="greyhighlight">+</span></a>			
    				
    				</div>
    				
    				<div id="salesboxes">
    				
    					<div class="salestoolsbox1">
    					
    						<h1>Web Design &amp; Build</h1>
    						<img src="images/site/teachersbanner.jpg" alt="image of teachers recruitment website" title="Creative Bubbles only build websites that conform to W3C web standards while still looking great" width="200" height="100" />
    						<p class="subHeading">Creative Design &amp; Expert Build</p>
    						<p>Our websites are designed to meet your target markets eye while being built for good usability. Our websites are designed to meet your target markets eye while being built for good usability. Our websites are designed to meet your target markets eye while being built. <a href="#">More <span class="greyhighlight">+</span></a><br />
    </p>
    					
    					
    					</div>
    					
    					<div class="salestoolsbox2">
    					
    						<h1>Branding</h1>
    						<img src="images/site/votebanner.jpg" alt="vote Lincolnshire logo" title="See what Creative Bubbles can do for you with a new branding idea for your business" width="200" height="100" />
    						<p class="subHeading">Out the Box Thinking</p>
    					   <p>Our websites are designed to meet your target markets eye while being built for good usability. Our websites are designed to meet your target markets eye while being built for good usability. Our websites are designed to meet your target markets eye while being built. <a href="#">More <span class="greyhighlight">+</span></a><br />
    </p>
    					</div>
    				
    				</div>
    			
    			</div>
    			
    			<div id="currentWorkImages">
    			
    				<h1><a href="#" accesskey="o" title="The work Creative Bubbles does in print, marketing and web design">Our Current Work</a></h1>
    				
    				<div id="imageHolder">
    				
    				<a href="#"><img src="images/site/loughbourghbanner.jpg" onmouseover="javascript:showObject();" alt="Image of Loughbourgh University Logo" width="372" height="68" title="Case study for the web design work we did for Loughbourgh University" /> </a>
    				<img src="images/site/lightrailbanner.jpg" alt="Image of JMI website" width="372" height="69" title="Case study for the web design and branding work we did for J.M.I Earthing" /> 
    				<img src="images/site/corebanner.jpg" alt="Image of Core Telecom website" width="372" height="68" title="Case study for web design and web development and branding work we did for Core Telecom" /> 
    				<img src="images/site/pentabanner.jpg" alt="Image of Penta website" width="372" height="68" title="Case study for web design and web development work we did for Penta Investments" />	
    				<img src="images/site/normansbanner.jpg" alt="Image of Norman Bar website" width="372" height="69" title="Case study for web design and web development work we did for Norman Bar in Leeds " />
    				<img src="images/site/basfordbanner.jpg" alt="Image of Penta website" width="372" height="68" title="Case study for web design and web development work we did for local Nottinghamshire football club Basford United" />
    				
    				</div>
    				
    			</div>
    		
    		</div>
    		
    		<!-- Footer -->
    		
    		<div id="footer">
    			<div id="address">
    			  <p>Creative Bubbles<br />
    				XXXXXXXXXXXXXX</p>
    			</div>	
    			<div id="contactDetails">
    				<p>Telephone:XXXXXXXX <br />
    				Email: <a href="mailto:info@creativebubbles.co.uk">info@creativebubbles.co.uk</a></p>
    			</div>
    		</div>
    		
    		<div id="tools">
    			<div id="furtherLinks">
    				<p><a href="#" title="Information regarding Accessbility" accesskey="b">Accessi<em>b</em>ility</a> | <a href="#" title="Sitemap for the Creative Bubbles website" accesskey="m">Site<em>m</em>ap</a> | <a href="#" accesskey="t" title="Creative Bubbles Terms &amp; Conditions"><em>T</em>erms of Business</a> | <a href="tools/admin/index.php" title="Creative Bubbles Staff Portal">Staff Portal</a></p>	
    			</div>
    			<div id="xhtmldec">
    				<a href="http://validator.w3.org/check?uri=referer" title="This Page Conforms to W3C Web Standards Valid XHTML" target="_blank"><img src="images/site/validxhtml.gif" alt="Valid XHTML Document Image" title="This Page Conforms to W3C Web Standards Valid XHTML" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This Page Uses a Valid CSS Document According to W3C Standards" target="_blank"><img src="images/site/validcss.gif" alt="Valid CSS Document Image" title="This Page Uses a Valid CSS Document According to W3C Standards" /></a>			
    			</div>	
    		</div>
    		
    		
    		<div id="loughbourghwork">
    		<h1>Loughborough Project</h1>
    		<img src="images/work/lough.jpg" width="400" height="322" />
    		<p>Our websites are designed to meet your target markets eye while being built for good usability. Our websites are designed to meet your target markets eye while being built for good usability. Our websites are designed to meet your target markets eye while being built. </p>
    		<p><a href="#">[Close Window]</a></p>
    		</div>
    	
    	
    	
    	</div>
    </body>
    </html>
    Code:
    /*Popup Work*/
    
    #loughbourghwork {
    position:absolute; 
    left:130; 
    top:250; 
    z-index:1;
    width:420px;
    height:500px;
    border: solid 1px #3eacdf;
    background-color:#FFFFFF;
    visibility:hidden;
    
    }
    Code:
    function showObject(){
    	document.all['loughbourghwork'].style.visibility - "visible";
    	
    }

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try changing that minus sign to an equal sign.

    Code:
    function showObject(){
    	document.all['loughbourghwork'].style.visibility - "visible";
    	
    }
    to

    Code:
    function showObject(){
    	document.all['loughbourghwork'].style.visibility = "visible";
    	
    }

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had tried that before to no success any other ideas? Thanks


Bookmarks

Posting Permissions

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