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 Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Exclamation Disjointed rollover

    Hi, I was hoping some one could help me with this... I am trying to create a 'team' page for a design agency. The idea is to have a grid 4x3 of profile pics, that start as a silhouette and when rolled over become a photograph, I have worked this out no problem as this is a simple rollover. However I would like text to appear to the right of the grid with a bio of the person the mouse is over.

    I have used this html code...

    <h1>MEET OUR TEAM</h1>


    <script type="text/javascript">
    //<![CDATA[
    function toolTip(txt,top,left) {
    var el=document.getElementById('foo');

    var text=new Array();
    text[0]="<h2>Nick Wood</h2><p>Nick has worked in the design and advertising industry for over 30 years. For many of those years he has been responsible for managing several blue chip accounts as well as developing new business and was often the first point of contact for new clients. His other duties involve project management, production, purchasing, estimating and invoicing. Nick has a wide range of client and business management skills making his experience in this area invaluable</p>";
    text[1]="<h2>Angela Daw</h2><p>Angie has overall responsibility for business communications, finance and marketing. In addition to providing client liaison support to the project teams, Angie ensures that financial targets are met from clients and Creation's perspective. Experienced Finance professional with over 30 years experience. Proven abilities in defining company direction, achieving targets and developing the business.</p>";
    text[2]="<h2>Rob Wilkins</h2> <p>Rob is a highly skilled graphic designer with more than 25 years of experience under his belt. During his career, Rob has been instrumental in providing design for a wide range of companies that have included SWEB, ReMIT, Learn Direct, Freewheel Holidays and Daewoo Heavy Industries. Rob has an extensive knowledge of software applications, the printing process and the design industry. He has held memberships in the International Society of Typographic Designers and the Chartered Society of Designers. </p>";
    text[3]="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus."+
    "Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad"+
    " litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna"+
    " non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a, nunc.";

    el.innerHTML=text[txt];
    el.style.top=top+"px";
    el.style.left=left+"px";
    el.style.display="block";
    document.onmouseout=function() {
    el.style.display="none";
    }
    }
    //]]>

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    </script>

    <table width="373px" height='278px' border="0" cellspacing="0" cellpadding="0">
    <tr>
    <th scope="col" td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="83" height="83" alt="silhouette" /></th>
    <th scope="col" td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="83" height="83" alt="silhouette" /></th>
    <th scope="col" td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="83" height="83" alt="silhouette" /></th>
    <th scope="col" td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="83" height="83" alt="silhouette" /></th>
    </tr>

    <tr>
    <td align="left" valign="top"><ul><li class="links" onmouseover="toolTip(0,50,185)">
    <img src="../1394 event html/images/team/silhouette_man.png" alt="" /></li></ul></td>


    <td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="83" height="83" alt="silhouette" /></td>
    <td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="83" height="83" alt="silhouette" /></td>
    <td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="83" height="83" alt="silhouette" /></td>
    </tr>


    <tr>
    <td align="left" valign="top"><ul><li class="links" onmouseover="toolTip(2,226,185)">
    <img src="../1394 event html/images/team/silhouette_man2.png" alt="" />
    </li></ul></td>

    <td align="left" valign="top"><ul><li class="links" onmouseover="toolTip(3,314,185)">
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image50','','images/team/nick.png',1)"><img src="images/team/silhouette_man.png" width="83" height="83" border="0" id="Image50" /></a>
    </li>
    </ul>


    </td>
    <td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="85" height="85" alt="silhouette" /></td>
    <td align="left" valign="top"><img src="images/team/silhouette_girl.png" width="85" height="85" alt="silhouette" /></td>
    </tr>
    </table>


    <div id="foo"></div>

    </div>[/COLOR]


    and this css...

    #foo {
    position:absolute;
    width:500px;
    height:400px;
    border:none;
    background:none;
    font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
    text-align:left;
    display:none;
    }

    .links {
    list-style:none;
    color:#990000;
    display:block;
    }
    .links img {
    width:82px;
    height:82px;
    }


    The problem I'm having is with positioning the text. I'm sure there's a much easier way of doing this to what I have, i.e not using javascript.. I just really don't know and I've hit a brick wall...

    Any help/advice is greatly appreciated!

  • #2
    New Coder
    Join Date
    Feb 2008
    Posts
    64
    Thanks
    3
    Thanked 6 Times in 6 Posts
    You could have a look at Pure CSS Disjointed Image Rollovers

  • Users who have thanked dome90uk for this post:

    designedbyria (12-14-2010)

  • #3
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts
    That's great almost exactly what I want! Have given it a go with my own images, any way of removing the link text and having the image as the link?

    Don't know if that makes sense, on the demo on the site it's the text 'menu item1' etc controlling the rollover. I want to remove this text and just use images for the initial 'menu' and have text appear when these are hovered over.

    Sorry I'm quite new to this, designing a site that is far more complex than I ever had before...

  • #4
    New Coder
    Join Date
    Dec 2010
    Location
    UK
    Posts
    67
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I've got it to work by editing the code above. Thanks for the link though, will probably come in handy with another project


  •  

    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
    •