Mouse77e
01-19-2006, 02:48 AM
Combining PHP and CSS: Using CSS to enlarge a photo from my DB
GRRRRrrrr…. I need help
I cant seem to get CSS and PHP to play together. Here are the two bits of code I am trying to marry up but I can’t seem to get it to work smoothly.
The problem is further complicated by my use of CSS to make the site accessible by changing the font size. Using a larger font moves the image location just a little…
Please, anyone into CSS and PHP?
PHP Code
<?php
$filename = "images/mugs/".$familyname."_".$firstname.".jpg";
$filename = strtolower($filename);
if (file_exists($filename)) {
echo "<!-- looking for image: $filename -->\n";
echo "<img src=\"$filename\" width=\"135\" height=\"150\" alt=\"$firstname $familyname's image\">";
} else {
echo "<!-- looking for filename: $filename -->\n";
echo "<img src=\"images/mugs/MugDefault.jpg\" width=\"135\" height=\"150\" alt=\"$firstname $familyname's image\">";
}
?>
CSS Code
(raw code from cssplay.co.uk)
<head>
<style type="text/css">
#menu {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#menu a.p1:hover .large {display:block; position:absolute; top:-60px; left:150px; width:300px; height:300px; border:10px solid #fff;}
#info {z-index:100; height:10em;}
</style>
</head>
<body>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="../img/tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="../img/drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</body>
This nifty bit of CSS is from Stu Nicholls’ wonderful site, and can be seen in action here http://cssplay.co.uk/menu/magnify.html
He describes it as…
“This is an image magnification effect that is similar to the ones produced by javascript.
Just hover your mouse over the thumbnail image to produce a 4x enlarged image. Move your mouse off the thumbnail image to pop-down the enlarged image.The enlarged image is already displayed at 1px x 1px (so small that you do not see it) then enlarges to it's full size 'instantly' on mouse over.”
Many thanks
Mouse
GRRRRrrrr…. I need help
I cant seem to get CSS and PHP to play together. Here are the two bits of code I am trying to marry up but I can’t seem to get it to work smoothly.
The problem is further complicated by my use of CSS to make the site accessible by changing the font size. Using a larger font moves the image location just a little…
Please, anyone into CSS and PHP?
PHP Code
<?php
$filename = "images/mugs/".$familyname."_".$firstname.".jpg";
$filename = strtolower($filename);
if (file_exists($filename)) {
echo "<!-- looking for image: $filename -->\n";
echo "<img src=\"$filename\" width=\"135\" height=\"150\" alt=\"$firstname $familyname's image\">";
} else {
echo "<!-- looking for filename: $filename -->\n";
echo "<img src=\"images/mugs/MugDefault.jpg\" width=\"135\" height=\"150\" alt=\"$firstname $familyname's image\">";
}
?>
CSS Code
(raw code from cssplay.co.uk)
<head>
<style type="text/css">
#menu {position:relative; top:10px; left:100px; width:75px; background-color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:absolute; width:1px; height:1px; border:0px; top:-1px; left:-1px;}
#menu a.p1:hover .large {display:block; position:absolute; top:-60px; left:150px; width:300px; height:300px; border:10px solid #fff;}
#info {z-index:100; height:10em;}
</style>
</head>
<body>
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="../img/tdrips.jpg" title="Thumbnail image" alt="Thumbnail image" /><img class="large" src="../img/drips.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
</body>
This nifty bit of CSS is from Stu Nicholls’ wonderful site, and can be seen in action here http://cssplay.co.uk/menu/magnify.html
He describes it as…
“This is an image magnification effect that is similar to the ones produced by javascript.
Just hover your mouse over the thumbnail image to produce a 4x enlarged image. Move your mouse off the thumbnail image to pop-down the enlarged image.The enlarged image is already displayed at 1px x 1px (so small that you do not see it) then enlarges to it's full size 'instantly' on mouse over.”
Many thanks
Mouse