Quote:
Originally Posted by braca86
what if i get pictures from a mysql database and the code is:
<?php do { ?>
<img src="pictures/<?php echo $row_recordset1['pic']; ?>" alt="" width="160" height="175" align="middle" />
<?php } while ($row_pictures= mysql_fetch_assoc($pictures)); ?>
where to put the code for resizing???? |
Well, first of all, $row_pictures and $row_recordset1 don't match.
So I doubt that you will get any output from $row_recordset1['pic'].
But just for the sake of argument,
let's say you have a table in your database called "pictures".
And in the "pictures" table you have a column called "pic".
And also in the "pictures" table you have a few records that has an image file name in the column "pic".
Then this script would do what you want.
PHP Code:
<html>
<head>
<script type="text/javascript">
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetTop;}
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetLeft;}
return returnValue;
}
function show_large_image(obj)
{
var large_image_obj = document.getElementById("image_holder");
large_image_obj.src = obj.src;
large_image_obj.style.left = getLeftPos(obj)+"px";
large_image_obj.style.top = getTopPos(obj)+"px";
large_image_obj.style.display = "block";
}
function hide_large_image(obj)
{
obj.style.display = "none";
}
</script>
</head>
<body>
<?php
$host = ""; // Enter mysql host address here. //
$user = ""; // Enter mysql user name here. //
$password = ""; // Enter mysql password here. //
$db = ""; // Enter mysql database name here. //
$table = "pictures"; // Enter mysql table name here. //
mysql_connect($host,$user,$password);
mysql_select_db($db);
$sql = "select pic from $table";
$Pictures = mysql_query($sql);
while($row_Pictures = mysql_fetch_assoc($Pictures))
{
echo "<img src='pictures/".$row_Pictures["pic"]."' alt='' width='160' height='175' align='middle' onmouseover='show_large_image(this)' />";
}
?>
<!-- Large image holder. -->
<img id="image_holder" src="" width="320" height="350" style="position:absolute;display:none;" onmouseout="hide_large_image(this)" />
<!-- ------------------- -->
</body>
</html>
And this may be a little cleaner.
If you click on an image, the large image will be displayed.
And when you click on the large image it disappears.
PHP Code:
<html>
<head>
<style>
img{cursor:pointer;}
</style>
<script type="text/javascript">
function getTopPos(inputObj)
{
var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetTop;}
return returnValue;
}
function getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null){returnValue += inputObj.offsetLeft;}
return returnValue;
}
function show_large_image(obj)
{
var large_image_obj = document.getElementById("image_holder");
large_image_obj.src = obj.src;
large_image_obj.style.left = getLeftPos(obj)+"px";
large_image_obj.style.top = getTopPos(obj)+"px";
large_image_obj.style.display = "block";
}
function hide_large_image(obj)
{
obj.style.display = "none";
}
</script>
</head>
<body>
<?php
$host = ""; // Enter mysql host address here. //
$user = ""; // Enter mysql user name here. //
$password = ""; // Enter mysql password here. //
$db = ""; // Enter mysql database name here. //
$table = "pictures"; // Enter mysql table name here. //
mysql_connect($host,$user,$password);
mysql_select_db($db);
$sql = "select pic from $table";
$Pictures = mysql_query($sql);
while($row_Pictures = mysql_fetch_assoc($Pictures))
{
echo "<img src='pictures/".$row_Pictures["pic"]."' alt='' width='160' height='175' align='middle' onclick='show_large_image(this)' />";
}
?>
<!-- Large image holder. -->
<img id="image_holder" src="" width="320" height="350" style="position:absolute;display:none;" onclick="hide_large_image(this)" />
<!-- ------------------- -->
</body>
</html>
Linear Mode
