Image enlarges on mouseover but uses PHP script in all image tags
- How to Get Around Needing Write Permissions When Saving Images on Server
- Make image into string to put in mysql to solve no write permissions problem
- Read image immediately into mysql to solve no write permissions problem
- Image enlarges on mouseover but uses PHP script in all image tags
- Building a picture from scratch and displaying it on a web page but with no write permissions
Building a picture from scratch and displaying it on a web page but with no write permissions
This page is a tutorial on "Image enlarges on mouseover but uses PHP script in all image tags". Our overall method is to use MySQL and PHP. All over the Internet, the discussions of using PHP to upload image files to the server seem to have a common thread. "You have to have write permissions." This is sort of true and sort of not true. All of our experiments were done with CHMOD 750 on our public_html folder and CHMOD 755 on our test subfolder. Server warnings were all we got from trying to CHMOD from either a script or from our FTP program. So we had to live without write permissions (sigh . . . ). But we still got the job done 3 different ways!
This page uses the image-on-web-page.php, make-pic.php, and show-pic.php scripts as its framework but special DHTML tricks for displaying images on a web page.
For those of you with write permissions, How to Get Around Needing Write Permissions When Saving Images on Server contains listings of the 2 files that will let you upload and manipulate images.
The following method is a perfect workaround for needing write permissions that you simply do not have and cannot get. To be clear, you do NOT need write permissions to store pictures in MySQL and use our scripts to display them. You DO need write permissions to use PHP file uploading methods if you aim to stick images into online folders. Many experts say this creates an unacceptable vulnerability and simply too much risk. The alternatives to this CHMOD 777 free-for-all where strangers are permitted to stick image files on your server are:
- Use any of the links at the top of this page and get scripts that "upload" image data into MySQL without write permissions.
- Manually stick image files into a folder on your server via any FTP program.
- Abandon using all that precious server memory on images—whether in a db or file folder—and store only the URLs to the images. We suggest Picassa or Photobucket as a photo storing app. Both will give you URLs that begin with http or https and end with .jpg, if you look, although most of their data includes links around the URLs which you do not need—but if you leave them, make sure that target="_blank" is placed in all links. The URLs are what you store in a MySQL database, along with image data like name, size, username, caption, date, etc. There are other photo storing apps:
- flickr
- fotki
- care2connect
- webshots
- dotphoto
- sendphotos
- smugmug
- MyPhotoAlbum
- KodakEasyShareGallery
- Pbase (not free)
- Photoshop Express
- EchoPic
- JAlbum
- imageShack
- Pixa
- FreeImageHosting
- iimmgg.com
- tinypic
- imgur
- ipernity.com
- photoSwarm
- mejuba.com
- photodekho.com
- youphotoshare.com
- ovi.com
- monille.com
- theeasyview.com
The rest of this page assumes you wish to use our store-image-data-in-db scripts, and that you like the idea of images enlarging when your cursor is on them. We made a photo gallery app which you can demo here: photo gallery demo that uses this idea.
As trivial an HTML page as the following can display your MySQL-stored image in the browser (a width parameter of 100 will turn a large image into a thumbnail, while leaving out parameters will let the image display at its original size):
<html>
<head>
</head>
<body>
<img src="image-show.php?p1=4" alt="image">
</body>
</html>
But you want the cool enlargement dynamic, so the "Image enlarges on mouseover but uses PHP script in all image tags" script is below, and it is composed of 1 part. Of course, to actually use the script on a web page, you need to use a URL query string so the receiving script will know which image to get—unless there is only one, of course.
So let us check out the script for enlarging: First, after a bit of CSS we run a browser sniffer. Modern Firefox browsers probably don't require this, but Netscape and probably other Netscape-like browsers still do. The body tag runs the onLoad event which runs the JavaScript startmouse() function. What this aspect of the script is trying to do is read the mouse cursor coordinates. The reason onMouseOver would not work is that even though it would be fine for the enlarged image displaying feature, it would stink at knowing when to let the larger image disappear. See Browser Bug? to see where they went wrong. How seriously weak is it that the browser cannot tell when it is no longer over the smaller image if the bigger image is "in the way"?! But a cursor reader script has NO such problem and is much more responsive and effective and versatile. So that is what we used.
Note that browsers capture the onMouseMove event in more than one way. Netscape and older Firefoxes take a priming of the pumps to get started, but IE needs no coaxing. Once we get to the getCoords() function, the browsers again use different methods to get the cursor position. Once the positions of these coordinates are known, they are compared with the screen position of the image. This same coordinate reading script is in our photo-gallery.html script, but you can see how it needs tweaking to deal with multiple photos on a page. On the script below, there is but one image to enlarge.
Once the script determines the cursor is over the photo, it runs the move(450) function, and once the cursor is outside those coordinates, it runs the move(-750) function, with move()—as you can see—doing nothing but dynamically altering the left CSS property. So the photo div that is the enlarged version is simply moving offscreen and onscreen by shifting right or left. Just to make our onMouseOver event point, we used it to make the enlargement appear, but strenuously avoided using the onMouseOut event for disappearing the enlargement, since it would have failed embarrassingly. We could just as easily have avoided onMouseOver and let cursor reading run both image enlargement and image shrinking. Call us lazy. Note that JavaScript in particular and browsers in general do not mind if one stores offscreen divs for display when the time is ripe.
In this particular script, we use show-pic.php as the source attribute in an image tag. SRC is normally where a jpg, png, bmp, or gif goes, of course. But HTML doesn't mind if we use a PHP script instead. In practice there would be a query string that would inform the PHP script which image we want, but show-pic.php was not built for that, although the scripts in Read image immediately into mysql to solve no write permissions problem are built for that.
The script is called: image-on-a-web-page.php
<html>
<head>
<style type="text/css">
BODY {background-color:#88f;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
var x = 0;
var y = 0;
var Netscape=(navigator.appName.indexOf("Netscape") != -1);
function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);} document.onmousemove=getCoords;}
function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){x = e.pageX;y = e.pageY;}
else if (e.clientX){
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop;}
if(k==1&&(x>(xx+ww)||x<xx||y>(yy+hh)||y<yy))
{k=0;move(-750);}
}
var k = 0;
var yy = 80;
var xx = 450;
var ww = 100;
var hh = 138;
function move(l){e=document.getElementById('o');e.style.left=l;}
//-->
</script>
</head>
<body onload="startmouse()">
<table style="position:absolute;top:80px;left:450px" align="left" border="1" width="100px" height="138px" cellspacing=0 cellpadding=0>
<tr>
<td width="100" height="138"><img src="show-pic.php" alt="Hillary" width="100px" height="138px" BORDER=0 onMouseOver="javascript:if(k==0){move(450);k=1;}return true"></td>
</tr>
</table>
<div id="o" style="position:absolute; left:-750px; top:80px; width:350px; height:484px; border:3px groove #888;"><IMG SRC="show-pic.php" WIDTH=350 HEIGHT=484 BORDER=0></div>
</body>
</html>