SitePoint Sponsor

User Tag List

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

    image rollover/click targetting

    ok, I know that the title didnt quite make much sense. But this is what I am trying to do::

    on my website I have a column of pictures to the left hand side (thumbnails) and I am interested in them being either clicked or being a rollover. The rollover of this image or clicking onto the image should go into the center column. I just can't seem to figure out how to accomplish this.

    here is my code as it stands::
    default.php::
    <?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:
    <?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>';

    ?>



    Im looking at trying to get the leftcontent.php images to be shown full size in the div="page". As it is, the image just goes to full size on a new page (I do not want my users to have to use the back button or have a popup) I would like to have them see the thumbnail from the left side of the page to a full size image in the center of the page with everything left the same on the page.

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    You're frying bacon with a pot right now. This sort of thing is meant for javascript, not PHP (unless PHP outputs the javascript). Do a forums search for image rollover in the javascript forum, and you'll find a good amount of code there on how to achieve that effect.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    philmont
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I realize that Ive got several different things happening. the php code is meant to draw my images out from my database and calculate them to a smaller size to fit a page- I had 4 per page due to size within 2 columns- I was told that this was the easiest way to get the images to do what I wanted to do directly from the database (the only thing I left out was the pagination that was being used)

    I put the post in the html forum as I wasn't really thinking of what code would be in use until after I did so. I did an entire forum search for image rollover and most of what Ive come across is for the direct rollover of an image (mouse goes over an image to show another in its place) rather than rolling an image over to show it in another location on the page.


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
  •