Как при помощи JavaScript, желательно при помощи jQuery, нарезать картинку на более мелкие.

Имеется в блоке одна картинка: <div><img src="tram.png" alt="" /></div>. 
Когда нажимаем на какую-то кнопку получалось так: <div><img src="1.png" alt="" /><img src="2.png" alt="" /></div>.
Где 1.png и 2.png - составляют одно целое как одна картинка (tram.png).

Название картинок не принципиально.

Задайте этот вопрос сначала в вёрстке (т.к. вопрос по стилям), потом, если будут вопросы - JS.
кратко - стили overflow:hidden d div и отрицательные margin в рисунке.

Другой (попроще) способ решения - через рисунок в фоне, там тоже стили в составном св-ве background.

Как по стилям?Есть Одна картинка скажем вот:
====
Ее мы разбиваем например на две картинки.
== и ==
Это мы делаем не в ручную, а должно быть скриптом. Так как таких маленьких картинок может получиться около 500. Я видел скрипты puzzle, которые разбивают фоновые картинки, что мне не подходит.

Если такое сделать нельзя, придется в ручную резать 500 картинок(.

Для примера если у тебя есть картинка 500x500px и ты ее хочешь разделить на четыре по 250px
делаешь примерно так:




У тебя все равно будет одна картинка, но будет выглядеть как будто их 4.
тебе просто нужно это действие с помощью JS автоматизировать цыклом.

Если такой вариант не устраивает скажи конкретную задачу, будет легче.

На самом деле, скрипт JS никаких картинок не разбивает и вообще он ни при чём, всё делает HTML. Он загружает 500 исходных картинок (это так же легко, как одну) и отображает фрагменты их через CSS. Дело за JS лишь на 2-м этапе - если не хочется писать 500 фрагментов HTML, можно генерировать в JS. Но это вторая часть вопроса, первая - вёрстка. Поэтому тему отправил сюда. Будет "рыба" на HTML и вопросы по JS - пожалуйста, в раздел JS.

Как я понял у топикстартера нету 500 картинок а есть одна которую он хочет разделить на 500 (и явно не фотошопом).
Вопрос не к JS'у но как видно и не к CSS'у.

Если разбивать картинки на фоновые, это не так уж и правильно. Мне нужно будет просчитывать уйму деталей. Потому что часто изменяются размеры этих изображений. При чем не просто площадь, а сама картинка увеличивается.


Так что же мне делать?

Если это нужно делать именно скриптом, то нужно делать серверным скриптом, а не клиентским. По соображениям безопасности клиенский js не имеет варианта кроссбраузерного доступа к записи файлов на клиентской машине, кроме кукисов (исключения в виде FF и отдельные случаи с IE мы рассматривать не будем).

Правда, у меня возникает БОЛЬШОЙ вопрос, действительно ли там вообще нужно хоть что-то "резать"? Есть подозрение, что если одна картинка должна "делиться" на 500, эту задача можно решать много проще, через css-позиционирование фона блочных элементов и без каких-либо скриптов. Только саму задачу нам рассказать не хотят.

Задача:
Имеется картинка. Большая.. Разбита на меленькие картинки. Все это помещено в блок (назовем это областью просмотра). Когда происходит клик на определенную ссылку, мы из области просмотра берем центр, состоящий, например, из четырех картинок (2 строки 2 столбца). Эти четыре картинки увеличиваются до размеров области просмотра. Тем самым как бы происходит увеличение.


Трудно ли его написать? Чтобы делило на прямоугольники с заданными размерами?

Очень нужна помощь.

Вариант без нарезки и (почти) без скриптов: посмотреть можно здесь, html ниже. Это только общая концепция, если есть желание использовать - допиливай сам.



 

Здесь мы можем увеличивать только в один раз. Как нам увеличивать например в три раза? Поверх еще один блок? Нет.. Нужно еще привязывать маркеры.. Но за идею и реализацию спасибо.

Может конечно не в тему

http://www.asp.net/AJAX/AjaxControlToolkit.../Seadragon.aspx
Посмотри может это подойдет

Можно еще в сторону Silverlight покопать. Кстати на Silverlight много сайтов с использованием DeepZoom (HardRock Cafe к примеру).