Ask Owen » coding http://askowen.info Your friendly neighbourhood geek Wed, 16 May 2012 21:58:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 How do I use onMouseOver in Javascript? http://askowen.info/2008/07/how-do-i-use-onmouseover-in-javascript/ http://askowen.info/2008/07/how-do-i-use-onmouseover-in-javascript/#comments Mon, 28 Jul 2008 15:00:33 +0000 Owen http://askowen.info/?p=232 I want an image on my website to change when I hover my mouse over it. How do I do this?


I got this question from a friend who like to dabble with HTML but isn’t too much f an expert. He saw this effect on a button on a travel insurance website was trying to produce something similar. Well, you cannot implement this with plain HTML, but need to delve into Javascript and use a function called onMouseOver. This function is triggered when the mouse runs over a certain element on your page. It also has a corresponding sister function called onMouseOut which is called when you move your mouse away from the element in question. It’s important to use both functions otherwise your image won’t revert back to the original when the mouse moves away.

So, here’s the code that lets you do this:
<html>
<head>
<script type="text/javascript">
function mouseOver() {
document.b1.src ="image2.jpg";
}
function mouseOut() {
document.b1.src ="image1.jpg";
}
</script>
</head>
<body>
<a href="http://askowen.info" target="_blank" onmouseover="mouseOver()" onmouseout="mouseOut()">
<img border="0" alt="Ask Owen" src="image1.jpg" name="b1" /></a>
</body>
</html>

And here’s what it looks like:

I haven’t actually linked the image to anything, but you get the idea ;)

]]> http://askowen.info/2008/07/how-do-i-use-onmouseover-in-javascript/feed/ 1 How can I upload an automatically resize an image on my website? http://askowen.info/2008/06/how-can-i-upload-an-automatically-resize-an-image-on-my-website/ http://askowen.info/2008/06/how-can-i-upload-an-automatically-resize-an-image-on-my-website/#comments Tue, 10 Jun 2008 13:59:18 +0000 Owen http://askowen.info/?p=186 I often need to upload images to my website, but I’d like them to be automatically resized when they’re uploaded. How can I do this??


I got this question from from a colleague of mine who was answering some questions for a client. His client’s requirements were a bit more complex than just this question, but I thought this would be a good one to put up on AskOwen and use it as a tutorial for some interesting PHP techniques. Here’s some PHP code that will accomplish the request:


<?php
// Image uploaded and resizer
// from http://AskOwen.info
?>
<html>
<head>
<title>Image Uploader and Resizer</title>
</head>
<body>
<?php
if (array_key_exists('btn', $_POST)) {
$uploadedfile = $_FILES['uploadfile']['tmp_name'];
$src = imagecreatefromjpeg($uploadedfile);
list($width,$height)=getimagesize($uploadedfile);
$newwidth=600;
$newheight=($height/$width)*600;
$tmp=imagecreatetruecolor($newwidth,$newheight);
imagecopyresampled($tmp,$src,0,0,0,0,$newwidth,$newheight,$width,$height);
$filename = "images/". $_FILES['uploadfile']['name'];
imagejpeg($tmp,$filename,100);
imagedestroy($src);
imagedestroy($tmp);
}
?>
<form action="upload.php" method="post" enctype="multipart/form-data" >
<input type="file" name="uploadfile"/>
<input id="btn" name="btn" type="submit"/>
</body>

Here’s a quick run through the algorithm:

  1. Pick up the file that has been uploaded by the form
  2. Get the images width and height
  3. Calculate the correct height to maintain the aspect ratio of the image
  4. Create a memory space for the new image
  5. Use imagecopyresampled, a PHP function that resizes the image for you, to generate the new image
  6. Write the file to disk
  7. Clean up memory space

It’s quite straight forward once you know that PHP has the graphical functions you need to accomplish this.  It’s worth nothing that there’s another PHP function that can resize an image for you also, called imagecopyresized, however this function only uses 255 colours to generate the target image and so doesn’t maintain the fidelity of the image so well. This may be fine if you have some line art you’re converting, but if you wanted to resize that beautiful photo you took last time you went on holiday and stayed at one of the Hilton Head rentals you hear so much about, well, you really want as clear an image as possible.

As I said above, this is just the bare bones of an image resizing script, but it illustrates some of the graphical functions that PHP has available (through the GD library) that can help you produce some really useful scripts.

]]> http://askowen.info/2008/06/how-can-i-upload-an-automatically-resize-an-image-on-my-website/feed/ 0 Learning ASP.Net http://askowen.info/2007/10/learning-aspnet/ http://askowen.info/2007/10/learning-aspnet/#comments Wed, 31 Oct 2007 10:11:11 +0000 Owen http://askowen.info/?p=29 I’d love to learn how to code in ASP.Net. Where’s a good place to learn?


There are many ways you can learn how to code, but it’s usually easier for people who have programming in the past. ASP.Net is an interesting language in that there are a number of tools available in the language to help accelerate your development, however, there’s also a pretty steep learning curve compared to simpler third-generation languages.

If you’re so inclined, there a number of books you can use to help you can started. Here are some you can get from Amazon:

Another option is to watch videos that walk you through the basics. There are a number of these available online, but there’s a pretty comprehensive collection down at the official ASP.net website. The videos are divided into three sections:

  • Videos for ASP.NET 2.0 Beginners
  • “How Do I?” with ASP.NET
  • Videos on Migrating to ASP.NET

That should be plenty to get you started. Remember, the main thing with code is that the more you practice, the more you learn and the better you get. So don’t be afraid to try out new things and see how far you can get. If you get stuck, there are plenty of forums you can ask for help.

]]> http://askowen.info/2007/10/learning-aspnet/feed/ 2