The CSS
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.4;
opacity: 0.5;
-khtml-opacity: 0.4;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
Add the class "linkopacity" to the <a>
<a href="#" class="linkopacity"><img src="images/photo.jpg"></a>
Tag Archive for image
Link/Image opacity until hover
Image-less Dropshadow
#north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}
#east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}
#south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}
#west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}
.ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}
#east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}
.o1 {opacity: .5;filter: alpha(opacity=50);}
.o2 {opacity: .4;filter: alpha(opacity=40);}
.o3 {opacity: .3;filter: alpha(opacity=30);}
.o4 {opacity: .20;filter: alpha(opacity=20);}
.o5 {opacity: .10;filter: alpha(opacity=10);}
/* For connecing the shadow in 2 corners */
.mv1 {margin-top: 0px;padding-bottom: 7px;}
.mv2 {margin-top: 1px;padding-bottom: 5px;}
.mv3 {margin-top: 2px;padding-bottom: 3px;}
.mv4 {margin-top: 3px;padding-bottom: 1px;}
.mv5 {margin-top: 4px;padding-bottom: 0px;}
.m1 {margin-left: 1px;padding-right: 8px;}
.m2 {margin-left: 2px;padding-right: 6px;}
.m3 {margin-left: 3px;padding-right: 4px;}
.m4 {margin-left: 4px;padding-right: 2px;}
.m5 {margin-left: 5px;padding-right: 0px;}
/*
ds = dropshadow
ch = child
pa = parent
o = opacity
m = margin
mv = margin vertical
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="#" />
<meta name="Description" content="#" />
<meta name="Copyright" content="#" />
<meta name="Robots" content="#" />
<meta name="Generator" content="#" />
<meta name="Keywords" content="#" />
<link rel="stylesheet" href="shadows.css" type="text/css" media="screen"/>
</head>
<body>
<div id="north">
<div class="ds_ch o1 m1">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o5 m5">
</div>
</div>
<div id="east">
<div class="ds_ch o5 mv5">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o1 mv1">
</div>
</div>
<div id="south">
<div class="ds_ch o5 m5">
</div>
<div class="ds_ch o4 m4">
</div>
<div class="ds_ch o3 m3">
</div>
<div class="ds_ch o2 m2">
</div>
<div class="ds_ch o1 m1">
</div>
</div>
<div id="west">
<div class="ds_ch o1 mv1">
</div>
<div class="ds_ch o2 mv2">
</div>
<div class="ds_ch o3 mv3">
</div>
<div class="ds_ch o4 mv4">
</div>
<div class="ds_ch o5 mv5">
</div>
</div>
</body>
</html>
jQuery dynamic image resizer function
/**
* scaleImage 0.1
*
* Rendez vos sites glissant !
*
* Copyright (c) 2008 Benoit G (http://www.tim-burton.net) based upon
* Licensed under the Creative Commons License:
* <a href="http://creativecommons.org/licenses/by/3.0/" >http://creativecommons.org/licenses/by/3.0/</a>
*
* Date: 2008-08-25
*/
(function($){
$.fn.scaleImage = function(options) {
var defaults = {
maxwidth: 200,
linkclass:'',
icon:true,
thickbox:true
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var width = obj.width();
var height = obj.height();
if (width > options.maxwidth) {
//Set variables for manipulation
var ratio = (height / width );
var new_width = options.maxwidth;
var new_height = (new_width * ratio);
var classes = options.linkclass+' scaleImage';
//thickbox
if (options.thickbox == true) {
var img_full_link = obj.attr('src');
obj.wrap('<a class="thickbox" title="'+obj.attr('alt')+'" href="'+img_full_link+'"></a>');
tb_init(obj.parent('a'));
}
//Shrink the image and add link to full-sized image
obj.height(new_height).width(new_width);
obj.addClass(classes);
//zoom icon
if (options.icon == true) {
obj.after('<div class="thumb-zoom"> </div>');
obj.hover(function(){
$(this).next('.thumb-zoom').addClass("hover");
},function(){
$(this).next('.thumb-zoom').removeClass("hover");
});
}
}
});
};
})(jQuery);
PHP Create Thumbnail Images
<?php
function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth )
{
// open the directory
$dir = opendir( $pathToImages );
// loop through it, looking for any/all JPG files:
while (false !== ($fname = readdir( $dir ))) {
// parse path for the extension
$info = pathinfo($pathToImages . $fname);
// continue only if this is a JPEG image
if ( strtolower($info['extension']) == 'jpg' )
{
echo "Creating thumbnail for {$fname} <br />";
// load image and get image size
$img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
$width = imagesx( $img );
$height = imagesy( $img );
// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = floor( $height * ( $thumbWidth / $width ) );
// create a new temporary image
$tmp_img = imagecreatetruecolor( $new_width, $new_height );
// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );
// save thumbnail into a file
imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
}
}
// close the directory
closedir( $dir );
}
// call createThumb function and pass to it as parameters the path
// to the directory that contains images, the path to the directory
// in which thumbnails will be placed and the thumbnail's width.
// We are assuming that the path will be a relative path working
// both in the filesystem, and through the web for links
createThumbs("upload/","upload/thumbs/",100);
?>
CSS Cambiar el tamaño de las Miniaturas usando la propiedad Css Overflow
/* single thumbnail */
p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
/* mouse over */
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}
/* // mouse over */
/* // single thumbnail */
<p class="thumb"><a href="http://xyberneticos.com/"><img src="image.jpg" /></a></p>
Get the width and height of an image using a function in PHP
<?php
list($width, $height, $type, $attr) = getimagesize("image_name.jpg");
echo "Image width " .$width;
echo "<BR>";
echo "Image height " .$height;
echo "<BR>";
echo "Image type " .$type;
echo "<BR>";
echo "Attribute " .$attr;
?>
ImageUpload
<?php
/**************************************
seesaw associates | <a href="http://seesaw.net" >http://seesaw.net</a>
client:
file:
description:
Copyright (C) 2008 Matt Kenefick(.com)
**************************************/
class mk_imageUpload{
var $max_size;
var $allowed_types;
var $thumb_height;
var $dest_dir;
var $extensions;
var $max_height;
var $max_main_height;
var $last_ext;
var $last_pid;
var $last_uid;
var $image_file;
var $image_field;
function __construct( $maxHeightMain, $maxHeightThumb, $destDir ){
$this->max_size = (1024/2)*1000; // 750kb
$this->allowed_types = array( 'jpeg', 'jpg', 'pjpeg', 'gif', 'png' );
$this->extensions = array(
'image/jpeg' => '.jpg',
'image/gif' => '.gif',
'image/png' => '.png',
'image/x-png' => '.png',
'image/pjpeg' => '.jpg'
);
$this->dest_dir = $destDir;
$this->max_height = $maxHeightThumb;
$this->max_main_height = $maxHeightMain;
}
function putImage( $formname, $newName ){
$this->image_field = $formname;
if( $this->getImage() ){
// Check for errors
if ( !$this->checkType() )
return $this->throwError(2);
if ( !$this->checkFileSize() )
return $this->throwError(1);
// Get Image
$img = $this->image_file;
// Check seize
if ( !$this->checkImageSize() )
return $this->throwError(3);
// Get image dimensinos
$size = $this->getImageSize();
$size['width'] = $size[0];
$size['height'] = $size[1];
$ratio = $this->max_height/$size['height'];
$maxheight = $this->max_height;
$maxwidth = $size['width'] * $ratio;
// Create Thumbnail
$s_t = $this->resizeImage( $size, $img, $maxwidth, $maxheight,$newName,'s' );
if( $size['height'] > $this->max_main_height ){
$ratio = $this->max_main_height/$size['height'];
$maxheight = $this->max_main_height;
$maxwidth = $size['width'] * $ratio;
}else{
$maxheight = $size['height'];
$maxwidth = $size['width'];
}
// Create Large rescaled
$s_l = $this->resizeImage( $size, $img, $maxwidth, $maxheight,$newName,'l' );
// remove temporary file
unlink($img['tmp_name']);
if( $s_t && $s_l ){
$nm = split('_',$newName);
$this->last_ext = $this->extensions[$size['mime']];
$this->last_pid = $nm[0];
$this->last_uid = $nm[1];
return 'ok';
}else{
return $this->throwError( 4 );
}
}else{
return $this->throwError( 2 );
}
}
function resizeImage($size,$img,$maxwidth,$maxheight,$newName,$ext){
// Create a thumbnail
if($size['mime'] == "image/pjpeg" || $size['mime'] == "image/jpeg"){
$new_img = imagecreatefromjpeg($img['tmp_name']);
}elseif($size['mime'] == "image/x-png" || $size['mime'] == "image/png"){
$new_img = imagecreatefrompng($img['tmp_name']);
}elseif($size['mime'] == "image/gif"){
$new_img = imagecreatefromgif($img['tmp_name']);
}
if (function_exists('imagecreatetruecolor')){
$resized_img = imagecreatetruecolor($maxwidth,$maxheight);
}else{
return("Error: Please make sure your server has GD library ver 2+");
}
imagecopyresized($resized_img, $new_img, 0, 0, 0, 0, $maxwidth, $maxheight, $size['width'], $size['height']);
if($size['mime'] == "image/pjpeg" || $size['mime'] == "image/jpeg"){
$success = ImageJpeg ($resized_img,$this->dest_dir.$newName.'_'.$ext.$this->extensions[$size['mime']]);
}elseif($size['mime'] == "image/x-png" || $size['mime'] == "image/png"){
$success = ImagePNG ($resized_img,$this->dest_dir.$newName.'_'.$ext.$this->extensions[$size['mime']]);
}elseif($size['mime'] == "image/gif"){
$success = ImageGIF ($resized_img,$this->dest_dir.$newName.'_'.$ext.$this->extensions[$size['mime']]);
}
// Remove temporary images
ImageDestroy ($resized_img);
ImageDestroy ($new_img);
return $success;
}
function getImage(){
if( isset($_FILES[$this->image_field]) && is_uploaded_file($_FILES[$this->image_field]['tmp_name']) ){
$this->image_file = $_FILES[$this->image_field];
return true;
}
return false;
}
function returnImg(){
return $this->image_file;
}
function getImageSize(){
$img = $this->returnImg();
return getimagesize($img['tmp_name']);
}
function checkImageSize(){
$size = $this->getImageSize();
if( $size[1] < $this->max_height )
return false;
return true;
}
function checkFileSize(){
$img = $this->returnImg();
if( $img['size'] > $this->max_size )
return false;
return true;
}
function checkType(){
$img = $this->returnImg();
$type = split('/',$img['type']);
if( !in_array( $type[1], $this->allowed_types ) )
return false;
return true;
}
function throwError($val){
switch($val){
case 1: return 'Error: File size is too large';
break;
case 2: return 'Error: Improper file format';
break;
case 3: return 'Error: Your image is too small';
break;
case 4: return 'Error: There was an error creating the images';
break;
}
}
}
?>
Background image in LaTeX
# Add this code before egin{document}
usepackage{eso-pic}
ewcommandBackgroundPic{
put(0,0){
parbox[b][paperheight]{paperwidth}{%
vfill
centering
includegraphics[width=paperwidth,height=paperheight,
keepaspectratio]{background.png}%
vfill
}}}
# and this immediately after egin{document} :
AddToShipoutPicture{BackgroundPic}
How to Resize an Image Using PHP – Image Resizing Script
<?php // This is the temporary file created by PHP $uploadedfile = $_FILES['uploadfile']['tmp_name']; // Create an Image from it so we can do the resize $src = imagecreatefromjpeg($uploadedfile); // Capture the original size of the uploaded image list($width,$height)=getimagesize($uploadedfile); // For our purposes, I have resized the image to be // 600 pixels wide, and maintain the original aspect // ratio. This prevents the image from being "stretched" // or "squashed". If you prefer some max width other than // 600, simply change the $newwidth variable $newwidth=600; $newheight=($height/$width)*600; $tmp=imagecreatetruecolor($newwidth,$newheight); // this line actually does the image resizing, copying from the original // image into the $tmp image imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height); // now write the resized image to disk. I have assumed that you want the // resized, uploaded image file to reside in the ./images subdirectory. $filename = "images/". $_FILES['uploadfile']['name']; imagejpeg($tmp,$filename,100); imagedestroy($src); imagedestroy($tmp); // NOTE: PHP will clean up the temp file it created when the request // has completed. ?>
ASP.Net Page to Return an Image from an SQL Blob Query
protected void Page_Load(object sender, EventArgs e)
{
string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["ProductCatalogueConnectionString"].ConnectionString;
SqlConnection conn = new SqlConnection(connStr);
string blobId = Request.QueryString["ID"];
if (!string.IsNullOrEmpty(blobId))
{
string cmdText = "select A.blob from Core.Attachment A where A.AttachmentID = '" + blobId + "'";
conn.Open();
SqlCommand cmd = new SqlCommand(cmdText, conn);
SqlDataReader reader = cmd.ExecuteReader(CommandBehavior.CloseConnection);
if (reader.Read())
{
byte[] imgBytes = (byte[])reader["blob"];
Response.ContentType = "image/jpeg";
Response.BinaryWrite(imgBytes);
}
}
}