SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    0 Post(s)
    0 Thread(s)

    merging 2 ideas for 1 version

    I found 2 pieces of code (javascript and CSS) that allows me to do what I want, but will not work together. The javascript creates a popup with an image in the window (whatever size I place for my window size to be, the image will fill it nicely).

    The CSS allows a mouseover effect which would allow me to place documentation about the image.

    What I'm looking for is to be able to create the popup, with a sidebar that lists all of the information regarding the image. Is this possible? How would I go about doing that? My attempts have failed so far.

    CSS mouseOver:
    <style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    /*URL: */
    position: relative;
    z-index: 0;
    background-color: transparent;
    z-index: 50;
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -100px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    .thumbnail:hover span{ /*CSS for enlarged image on hover*/
    visibility: visible;
    top: 0;
    left: 60px; /*position where enlarged image should offset horizontally */
    javascript popup:
    // Script Source:
    // Copyright 2003
    // Do not remove this notice.
    // SETUPS:
    // ===============================
    // Set the horizontal and vertical position for the popup
    PositionX = 75;
    PositionY = 75;
    // Set these value approximately 20 pixels greater than the
    // size of the largest image to be used (needed for Netscape)
    defaultWidth  = 500;
    defaultHeight = 500;
    // Set autoclose true to have the window close automatically
    // Set autoclose false to allow multiple popup windows
    var AutoClose = true;
    // Do not edit below this line...
    // ================================
    if (parseInt(navigator.appVersion.charAt(0))>=4){
    var isNN=(navigator.appName=="Netscape")?1:0;
    var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
    var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
    var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
    function popImage(imageURL,imageTitle){
    if (isNN){'about:blank','',optNN);}
    if (isIE){'about:blank','',optIE);}
    with (imgWin.document){
    writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
    writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);');
    writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
    writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
    if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
    else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
    writeln('<img name="George" src='+imageURL+' style="display:block" width="800px"></body></html>');

    code before the javascript popup:
    PHP Code:
    <div id='text' style='position:absolute; left:17%; top:50px; width:73%; z-index:4'>

    mysql_query"SELECT * FROM var_a WHERE photoid = '$gpic' AND category = '$gcat'" );

    $p_id_row mysql_fetch_array($pics_id)) {
    $p_id       $p_id_row['photoid'];
    $p_name     $p_id_row['photo_name'];
    $p_cats     $p_id_row['category'];
    $filename $p_name;

     <a href="javascript:popImage('<?php echo $images_dir."/".$filename;?>','Some Title')">
    echo "<img src='".$images_dir."/".$p_name."' width='90%' /></a><br />".
    "<br /><a class='thumbnail' href='#thumb'>Photo Details<span>".

    part that has the css rollover
    PHP Code:
                     $pop_cats = mysql_query( "SELECT id, title, text FROM var_category WHERE id = '$gcat'" );
    list($pop_id, $pop_title, $pop_text) = mysql_fetch_array( $pop_cats );

       $pics_id_pop = mysql_query( "SELECT * FROM var_a WHERE photoid = 'gpid' AND category = '$gcat'" );

                while( $p_id_row_pop = mysql_fetch_array($pics_id_pop)) {
       $pop_id       = $p_id_row_pop['photoid'];
       $pop_name     = $p_id_row_pop['photo_name'];
       $pop_cats     = $p_id_row_pop['category'];
       $pop_text     = $p_id_row_pop['commenttext'];
       $pop_building = $p_id_row_pop['building'];
       $pop_designed = $p_id_row_pop['designed'];
       $pop_location = $p_id_row_pop['location'];

    <table width="200" border="1">
        <td><?php echo $pop_building;?></td>
        <td>Designed By:</td>
        <td><?php echo $pop_designed;?></td>
        <td><?php echo $pop_location;?></td>

    <?php echo "<tr><td>".$pop_text"</td></tr></table>";




    they work fine independently, but I havent been able to get them to work together. I would like the table to be inserted as a side bar to the popup image.


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    I think you'll need to provide a link of what you've got so that we have something to work with. There are too many separate issues there to build a local version and we really need the live version to play with and to understand what you want.


Posting Permissions

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