SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    philmont
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mixing rollover and php database image calls

    ok, I had posted in the html forum and was told to look in javascript for what it was that I wanted. Yet, I happened to come across paul's disjointed rollover. The question I have is...does anyone know how to incorporate that with my code (php calling images from my database)? Or do I need to look into the php forum for the answer to it?

    The reason why Im looking to incorporate this is that I have many images and am not able to do multiple img src tags- its easier just to call the images from the database and have it limited to 4 images per my page.


    here is the coding::
    the coding can be found here

    or here::


    default.php::

    Code:
    <?php
    
    
    
    include ('menu-head.inc.php');
    
    include ('includes/connect.php');
    
    ?>
    
    
    
    
    
    </head>
    
    <body>
    <div id="outer">
    
    <div id="logo" style="position:absolute; left:15px; top:10px; width:125px; height:75px; z-index:6">
    <img src="<?php echo 'http://' . $_SERVER['HTTP_HOST'] . '/images/draft-tools.jpg';?>" alt="logo"></img>
    </div>
    
    <div id="banner" style="position:absolute; left:150px; top:25px; width:590px; height:75px; z-index:1">
    <center>
    <a href="<?php echo 'http://' . $_SERVER['HTTP_HOST'] ;?>">
    <img src="./images/banner.gif" width="325" height="60" border="0" alt="banner"></img>
    </a>
    </center>
    </div>
    
    <div id="search" style="position:absolute; left:750px; top:25px; width:200px; height:75px; z-index:8">
    
    <?php
    include('searchsite.php');
    ?>
    
    
    </div>
    
    <div id="menu" style="position:absolute; left:150px; top:95px; width:590px; height:60px; z-index:10">
    <?php
    include('menu-body.inc.php');
    ?>
    </div>
    
    <div id="page" style="position:absolute; left:150px; top:165px; width:590px; height:55px; z-index:5">
    <?php
    include('page.inc.php');
    ?>
    </div>
    
    
    <div id="left" style="position:absolute; left:15px; top:165px; width:125px; height:420px; z-index:4">
    <?php
    if($namepage == "Home")
    {
    include_once('leftlinks.php');
    }
    else
    {
    include_once('leftcontent.php');
    }
    
    ?>
    </div>
    
    
    
    <div id="right" style="position:absolute; left:750px; top:165px; width:200px; height:420px; z-index:3">
    <?php
    if($namepage == "Home")
    {
    include_once('updates.php');
    }
    else
    {
    include_once('quotes.php');
    }
    ?>
    </div>
    
    
    <div id="cr" style="position:absolute; left:750px; top:575px; width:200px; height:10px; z-index:7">
    <?php
    echo ' 2004-' . date('Y') . ' domain.com';
    ?>
    </div>
    
    <div id="site" style="position:absolute; left:15px; top:575px; width:100px; height:10px; z-index:9">
    <a href="site">Site Map</a>
    </div>
    
    
    
    </div>
    
    </body>
    </html>


    leftcontent.php
    Code:
    <?php
    
    $picd = "'%image%'";
    include('connect.php');
    
    echo '<table border="0" cellspacing="0" cellpadding="10" align="center">';
    
    // Database Connection
    
    
    // If current page number, use it
    // if not, set one!
    if(!isset($_GET['page'])){
    $page = 1;
    } else {
    $page = $_GET['page'];
    }
    
    // Define the number of results per page
    $max_results = 4;
    
    // Figure out the limit for the query based
    // on the current page number.
    $from = (($page * $max_results) - $max_results);
    
    // Perform MySQL query on only the current page number's results
    $numcols = 1;
    $numcolsprinted = 0;
    
    function imageResize($width, $height, $target) {
    
    if ($width > $height) {
    $percentage = ($target / $width);
    } else {
    $percentage = ($target / $height);
    }
    
    //gets the new value and applies the percentage, then rounds the value
    $width = round($width * $percentage);
    $height = round($height * $percentage);
    
    return "width=\"$width\" height=\"$height\"";
    
    }
    
    $sql = mysql_query("SELECT picurl, picname, pictitle, picdescription FROM portpics WHERE picdescription LIKE $picd LIMIT $from, $max_results");
    while($row = mysql_fetch_array($sql)) {
    
    if ($numcolsprinted == $numcols) {
    
    echo "</tr><tr>";
    
    $numcolsprinted = 0;
    }
    $mysock = getimagesize($row['picurl']);
    echo '<td><font face="tahoma" size="2"><a href="'.$row['picurl'].'" border="0" title="Click to get an enlarged image">
    <img src="'.$row['picurl'].'" '.imageResize($mysock[0], $mysock[1], 75).' border="0"></a>'.$row['pictitle'].'<br></font></td>';
    
    
    $numcolsprinted++;
    }
    
    $colstobalance = $numcols - $numcolsprinted;
    for ($i=1; $i<=$colstobalance; $i++) {
    }
    
    echo '</table>';
    
    ?>



    paul's rollover::
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    span {
    display:none;
    }
    a:hover {
    color: #666666;
    background: #FFFFCC;
    text-decoration: none;
    }
    #imagecontainer {
    position:absolute;
    left:200px;
    top:100px;
    width:155px;
    height:102px;
    border:1px solid #000;
    }
    a:hover span {
    display:block;
    position:absolute;
    left:200px;
    top:100px;
    width:155px;
    height:102px;
    border:1px solid #000;
    text-align:center;
    }

    </style>
    </head>
    <body>
    <p><a href="#"><img src="images/pmoblogoi.jpg" alt="thumbnail image" width="30" height="30" />
    <span><img src="images/pmoblogoi.jpg" alt="thumbnail image" width="155" height="102" /></span></a></p>
    <p><a href="#"><img src="images/pmoblogo8.jpg" alt="thumbnail image etc" width="30" height="30" />
    <span><img src="images/pmoblogo8.jpg" alt="thumbnail image etc" width="155" height="102" /></span></a></p>
    <p><a href="#"><img src="images/pmoblogoc.jpg" alt="Thumnail image" width="30" height="30" />
    <span><img src="images/pmoblogoc.jpg" alt="Thumnail image" width="155" height="102" /></span></a></p>
    <p>&nbsp;</p>

    <div id="imagecontainer"></div>
    </body>
    </html>



    also:: how can I keep the image up until the person rollsover the next image (rather than turning the image blank)?
    Last edited by stymiee; Jul 2, 2006 at 12:49.


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
  •