I want these 12 x 12 pixels gif icons to re-size on hover/click in the table below without blurring.
Test: http://flamencopeko.net/icons_2.php
A plan to have a 12 x 12 cells grid as background.
Try this:
http://flamencopeko.net/ico/star.gif
More information here: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
Thanks yo. Very promising. Here’s my latest test with grid and proof of alpha: http://flamencopeko.net/icons_5.php
You’ll need to increase the width and height attributes to 675, I just used 300 as an example.
Of course. Works like a charm! Thanks so much! Four css rules! That’s a lot. I must read up on that wild stuff. So yeah, thanks for link too. Success: http://flamencopeko.net/icons_6.php
Next step is to make all them tiny icons appear in that table on hover / click. Got some ideas on that as well?
Got some ideas on that as well?
Yup. ;D
Create a JavaScript function and a Style and put them just before the tag:
.BigPicture{ image-rendering:-moz-crisp-edges; image-rendering -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor; width: 675px; height: 675px; }On each of your small images add the call to the function, for example:
Add an the id “BigPicture” to the table cell where the big picture is to be displayed:
You might want to lose either onclick or onMouseover and just have one of them, onclick might be better.
Should do the trick. 
Big thanks! I’m wowed. Very well explained.
I’ll loose the hover action. Wasn’t really going to use that. Total agree.
I’ll check this out now. Feels quite comfortable. Let’s see… css rules only once. Good. Short inline JS in head. Good.
The tiny icons table will be rendered by php, but that’s for laters. And stuff like the repeated
I’m not overly fond of having to repeat the gif file name for the onclick, but I don’t have an alternative up no sleeve right now. I see where this is going. And I love it.
Totally cool of you to go along with my (mis)use of tables. Skilled teaching sir.
I need the tiny icons to on hover have hand pointer and yellow background. Like my links. Could use , but that scrolls the page up to top. How would you go about that one? I’m quite open to move more formatting to css.
Also a play function for all the icons would be cool.
And their names should probably show in some way.
For instance with title=“you_tube”.
alt=“you_tube” don’t show as “tool-tip” in most browser.
You can do that without a link.
Add these to the styles:
.SmallPicture{
cursor: hand;
cursor: pointer;
}
.tight:hover{
background-color: #FF0;
}
Then just add the class to all your small images:
By the way, you can put all these styles in your existing style sheet: flame_style.css, rather than have them separate in the header.
You can have both title and alt tags so you’ll get the tooltip in most browsers.
I'm not overly fond of having to repeat the gif file name for the onclick, but I don't have an alternative up no sleeve right now. I see where this is going. And I love it.
You can do that, like this:
Then modify the JavaScript like this, you can add title and alt tags to that too using the image name:
You could save yourself a lot of work if you got PHP to do all this for you now, for example:
[php]
Alternatively, if you have just the images you want in the directory “ico” and nothing else, you could do this:
[php]
$intCount = 0;
if ($handle = opendir(“ico”)) {
while (false !== ($strImage = readdir($handle))) {
if ($strImage != “.” && $strImage != “…”) {
$intCount +=1;
$strImage = str_ireplace(".gif", “”, $strImage);
echo ‘
if (($intCount) % 36 == 0) { // each 36th line
echo ‘’ . “\n” . ‘
}
}
}
}
[/php]
This will find all the files in “ico” and loop through them.
Oh my gawd! That’s like everything I ever wanted! You even put together a complete working demo! This is so freakin’ cool. Super thanks.
I went straight for the full php solution / revolution. I renamed the tight class to icons.
Would be nice to have php display the number of files. I write that manually as of now.
How are the icons sorted now? I wish for alphabetically.
.zip file was moved to root, so only .gif files in ico folder now.
It’s live now: http://flamencopeko.net/icons.php
Thanks to you here: http://flamencopeko.net/news/
Yes the order is random, to get the files sorted by name try this:
[php]<?php
$arrFiles = scandir(“ico”, 0);
for ($intCount = 0; $intCount < count($arrFiles); $intCount++) {
$strImage = str_ireplace(".gif", “”, $arrFiles[$intCount]);
if ($strImage != “.” && $strImage != “…”) {
echo ‘
if (($intCount) % 36 == 0) { // each 36th line
echo ‘’ . “\n” . ‘
}
}
}
echo $intCount;
?>[/php]
Thanks again. Will try that after lunch. 
I noticed that this returns . and …, to get rid of those, try this:
[php]<?php
$arrFiles = array_diff(scandir(“ico”, 0), array(".", “…”));
$arrFiles = array_values($arrFiles);
for ($intCount = 0; $intCount < count($arrFiles); $intCount++) {
$strImage = str_ireplace(".gif", “”, $arrFiles[$intCount]);
echo ‘
if (($intCount+1) % 36 == 0) { // each 36th line
echo ‘’ . “\n” . ‘
}
}
?>[/php]
Works. Super to have them ordered.
I did echo $intCount-2; to get the right number.
Added .gif to onclick=“bigImage(’’ . $strImage . ‘.gif’)” Was missing in the new code.
Removed two icons I didn’t want included.
Changed to
There’s an issue with the first row having a last empty kinda collapsed cell.
New test: http://flamencopeko.net/icons_2.php
The very last cell is also logically empty and kinda collapsed. Any way to add or something like that?
What code are you using?
[php]
<?php $arrFiles = scandir("ico", 0); for ($intCount = 0; $intCount < count($arrFiles); $intCount++) { $strImage = str_ireplace(".gif", "", $arrFiles[$intCount]); if ($strImage != "." && $strImage != "..") { echo '[/php]
Didn’t notice your Reply #15 until now. Is that only to get rid of the two extra counts, or would it perhaps also fix the faulty cell?