О нашей фирме Наши технологии Web-дизайн Электронные визитки Мультимедиа проекты Наши работы Контактная информация  
На главную страницу      
   
   
Цифровой дизайн
      
Графический дизайн
    
Рекламные технологии
    
Библиотека
    
 
Наш скромный вклад
      
     
Дизайнерский архив
      
   
Ссылки
      
 
Цифровой дизайн
  
Голос красоты звучит тихо
      
 

 

          
   
       
                     
 
..
Навигация внутри страницы

  
далее
    
   
Самые популярные статьи
  
   
с возможностью скачать
  
       
Книги
Учебник Adobe Photoshop. скачать
Энциклопедия создания сайтов. скачать

Веб-дизайн: книга Дмитрия Кирсанова скачать-1 скачать-2

Cамый популярний учебник по Assembler скачать
Объектно-ориентивное программирование Flash скачать
Статьи
Что такое CSS и как применить скачать
Сетевой этикетскачать
ПОЧЕМУ ТЫ ЕЩЕ НИЩИЙ? скачать
     
    назад    
        далее    
 
Картинка в новом окне
...и окно с размерами картинки
   
   

 

 

Контактная информация.

 

У меня была задача: открыть картинку в новом окне .
Казалось бы, ничего проще нет. Но, внесённые шефом нюансы, сделали с задачи настоящую проблему.
Вот эти нюансы:

  1. Размеры нового окна должны быть точно такими же, как и размеры картинки.
  2. В окне не должно быть ни каких отступов (только картинка)
  3. Окно должно иметь свой индивидуальный заголовок (т.е. нормальное русское название, напр. "Пейзаж №123 - Microsoft Internet Explorer")
  4. Окно должно открываться с помощью скрипта на JavaScript (других сервисов не было), притом 1-2 функциями.
  5. Этот скрипт должен работать в браузерах IE5 >, NN5 >, Opera6 >, Mozilla6>
  6. Скрипт не должен загружать отдельных HTML файлов для каждой картинки (только: ссылка > скрипт > окно с рисунком).
  7. Каждый новый рисунок должен открываться в своем новом окне.
По такому запросу поисковая машина Яndex ничего не нашла и я взялся писАть свой скрипт.
ПисАл долго и нудно, и вот что получилось:

<script>
function imgopen(imgf,tit){

rand_id='image'+(Math.round(Math.random()*1000));

outf="<html>"
+"<head>"
+"<title>"+tit+"</title>"
+"<style>body{margin:0px}</style>"
+"</head>"
+"<body leftmargin=0 topmargin=0>"
+"<img src=\""+imgf+"\">";

iopen="iwin=self.open('"+imgf+"', '"+rand_id+"', 'width='+(img1.width)+',height='+(img1.height)+',top=0,left=0');"
+"iwin.document.write('"+outf+"');"
+"iwin.focus();";

img1=new Image();
img1.src=imgf;

if(img1.width!=0) eval(iopen);

else{
iwin = self.open('about:blank', 'f'+rand_id, 'width=100,height=100,top=0,left=0');
iwin.document.write("<html>"
+"<body>Загрузка...<br>"
+"<"+"script>"
+"function imo(img1){"+iopen
+"self.close();"
+"}<"+"/script>"
+"<img src='"+imgf+"' onload='imo(this);'>");
}
}
</script>

<p><i>Пример работы:</i> <a href="javascript:imgopen('i/s91.jpg','Девушка-весна')">Рисунок красивой девушки</a>
function imgopen(imgf,tit){ rand_id='image'+(Math.round(Math.random()*1000)); outf=" " +" " +" "+tit+" " +" " +" " +"<"+"body"+" leftmargin=0 topmargin=0>" +" "; iopen="iwin = self.open('"+imgf+"', '"+rand_id+"', 'width='+(img1.width)+',height='+(img1.height)+',top=0,left=0');" +"iwin.document.write('"+outf+"');" +"iwin.focus();"; img1=new Image(); img1.src=imgf; if(img1.width!=0) eval(iopen); else{ iwin = self.open('about:blank', 'f'+rand_id, 'width=100,height=100,top=0,left=0'); iwin.document.write(" " +"<"+"body"+">Загрузка...
" +"<"+"script>" +"function imo(img1){"+iopen +"self.close();" +"}<"+"/script>" +" "); } }

Этот скрипт, возможно, не самый оптимальный, но он справляется с поставленными задачами. Как оно работает? Переменные:
rand_id — индивидуальный id каждого нового окна.
outf — HTML-код главного (последнего) окна с картинкой и с тайтлом.

Процесс:

  • Питаемся определить размеры рисунка:
    img1=new Image();
    img1.src=imgf;
    Отсюда, img1.height — высота , img1.width — ширина.
  • Если рисунок открывается впервые , то браузер сразу не может определить его размеры, поетому:
    1. Открываем предварительное новое popup-окно iwin , с минимальным размером 100х100 и именем rand_id .
    2. Пишем в него (с помощью iwin.document.write("... ) HTML-код, в котором присутствует внутренняя функция JavaScriptа и, собственно, наш рисунок.
    3. На данном этапе мы пока не знаем размеров рисунка.
    4. При загрузке рисунка происходит событие onload . Воспользовавшись этим — вызываем нашу внутреннюю функцию onload='imo(this);' , которая...
    5. Открывает второе popup-окно (код открытия берем с переменной iopen ), с размерами нашей картинки. Как мы их узнали?
      Передали в функцию параметр this . И теперь в функции, соответственно, высота — img1.height , ширина — img1.width
    6. Той же функцией, загружаем HTML-код outf в это второе окно (с помощью iwin.document.write(outf) )
    7. Даем фокус первому окну.
    8. Закрываем второе.
    9. Готово.
  • Если рисунок уже нами открывался, то нам известны его размеры, поетому сразу выполняем код открытия главного (последнего) окна, функцией eval(iopen) .

Выводы: в принципе, вся прелесть заключается в том, чтобы определить размер картинки, а потом открыть окно такого размера. Плюс, фирменные примочки: вписуем тайтл, убираем отступы.
Если кто-либо изобрел что-то лучше — дайте знать. Создано: 8.09.2004
Автор: Stipuha

 

    
далее
Создание сайтов, цифровых презентаций, электронных визиток, PixelMediaSoft Самара 2005,
     
         
email: pixelmedia@narod.ru        
       
                             

 

Hosted by uCoz
AddWeb.ru - раскрутка сайта, продвижение сайта