Содержание раздела

Здравствуйте! Занимаюсь разработкой сайта одной аптечной сети. Точнее, создаю интернет магазин. Перечень препаратов очень большой и приходится показывать их в табличном виде. Но проблема, разумеется, не в этом. Беда в том, что человеку, который просматривает таблицу лекарств, бывает необходимо быстро посмотреть как выгладит конкретное лекарство, какого цвета и размера тюбик или конкретный флакон.

Сейчас режим "Посмотреть фото" сделан в виде ссылки, которая открывает в новом окне картинку. Но это достаточно медленно и не вполне удобно. Хотелось бы работать в этом же окне, а ссылку "Подробнее" реализовать как режим перехода на страницу детального описания препарата в разрабатываемом Интернет магазине. Можете ли дать содержательный совет как лучше поступить в моем случае?

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

В этом случае можно поступить следующим образом:

1. При формировании и последующем показе общего списка продукции рядом с наименованиями позиций, у которых имеется соответствующая иллюстрация, размещаем маленькую иконку (например, ярлык "фотоаппарат").

2. Данному ярлычку мы назначаем обработчики события OnMouseOver и OnMouseOut, которые вызывают функцию показа и скрытия картинки соответственно. Однако, показ вплывающей картинки должен происходить в непосредственной близости от самого ярлычка, на который только что наехал курсор мыши. Поэтому при вызове функций ярлык должен передать числовой код препарата и ссылку на самого себя this, которая позволит иллюстрации появиться около именно этого объекта:

<img src="foto.gif" onmouseover="showFoto(this,107);" onmouseout="hideFoto(this);">

3. Показ картинки будет происходить в блоке div с абсолютным позиционированием. Например, пускай этот блок называется dv_foto и первоначально размещается на первом слое (ближе к нашим глазам, чем основной документ) вне области показа графических объектов (в отрицательной зоне координат) и будет невидимым.

<div name="dv_foto" id="dv_foto" style="position:absolute; top:-100; left: -100; z-index:1; visibility: hidden;"></div>

4. Тогда функция показа фотографии примет вид:

function showFoto(obj,id_img){
    document.getElementById("dv_foto").innerHTML="<img src='showfoto.php?id_img="+id_img+"' border='0' />";
    document.getElementById("dv_foto").style.left=objXY(obj)[0]+10;
    document.getElementById("dv_foto").style.top=objXY(obj)[1]+obj.offsetHeight-5;
    document.getElementById("dv_foto").style.visibility="visible";
};

5. Функция скрытия изображения будет значительно проще:

function hideFoto(obj){
    document.getElementById("dv_foto").style.visibility="hidden";
};

6. Осталось лишь отладить функцию точного распознавания координат X и Y ярлычка. Однако наша функция не может просто взять и вернуть координаты из свойств объекта, так как расположение на экране этого объекта зависит не только от его персональных координат, но и от координат родительских элементов (или "контейнеров"), внутри которых он может размещаться. Поэтому организуем цикл путешествия, начиная от нашего ярлычка obj по ссылкам на его родительские элементы, пока они не закончатся: 

function objXY(obj){

   var x=0,y=0;

   do{  x=x+obj.offsetLeft; y=y+obj.offsetTop; }

   while((typeof(obj=obj.offsetParent)!='undefined')&&(obj!=null));

   return [x,y];

};

Все должно работать. Но, разумеется, появление всплывающей картинки не должно приводить к затруднениям навигации по списку медицинских препаратов Интернет магазина. Она должна именно дополнять обычную навигацию по каталогу. Например, будет очень полезно реализовать всплывающую картинку в виде ссылки на режим просмотра подробного описания препарата.