SitePoint Sponsor

User Tag List

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

    RE: JavaScript Popup Effect Question

    I'm after creating a JavaScript effect on my site. I've just created a basic popup effect on the Loughbourgh Image which when clicked brings up a popup (which for some reason only works in IE at the moment). However this is static. What i want is whenever i hover over that image the popup appears but in relation to the cursor. So if the cursor moves the pop moves along with it.

    I assume there is an effect such as this but i have had no luck finding it so can someone point me in the right direction please? Is there any similer posts regarding this subject or a tutorial i could learn from?

    www.creativebubbles.co.uk

    Site above shows

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi martinsandhu,

    Here are some things to give you some ideas.

    Instead of wrapping the imgs in <a> elements, set their mousemove listener as below. Now in the listener, 'this' references the img hovered. So you can look at "this.src" (or other properties) to know which info to pop up.

    Note how I'm finding the mouse position. This is a simplified version of my code for xEvent.

    Now I have a question for you. How will the user close the popup if it moves with the mouse?

    Code:
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
      if (window.fnOldLoad) {fnOldLoad();}
      var i, imgs = document.getElementById('imageHolder').getElementsByTagName('img');
      for (i = 0; i < imgs.length; ++i) {
        imgs[i].onmouseover = bannerOnMouseover;
      }
    }
    
    function bannerOnMouseover(e)
    {
      var el = document.getElementById('loughbourghwork');
      if (el) {
        el.style.visibility = "visible"
        document.onmouseover = docOnMouseover;
      }
    }
    
    function docOnMouseover(e)
    {
      var x = 0, y = 0;
      e = e || window.event;
      if (e) {
        if (typeof e.pageX != 'undefined') {
          x = e.pageX;
          y = e.pageY;
        }
        else if (typeof e.clientX != 'undefined') {
          x = e.clientX + document.body.scrollLeft;
          y = e.clientY + document.body.scrollTop;
        }
      }
      var el = document.getElementById('loughbourghwork');
      if (el) {
        el.style.left = x + 'px';
        el.style.top = y + 'px';
      }
    }
    function hideObject()
    {
      document.onmouseover = null;
      document.getElementById('loughbourghwork').style.visibility = "hidden";	
    }
    Also, the div with id="loughbourghwork" needs to be outside of 'maincontainer' - needs to be a direct child of 'body'.

  3. #3
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response.

    What i actually want to happen is that the popup only appears when hovered over the image so when you move off the image the popup clears. However i want the popup when hovered over the image to move in relation to the mouse. Not sure if i have made clear what i want to achieve???

    Anyway i have tried to implement what you have done and have been partially succesful to my final objective but could use some more assistance.

    Is there another way of achieving my desired effect?


    Thanks

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type='text/css'>
    #imageHolder {
      position: absolute;
      width: 372px;
      top: 10px;
      right: 10px;
    }
    #loughbourghwork {
      position: absolute;
      display: none;
      width: 372px;
    }
    </style>
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {fnOldLoad = window.onload;}
    window.onload = function()
    {
      if (window.fnOldLoad) {fnOldLoad();}
      var i, imgs = document.getElementById('imageHolder').getElementsByTagName('img');
      for (i = 0; i < imgs.length; ++i) {
        imgs[i].onmousemove = bannerOnMousemove;
        imgs[i].onmouseout = bannerOnMouseout;
      }
    }
    function bannerOnMousemove(e)
    {
      var id;
      if (this.src.indexOf('loughbourghbanner') != -1) {
        id = 'loughbourghwork';
      }
    /*
      else if (this.src.indexOf('lightrailbanner') != -1) {
        id = 'lightrailwork';
      }
    */
      else {
        return;
      }
      var el = document.getElementById(id);
      if (el) {
        var x = 0, y = 0;
        e = e || window.event;
        if (e) {
          if (typeof e.pageX != 'undefined') {
            x = e.pageX;
            y = e.pageY;
          }
          else if (typeof e.clientX != 'undefined') {
            x = e.clientX + document.body.scrollLeft;
            y = e.clientY + document.body.scrollTop;
          }
        }
        el.style.display = "block"
        //window.status = 'x:' + x + ', y:' + y + ', el.ow:' + el.offsetWidth;////////////
        x -= el.offsetWidth;
        el.style.left = x + 'px';
        el.style.top = y + 'px';
      }
    }
    function bannerOnMouseout(e)
    {
      document.getElementById('loughbourghwork').style.display = "none";
    }
    
    </script>
    </head>
    <body>
    
    <div id="imageHolder">
    <img src="images/site/loughbourghbanner.jpg" 
    <img src="images/site/lightrailbanner.jpg" al
    <img src="images/site/corebanner.jpg" alt="Im
    <img src="images/site/pentabanner.jpg" alt="I
    <img src="images/site/normansbanner.jpg" alt=
    <img src="images/site/basfordbanner.jpg" alt=
    </div>
    
    <div id="loughbourghwork">
    <h1>Loughborough Project</h1>
    <img src="images/work/lough.jpg" width="400" 
    <p><strong>Client:</strong> Loughbourgh Unive
    <strong>Proposal:</strong> To build and incor
    <strong>Website:</strong> <a href="http://www
    </div>
    
    </body>
    </html>
    Note that imageHolder doesn't have to have position:absolute. I only did that on this test page to get the images on the right side of the page.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a demo which is more cross-browser (it uses the X library) and has more features.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name='author' content='Mike Foster (Cross-Browser.com)'>
    <title>Banner-Preview Demo</title>
    <style type='text/css'>
    #banners {
      width: 300px;
      margin-left: 350px;
    }
    #banners div {
      width: 300px;
      height: 70px;
      margin-bottom: 20px;
    }
    .preview {
      position: absolute;
      display: none;
      width: 300px;
      height: 300px;
    }
    #b1 { border:1px solid #369; }
    #b2 { border:1px solid #963; }
    #b3 { border:1px solid #69C; }
    #b4 { border:1px solid #C96; }
    #b5 { border:1px solid #9CF; }
    #b6 { border:1px solid #FC9; }
    #pb1 { background:#369; }
    #pb2 { background:#963; }
    #pb3 { background:#69C; }
    #pb4 { background:#C96; }
    #pb5 { background:#9CF; }
    #pb6 { background:#FC9; }
    #footer {
      text-align: center;
      margin-top: 400px;
    }
    </style>
    <script type='text/javascript' src='../x_core.js'></script>
    <script type='text/javascript' src='../x_event.js'></script>
    <script type='text/javascript'>
    if (typeof window.onload == 'function') {bpOldOnLoad = window.onload;}
    window.onload = function()
    {
      if (window.bpOldOnLoad) {bpOldOnLoad();}
      var i = 1, b = xGetElementById('b' + i);
      while (b) {
        b.onmousemove = bpOnMousemove;
        b.onmouseout = bpOnMouseout;
        b = xGetElementById('b' + (++i));
      }
    }
    function bpOnMousemove(e)
    {
      var p, h, x, y, offset = 50; // offset = distance between mouse and right edge of preview
      p = xGetElementById('p' + this.id);
      if (p) {
        p.style.display = 'block';
        e = new xEvent(e);
        x = e.pageX;
        y = e.pageY;
        x -= xWidth(p) + offset; // puts preview left of banner
        h = xHeight(p);
        if (y + h > xScrollTop() + xClientHeight()) {
          y -= h;
        }
        xMoveTo(p, x, y);
      }
    }
    function bpOnMouseout()
    {
      var p = xGetElementById('p' + this.id);
      if (p) p.style.display = 'none';
    }
    </script>
    </head>
    <body>
    <h1>Banner-Preview Demo</h1>
    
    <div id='banners'>
    <div id='b1' title="Banner 1"><img src='' alt=""></div>
    <div id='b2' title="Banner 2"><img src='' alt=""></div>
    <div id='b3' title="Banner 3"><img src='' alt=""></div>
    <div id='b4' title="Banner 4"><img src='' alt=""></div>
    <div id='b5' title="Banner 5"><img src='' alt=""></div>
    <div id='b6' title="Banner 6"><img src='' alt=""></div>
    </div>
    
    <p id='footer'>For more Javascript toys visit <a href='http://cross-browser.com/'>Cross-Browser.com</a></p>
    
    <!-- position:absolute -->
    <div id='pb1' class='preview'>Preview for banner 1</div>
    <div id='pb2' class='preview'>Preview for banner 2</div>
    <div id='pb3' class='preview'>Preview for banner 3</div>
    <div id='pb4' class='preview'>Preview for banner 4</div>
    <div id='pb5' class='preview'>Preview for banner 5</div>
    <div id='pb6' class='preview'>Preview for banner 6</div>
    
    </body>
    </html>

  6. #6
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that i shall have a deeper look over the weekend and implement it and send you the results to look at.

    Once again Thanks.

  7. #7
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike,

    I've looked at your script and have tested it and when the css and javascript is inline in the html page it works fine. However for some reason when these are externally attached the script doesn't work. I'm unsure if there is a connection between these elements and the reason it doesn't work but no jaavscript error appears to tell me otherwise. Have you experinced this before?

    example

    www.creativebubbles.co.uk

    Thanks

  8. #8
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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" />
    <meta name='author' content='Mike Foster (Cross-Browser.com) JavaScript Files'>
    <meta name='author' content='Martin Sandhu CSS and XHTML and Graphics'>
    <title>Creative Bubbles | Web Design &amp; Graphic Design Agency in Notitngham, UK</title>
    <script type="text/javascript" src="scripts/scripts.js"></script>
    <script type="text/javascript" src="scripts/x_core.js"></script>
    <script type="text/javascript" src="scripts/x_event.js"></script>
    <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" />
    </head>
    
    <body onload="function();">
    	<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="#">ur websites are designed to meet your target markets eye while being built for good usability</a></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.</p>
    					</div>
    					<div class="newsSummary">
    						<p><a href="#">ur websites are designed to meet your target markets eye while being built for good usability</a></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.</p>
    					</div>
    					
    			</div>
    			
    	  	</div>
    		
       		<!-- Content -->
    		<div id="content">
    		
    			<div id="leftcol">
    			
    				<div id="servicesSummary">
    				
    					<h1>Creative Bubbles Has Arrived.....</h1>
    					<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>
    					<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">
    				
    				<img src="images/site/loughbourghbanner.jpg" alt="Image of Loughbourgh University Logo" width="372" height="68" title="Case study for the web design work we did for Loughbourgh University" /> 
    				<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</p>
    			  <p>XXXXXXXXXXXXXXXX</p>
    			</div>	
    			<div id="contactDetails">
    				<p>TelephoneXXXXXXXX <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>
    	
    	<!-- Work Hover Boxes -->
    	
    	
    	<div id='pb1' class='preview'>
    	
    				<img src="images/work/lough.jpg" width="400" height="322" />
    				
    	</div>
    	
    </body>
    </html>
    Code:
    /*Written by Martin Sandhu 30 January 2007*/
    
    
    
    /* Basic elements */
    
    
    html,body{
    	height:100&#37;;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    
    	.hideFromCSSBrowsers {display: none;}
    
    	img{border:none;}
    
    	body{background:#ffffff;
    	}
    	
    .clear {clear:both;}
    
    
    table {
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;	
    }
    
    em {
    text-decoration:underline;
    font-style:normal;
    }
    
    
     h1 {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    }
    
     p {
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;
    }
    
     a {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    }
     a:hover {
    font:12px Arial, Helvetica, sans-serif;
    color:#95d6f4;
    font-weight:bold;
    text-decoration:none;
    }
    
    .pageTitle {
    font:18px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    margin:0;
    }
    
    .pageSubHeading {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    }
    
    
    /* Header and Container */
    
    
    	
    #maincontainer {
    margin: 0px auto;
    text-align: left;
    width: 863px;
    }
    
    #topNav {
    width:863px;
    padding: 8px 0px 8px 0;
    margin:0;
    background:#95d6f4;
    text-align:right;
    }
    
    
    #topNav p{
    font:12px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    margin:0 8px 0 0px;
    padding:0;
    }
    
    #topNav a {
    color:#FFFFFF;
    text-decoration:none;
    }
    
    #topNav a:hover {
    color:#FFFFFF;
    text-decoration:underline;
    }
    
    
    #header {
    float:left;
    width:863px;
    height:109px;
    }
    
    #logo {
    width:200px;
    float:left;
    }
    
    
    #greyLine {
    border: solid 2px #cccccc;
    margin:0 0 10px 0;
    }
    
    /* breadcrumbs */
    
    
    #quickNavigation {
    float:right;
    width:500px;
    margin:80px 0 0 0;
    padding:0;
    }
    
    #quickNavigation p {
    text-align:right;
    color:#999999;
    font:12px Arial, Helvetica, sans-serif;
    }
    
    #quickNavigation a {
    color:#3eacdf;
    text-decoration:none;
    }
    
    #quickNavigation a:hover {
    color:#3eacdf;
    text-decoration:underline;
    }
    
    /* middle section and news box */
    
    
    
    #topSection {
    width:863px;
    margin:0;
    padding:0;
    float:left;
    height:237px;
    }
    
    #brandImage {
    float:left;
    margin:0 0px 0 0;
    padding:0;
    height:237px;
    }
    
    #newsHeadline {
    margin:0;
    padding:0 0 10px 0;
    width:150px;
    float:left;
    }
    
    #topOfNews {
    margin:0 0 0px 0;
    padding:0 0 0px 0;
    float:left;
    width:375px;
    }
    
    #date {
    margin:0;
    padding:0;
    width:150px;
    float:right;
    }
    
    .date {
    text-align:right;
    font:10px Arial, Helvetica, sans-serif;
    color:#666666;
    font-weight:bold;
    }
    
    
    #news {
    width:375px;
    margin:0px 0 0 0;
    padding:5px 10px 5px 10px;
    float:right;
    border: solid 1px #3eacdf;
    height:225px;
    }
    
    #news h1 {
    margin:0;
    padding:0;
    }
    
    #news h1 a {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    vertical-align:top;
    }
    
    #news h1 a:hover {
    font:14px Arial, Helvetica, sans-serif;
    color:#95d6f4;
    font-weight:bold;
    text-decoration:none;
    }
    
    #news img {vertical-align:top;}
    
    .newsSummary {
    margin:0px 0 0 0;
    padding:0 0 10px 0;
    }
    
    
    #news p {
    margin:0px 0 0px 0;
    padding:0;
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;
    }
    
    #news a {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    margin:0px 0 0 0;
    padding:0;
    text-decoration:none;
    font-weight:bold;
    }
    
    #news a:hover {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    margin:0px 0 0 0;
    padding:0;
    text-decoration:underline;
    font-weight:bold;
    }
    
    /* content */
    
    
    #content {
    width:863px;
    margin:10px 0 10px 0;
    padding:0;
    float:left;
    }
    
    #servicesSummary {
    width:435px;
    float:left;
    border: solid 1px #3eacdf;
    padding:10px 10px 10px 10px;
    }
    
    #servicesSummary h1 {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    margin:0 0 10px 0;
    }
    
    #servicesSummary p {
    font:12px Arial, Helvetica, sans-serif;
    color:#000000;
    margin:0 0 10px 0;
    }
    
    #servicesSummary a {
    font:12px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    }
    
    #servicesSummary a:hover {
    font:12px Arial, Helvetica, sans-serif;
    color:#95d6f4;
    font-weight:bold;
    text-decoration:none;
    }
    
    .greyhighlight {
    color:#666666;
    }
    
    .subHeading {
    color:#3E84A1;
    font:14px Arial, Helvetica, sans-serif;
    font-weight:bold;
    margin:0 0 5px 0;
    }
    
    #leftcol {
    width:455px;
    float:left;
    margin:0;
    padding:0;
    }
    
    
    #salesboxes {
    float:left;
    clear:both;
    width:457px;
    margin:10px 0 0px 0;
    }
    
    #salesboxes p {
    text-align:justify;
    }
    
    .salestoolsbox1 {
    border: solid 1px #3eacdf;
    float:left;
    width:202px;
    padding:10px 10px 10px 10px;
    margin:0;
    }
    
    .salestoolsbox2 {
    border: solid 1px #3eacdf;
    float:right;
    width:202px;
    padding:10px 10px 10px 10px;
    margin:0;
    }
    
    #salesboxes img {
    text-align:center;
    margin:10px 0 10px 0;
    }
    
    
    #currentWorkImages {
    float:right;
    width:375px;
    border: solid 1px #3eacdf;
    padding:10px 10px 10px 10px;
    }
    
    #currentWorkImages h1 {
    margin:0;
    padding:0;
    }
    
    #currentWorkImages h1 a {
    font:14px Arial, Helvetica, sans-serif;
    color:#3eacdf;
    font-weight:bold;
    text-decoration:none;
    }
    
    #currentWorkImages h1 a:hover {
    font:14px Arial, Helvetica, sans-serif;
    color:#95d6f4;
    font-weight:bold;
    text-decoration:none;
    }
    
    .preview {
      position: absolute;
      display: none;
    }
    
    #imageHolder {
    margin:10px 0 0 0;
    padding:0;
    }
    
    #imageHolder img {
    margin:0 0 5px 0;
    padding:0;
    text-align:center;
    }
    
    
    /* Content */
    
    
    #pageContent {
    width:550px;
    text-align:justify;
    float:left;
    margin:0;
    padding:0;
    }
    
    #pageContent p {
    margin:0px 0 10px 0;
    }
    
    
    
    #testimonials {
    margin: 0px 0 0 20px;
    text-align:justify;
    width:290px;
    float:left;
    }
    
    #testimonials p {
    margin:10px 0 0 0;
    }
    
    .testimonialsText {
    color:#666666;
    font:12px Arial, Helvetica, sans-serif;
    
    }
    
    .testimonialsSubHeading {
    font:12px Arial, Helvetica, sans-serif;
    color:#3E84A1;
    font-weight:bold;
    }
    
    form {
    }
    
    form td {
    color:#3eacdf;
    font: 12px Arial, Helvetica, sans-serif;
    font-weight:bold;
    padding:5px 5px 5px 0px;
    }
    
    
    /*----footer------*/
    
    
    #footer {
    width:863px;
    background:#95d6f4;
    float:left;
    margin:0;
    padding:0;
    }
    
    #footer p {
    font:12px Arial, Helvetica, sans-serif;
    color:#FFFFFF;
    }
    
    #address {
    width:300px;
    float:left;
    margin:5px 0 5px 5px;
    font-weight:bold;
    }
    
    #contactDetails {
    float:right;
    width:300px;
    text-align:right;
    margin:5px 5px 5px 0px;
    font-weight:bold;
    }
    
    #contactDetails a {
    color:#ffffff;
    text-decoration:none;
    }
    
    #contactDetails a:hover {
    color:#ffffff;
    text-decoration:underline;
    }
    
    
    
    
    
    
    /* Bottom Footer Links and Tools */
    
    
    
    
    
    #tools {
    clear: both;
    float:left;
    width:863px;
    margin:5px 0 5px 0;
    padding:0;
    }
    
    * html #tools{float:none;}
    
    #furtherLinks {
    width:360px;
    margin:0 0 0 0px;
    padding:0;
    float:left;
    }
    
    #furtherLinks p {
    font:12px Arial, Helvetica, sans-serif;
    color:#999999;
    }
    
    #furtherLinks a {
    color:#999999;
    text-decoration:none;
    }
    
    #furtherLinks a:hover {
    color:#999999;
    text-decoration:underline;
    }
    
    #xhtmldec {
    float:right;
    width:300px;
    margin:0 0 0 0px;
    padding:0;
    text-align:right;
    }
    
    #xhtml img {
    margin:0;
    padding:0;
    }
    
    
    /*adminstration tools*/
    
    table.indexTable {
    	width: 100%;
    }
    table.indexTable th {
    	text-align: left;
    }
    table.indexTable th a {
    	text-decoration: none;
    }
    table.editForm {
    	
    }
    .indexTable td {
    	border-bottom: 1px solid #eee;
    	padding: 4px 6px;
    }
    .narrow {
    	width: 5%;
    	text-align: center;
    }
    
    
    
    /*Popup Work*/
    
    #pb1 {
    position:absolute; 
    right:400px; 
    top:250px; 
    z-index:1;
    width:400px;
    height:450px;
    border: solid 3px #3eacdf;
    background-color:#FFFFFF;
    padding:10px 10px 10px 10px;
    visibility:hidden;
    
    
    }
    
    #pb1 h1 {
    text-align:center;
    margin:0 0 10px 0;
    
    }
    
    
    
    #pb1 p {
    margin: 10px 0 0 0;
    }
    
    
    .close{
    width:50%;
    float:left;
    }
    
    .view{
    width:50%;
    float:right;
    text-align:right;
    }
    Code:
    if (typeof window.onload == 'function') {bpOldOnLoad = window.onload;}
    window.onload = function()
    {
      if (window.bpOldOnLoad) {bpOldOnLoad();}
      var i = 1, b = xGetElementById('b' + i);
      while (b) {
        b.onmousemove = bpOnMousemove;
        b.onmouseout = bpOnMouseout;
        b = xGetElementById('b' + (++i));
      }
    }
    function bpOnMousemove(e)
    {
      var p, h, x, y, offset = 50; // offset = distance between mouse and right edge of preview
      p = xGetElementById('p' + this.id);
      if (p) {
        p.style.display = 'block';
        e = new xEvent(e);
        x = e.pageX;
        y = e.pageY;
        x -= xWidth(p) + offset; // puts preview left of banner
        h = xHeight(p);
        if (y + h > xScrollTop() + xClientHeight()) {
          y -= h;
        }
        xMoveTo(p, x, y);
      }
    }
    function bpOnMouseout()
    {
      var p = xGetElementById('p' + this.id);
      if (p) p.style.display = 'none';
    }

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Martin,

    Nice work!

    Each of the banners need id='b1', id='b2', etc, so that they correspond with the previews, which have id='pb1', id='pb2', etc.

    Also, change this:

    <body onload="function();">

    to this:

    <body>

    I notice you've given me a nice credit. Thank you very much!

  10. #10
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ok i see however i've done that to no luck any other ideas what the error could be i've tried a few things to no success.

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the css, remove "visibility:hidden" from #pb1 and add "display:none".

  12. #12
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks that seems to off resolved the problem. I'll post the full results for your amusment later in the week.


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
  •