Help for mouseover event

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
ftooley
Forum Newbie
Posts: 2
Joined: Sun Dec 11, 2011 4:57 am

Help for mouseover event

Post by ftooley »

I am working with a plugin that runs in php, images are pulled from a server, these images have to be small to preserve space within the plugin, so I thought a mouseover event would be perfect to temporarily increase the size for greater detail. However it was successful but trying to get it to go back to original size has proven difficult! I have tried many things including adding a onmouseout event all have ended in failure!

Original

Code: Select all

echo '<td><img src="'.$o['LocalImage'].'" width="30"></td>' ;
Enlarge

Code: Select all

echo '<td><img src="'.$o['LocalImage'].'" width="30", onmouseover= width="75"></td>' ;
But need a way to get small again ( onmouseout function didn't work when I tried to add it)

***Found solution, had unnecessary commas in code, making the onmouseover and onmouseout cancel each other out

Thanks for any help
Last edited by ftooley on Sun Dec 11, 2011 11:45 am, edited 1 time in total.
User avatar
twinedev
Forum Regular
Posts: 984
Joined: Tue Sep 28, 2010 11:41 am
Location: Columbus, Ohio

Re: Help for mouseover event

Post by twinedev »

First, you may want to move this post to a location more relevant on the forums, as this so far has nothing to do with PHP Code.

Second, just changing the dimensions of an image is the wrong way to make thumbnails as then you are depending on teh way the browser resizes it, which on some pictures can be nasty looking and then also the fact that no matter what size you display an image as, the end user will still have to download the full image size. So say you have 10 thumbnails, and they are all 150k files. That is 1.5megs the user has to download, when a decent sized thumbnail could be 1/10th the file size.

If you are going to stick with just changing the image size, you will probably have better luck doing CSS :

Code: Select all

<img src="file.jpg" alt="Descriptive Alt Value for Accessibility" width="30" onmouseover="this.style.width=75px;" onmouseout="this.style.width=30px;" />
You'd have to double check the above, i'm just giving it off the top of my head and I don't do it often enough to say it is 100% correct.

-Greg
ftooley
Forum Newbie
Posts: 2
Joined: Sun Dec 11, 2011 4:57 am

Re: Help for mouseover event

Post by ftooley »

twinedev wrote:First, you may want to move this post to a location more relevant on the forums, as this so far has nothing to do with PHP Code.
Well I beg to differ because the plugin I am working is 95% php, of course I know there is some client side as well
twinedev wrote: Second, just changing the dimensions of an image is the wrong way to make thumbnails as then you are depending on teh way the browser resizes it, which on some pictures can be nasty looking and then also the fact that no matter what size you display an image as, the end user will still have to download the full image size. So say you have 10 thumbnails, and they are all 150k files. That is 1.5megs the user has to download, when a decent sized thumbnail could be 1/10th the file size.
Again this is a plugin that pull images off the server, so there is no source files to store or any images for any one to download
twinedev wrote: If you are going to stick with just changing the image size, you will probably have better luck doing CSS :

Code: Select all

<img src="file.jpg" alt="Descriptive Alt Value for Accessibility" width="30" onmouseover="this.style.width=75px;" onmouseout="this.style.width=30px;" />
You'd have to double check the above, i'm just giving it off the top of my head and I don't do it often enough to say it is 100% correct.

-Greg
I appreciate the code and the effort to help, however I did find a solution earlier I will post the code if anyone else ever comes across this problem.

Code: Select all

echo '<td><img src="'.$o['LocalImage'].'" width="30" onmouseover= width="75" onmouseout= width="30"></td>';
User avatar
twinedev
Forum Regular
Posts: 984
Joined: Tue Sep 28, 2010 11:41 am
Location: Columbus, Ohio

Re: Help for mouseover event

Post by twinedev »

ftooley wrote:
twinedev wrote:First, you may want to move this post to a location more relevant on the forums, as this so far has nothing to do with PHP Code.
Well I beg to differ because the plugin I am working is 95% php, of course I know there is some client side as well
Well beg all you want, the fact is what you asked about and even the solution you have has no PHP Code, which is the section of the forum you posted it in, except to echo out the HTML is question, which is why I suggested for more help to post it in a different section, like the section for javascript or UI.

I mean did you also post this on forums for people who build computers since this plugin will run on a computer?

just teasin. ;-)

-Greg
Last edited by twinedev on Mon Dec 12, 2011 2:31 pm, edited 1 time in total.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Help for mouseover event

Post by pickle »

This post is about how to do something on the client-side with Javascript. However, the question is about how to properly output said HTML & Javascript from PHP. It's a grey area, but I think this is the best forum for it.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply