Jump to content
  • 0

Нужен скрипт чтобы наложить Gif на Jpeg


Rebux
 Share

Question

Recommended Posts

  • 0
В общем нужен такой скрипт чтобы можно было размещать анимацию на другой картинке(используя е? как фон)

А что вам мешает использовать фоновое изображение как ""бекграунд" и просто размещать картинку GIF. При чем тут Javascript?

Можно конечно и так:

<img src ="http://champion-tv.ru/forum/uploads/av-17.gif" style="background: url(http://www.ann-p.ru/still_1.jpg)" alt="" border="0" />

Но лучше так:

<div style="background: url(http://i.i.ua/prikol/thumb/5/2/98025.jpg); width:450px; height:426px; padding-top:70px; padding-left:90px"><img src ="http://champion-tv.ru/forum/uploads/av-17.gif" alt="" border="0" /></div>

Link to comment
Share on other sites

  • 0

В первом варрианте, меня пока терзают смутные сомнения.

Размер бекграунда, равен размеру самой картинки. Случай если бекграунд и основное изображение имеют разные размеры. Как этим управлять ХЗ...;)

Во втором варрианте все карты в руки для манипуляции с размерами и позиционированием картинки.:)

Link to comment
Share on other sites

  • 0
Как обычно.

Ну а как обычно? Неужели слабо одну малюсенькую строчку написать?

Обычно размер бекграунда у меня получился 450x426, размер картинки 100x100 вот я обычно и устанабливаю блок размером 450x426 и в нем картинка, которую я позицианирую как мне угодно.

А куда мне вот эти 450x426 писать в теге img, с учетом что сама картинка GIF 100x100?

Link to comment
Share on other sites

  • 0

Вы издеваетесь что ли?

Писал я уже и margin и padding и border и что это дает? Картинка 100x100 какой бы бекграунд я не вставлял он тоже 100x100 не больше не меньше. Ну по крайней мере в IE никаких результатов padding не дает. Ну отступ появляется, ну и все...;)

Link to comment
Share on other sites

  • 0
http://absolvo.ru/tmp/6/

Наглядный пример.

Супер заработало!!!;)

Все что нужно было, это доктайп прописать. Я то чайник пробовал в IE без всяких доктайпов, просто одной строкой HTML контента

<img src="http://champion-tv.ru/forum/uploads/av-17.gif" border="0" style="padding:50px;background:url(http://www.ann-p.ru/still_1.jpg);" />

Дык вот без доктайпа в IE это работать не будет...:)

Link to comment
Share on other sites

  • 0

Извините не раскрыл суть проблемы.В общем мне нужна не просто 1 Gif а постоянно меняемая из набора.

Вот скрипт рандомную гифку

<script language = "JavaScript">
<!--
function goRand() {
var num = 8;
myImages = new Array();
myImages[0] = "Сat (1).gif";
myImages[1] = "Сat (2).gif";
myImages[2] = "Сat (3).gif";
myImages[3] = "Сat (4).gif";
myImages[4] = "Сat (5).gif";
myImages[5] = "Сat (6).gif";
rand = Math.floor(Math.random() * num);
current_image = myImages [rand];
}
//-->
</script>
<body>
<script>
goRand();
document.write("<img src=""+current_image+"">");
</script>

Теперь вопрос как наложить эту рандомную гифку на картинку(Jpg.)?

Ещ? раз извиняюсь что допустил неточность при составлении вопроса

P.S.

GZNbS5iARF.jpg

Вот интересующий меня кусочек.Скелет это гифка.Телек из дерева это Джепег.Помимо наложения нужно подогнать гифку ровно в окно телевизора(размеры окна телевизора и любой гифки 100x100 пикселей)

Link to comment
Share on other sites

  • 0
<script language = "JavaScript">
<!--
function goRand() {
var num = 8;
myImages = new Array();
myImages[0] = "Сat (1).gif";
myImages[1] = "Сat (2).gif";
myImages[2] = "Сat (3).gif";
myImages[3] = "Сat (4).gif";
myImages[4] = "Сat (5).gif";
myImages[5] = "Сat (6).gif";
rand = Math.floor(Math.random() * num);
current_image = myImages [rand];
}
//-->
</script>
<body>
<script>
goRand();
document.write("<img src=""+current_image+"">");
</script>

Что за дикость?

<script type="text/javascript">
<!--
function goRand() {
var num = 8;
myImages = new Array();
myImages[0] = "Сat (1).gif";
myImages[1] = "Сat (2).gif";
myImages[2] = "Сat (3).gif";
myImages[3] = "Сat (4).gif";
myImages[4] = "Сat (5).gif";
myImages[5] = "Сat (6).gif";
rand = Math.floor(Math.random() * num);
return myImages[rand];
}
//-->
</script>
<body>
<script>
document.write("<img src=""+goRand()+"" style="background: url(Адрес изображения JPG)" alt="" border="0" />");
</script>

Link to comment
Share on other sites

  • 0

Никак не могу сделать так чтобы работало.

Помогите пожалуйста если бы я мог сделать это сам то не просил бы.

Вот код

<script type="text/javascript">
<!--
function goRand() {
var num = 6;
myImages = new Array();
myImages[0] = "Сat (1).gif";
myImages[1] = "Сat (2).gif";
myImages[2] = "Сat (3).gif";
myImages[3] = "Сat (4).gif";
myImages[4] = "Сat (5).gif";
myImages[5] = "Сat (6).gif";
rand = Math.floor(Math.random() * num);
return myImages[rand];
}
//-->
</script>
<body>
<script>
document.write("<img src=""+goRand()+"" style="background-image: url('images/TV.Gif')" alt="" border="0" />");
</script>

И что нужно написать в стилях CSS?

Напишите подробнее по возможности.

Link to comment
Share on other sites

  • 0

Скрипт полносью рабочий но:

GIF-ка перекрывает фоновое изображение

GIF-ка с разрешением 100х100 пикселей

Фон с разрешением 210х210 пикселей

Результатом является GIF-ка без фонового изображения ВОКРУГ не?.

Пут?м нехитрых вычеслений получаем,что мне нужен код с отступом на фоне с 110 пикселями.

Подскажите что нужно сделать?

Link to comment
Share on other sites

  • 0

Нет у GIF не прозрачная основа

Я первоначально ставил вопрос что JPG(Картинка) больше GIF(Которую надо наложить на картинку)

Ладно если нельзя этим кодом то подскажите другой.

Ещ? офтопный вопрос как привязать одну картинку к другой?Но есть 1 аспект картинка к которой надо привязать другую картинку является "подвалом" сайта.

Link to comment
Share on other sites

  • 0
Нет у GIF не прозрачная основа

Если у GIF не прозрачная основа, как вы вообще ее собрались накладывать? Попробуйте для начала сделать это в фотошопе, что неполучилось? А у скрипта думаете получится?

А вот я думаю что получится, если этот скрипт написан на C++ или Делфи и является каким нить плагином к фотошопу.

Вы хотите что бы мы написали этот плагин на жаваскрипте?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy