Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > увеличение картинки выведеной рандомом


Автор: sannyk 13.2.2010, 11:38

M
12345c		Оформите сообщение в читаемом виде - код в тегах [ code ] из списка "Код", кнопка "Редактировать".

всем привет) вот существует скрипт для вывода картинок из папки рандомом. ниже еще один скрипт для увеличения картинки пи наведении на нее мышкой. задача состоит в том что - после токо как первый скрипт вывел картинку ее нужно както записать в память то ли контейнер, я непойму чтобы можна было с ней работать другому скрипту. подскажите как это сделать.


скрипт для вывода картинок из папки рандомом
Код


SCRIPT language="javascript">
<!-- Image Selector
function RandomImageLong(images,iparams)
{
/* si: start index 
** i: current index
** ei: end index
** cc: current count
*/
 si = 0; 
 ci=0;
 cc=0;
 imageSet = new Array();
 ei = images.length;
  for (i=1;i<ei;i++) {
    if (images.charAt(i) == ' ' || images.charAt(i) == ',') {
      imageSet[cc] = images.substring(si,i);
      cc++;
      si=i+1;
      }
    }
  ind = Math.floor(Math.random() *cc);
  document.write("<img "+iparams+" src="+imageSet[ind]+" alt=\""+imageSet[ind]+"\">");
}

function RandomImage(images)
{
  RandomImageLong(images," ");
}

function RandomImageLinkLongTarget(images,urls,iparams,hparams)
{
/* si: start index 
** i: current index
** ei: end index
** cc: current count
*/
 imageSet = new Array();
 urlSet = new Array();
 si = 0; 
 ci=0;
 cc=0;
 ei = images.length;
  for (i=1;i<ei;i++) {
    if (images.charAt(i) == ' ' || images.charAt(i) == ',') {
      imageSet[cc] = images.substring(si,i);
      cc++;
      si=i+1;
      }
    }
  ind = Math.floor(Math.random() *cc);
 si = 0; 
 ci=0;
 cc=0;
 ei = urls.length;
  for (i=1;i<ei && cc <=ind ;i++) {
    if (urls.charAt(i) == ' ' || urls.charAt(i) == ',') {
      urlSet[cc] = urls.substring(si,i);
      cc++;
      si=i+1;
      }
    }

  //document.write("<img "+iparams+" src="+imageSet[ind]+" alt=\""+imageSet[ind]+"\">");
  document.write("<a "+hparams+" href=\""+urlSet[ind]+"\"><img "+iparams+" src="+imageSet[ind]+" alt=\""+imageSet[ind]+"\"></a>");
}

function RandomImageLinkLong(images,urls,iparams)
{
  RandomImageLinkLongTarget(images,urls,iparams,"");
}

function RandomImageLink(images,urls)
{
  RandomImageLinkLongTarget(images,urls,"border=0","");
}

// End Script -->
</SCRIPT>

-----------------------------------------------------------------------------------
а вот скрипт который должен брать рандомную картинку и увеличивать.
Код



<script language="JavaScript"> 
ssr=400; 
ssd=200; 
function uvelihenie(Position) 
 { 
  if (ssr > Position) 
   { 
     step=20; 
     Position=Position+step; 
   } 
  else 
   { 
    return; 
   } 
  uv1.width=Position; 
  setTimeout('uvelihenie('+Position+')',1); 
 } 


function umen(Position) 
 { 
  if (ssd < Position) 
   { 
     step=20; 
     Position=Position-step; 
   } 
  else 
   { 
    return; 
   } 
  uv1.width=Position; 
  setTimeout('umen('+Position+')',1); 
 } 

</script>


----------------------------------------------------------------------
для вывода рандома первого скрипта использую

Код



<script>
<!---
RandomImageLong("tpl-1.jpg tpl-2.jpg tpl-3.jpg ","width=200 height=300");
// --->
</SCRIPT>


после етого она както должна быть записана в память... 
--------------------------------------------------------------------------------
а вот тут должна использоваться этая записаная картина.(это вывод второго скрипта)
Код

<IMG ID="uv1" SRC= "tpl-?.jpg" WIDTH="150" onmouseover="uvelihenie(150)" onmouseout="umen(300)">

помогите пожалуйстаааааааааааааааааа!!!!!!!!!!!!!!!

Автор: Sardar 14.2.2010, 02:23
Лучше так не писать.

Для примера требуется jQuery (http://jquery.com)
Код

<html>
<head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">

//возвращает функцию, дающую каждый раз случайную картинку из imgs
function rand_images(imgs) {
    var imgs = typeof(imgs) == 'object'? imgs: imgs.split(/\s*,\s*/);
    return function() {
        return imgs[Math.round(Math.random() * (imgs.length - 1))];
    }
}

//как только документ загружен
$(document).ready(function() {
    //imgs() -- случайная картинка
    var imgs = rand_images("a.jpg, b.jpg, c.jpg");
    //покажем картинку и определим mouseenter/mouseleave события
    $('#cvs').attr('src', imgs()).css('visibility', 'visible').hover(function() {
        //навели мышкой, увеличить в полтора раза (или пропиши конкретные размеры)
        $(this).animate({
            width: '+=50%',
            height: '+=50%',
        }, 'fast', null);
    }, function() {
        //вернуть размеры
        $(this).animate({
            width: '-=50%',
            height: '-=50%',
        }, 'fast', null);
    });
});

    </script>
</head>
<body>
    <h1>Random image</h1>
    <!-- скроем пока не определимся что показываем -->
    <p><img id="cvs" src="" style="visibility: hidden" /></p>
</body>
</html>


Далее, если нужна картинка, глянь в $('#cvs').attr('src'); или запомни выбор в любой переменной. А вообще стоит немного подучить JS.

Автор: sannyk 14.2.2010, 10:54
так получаеться чтоб тот скрипт что ты написал заработал, нада подключать jQuery js файл???

Автор: bars80080 14.2.2010, 13:25
Цитата(sannyk @  14.2.2010,  09:54 Найти цитируемый пост)
так получаеться чтоб тот скрипт что ты написал заработал, нада подключать jQuery js файл??? 

угу. от 100 до огого кБ кода. на то она и библиотека

Автор: sannyk 15.2.2010, 20:59
а каким образом его подключать? нада скрипт писать?

Автор: bars80080 16.2.2010, 00:29
Код

<script type="text/javascript" src="jquery.js"></script>
</head>

вот это вставляешь в шапке своей страницы. при этом jquery.js - это библиотека, которая находится у тебя на сервере по указанному в src адресу


вон там у Sardar, кстати, вставлена jquery.min.js . видимо, какая-то минимальная обрезка

Автор: 12345c 16.2.2010, 01:17
Библиотеку берут здесь: http://docs.jquery.com/Downloading_jQuery

или http://docs.jquery.com/Downloading_jQuery

Автор: sannyk 16.2.2010, 12:00
я загрузил скрипт Sardarа и подключил файл js картинки тоже кинул в папку с соответствующими именами но они серавно не выводяться на екран((( в чем проблема?? может в том скрипте нада что то дописать?? Может я недопонял его слова -----Далее, если нужна картинка, глянь в $('#cvs').attr('src'); или запомни выбор в любой переменной. что он имелл ввиду? я просто плохо знаю жаву а сдать эту прогу мне нада через пару дней)) обясните мне необразованому как тут быть?

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)