Clever Geek Handbook

Building an Image / Grid Solution with CSS and Javascript

I am creating a new website and looking for a solution for this problem (PHP, MySQL, using Zurb Foundation).

I want to create an image that I can zoom in and out, and will consist of 1,000,000 pieces. Each piece should be clickable, and additional information will come when you click on it. The color of each part depends on the information coming from the database. The pieces are like pixels.

So there are three dilemmas:

  • How should I structure my data?
  • How to create an image with a click without images?
  • How can I create a page so that it doesn't load slowly?

Thank! Dana

+3


source to share


1 answer


Thus, you probably want to use a table to hold all of your images:

<table>
  <tr>
    <td>   <a> Each small image </a>   </td>
    <td>   <a> Each small image </a>   </td>
  </tr>
  <tr>
    <td>   <a> Each small image </a>   </td>
    <td>   <a> Each small image </a>   </td>
  </tr>
</table>

Though if you do, you should have small images to increase load times. This should slowly stop loading the page.



Edit: if you're trying to do something like this: http://css-tricks.com/examples/NineImages/ but on a larger scale than trying to create a javascript function that makes the image larger and sets the src image to a variable derived from mySql databases.

Gab

0


source






More articles:


All Articles