Как в картинку вставить скрипт программы/видео?

@virgos · Регистрация: 12.06.2014

Author24 — интернет-сервис помощи студентам

Здравствуйте!
Подскажите, пожалуйста, как в картинку вставить скрипт(код) программы или же видео.
к примеру картинка телевизора(монитора) а в середине (за место экрана) работающий скрипт или же видео, c того же youtube.

Ребят очень нужно, кто знает подскажите, прежде чем задать вопрос везде прошарил, но все не то.

Спасибо.

@Micheal · 12.06.2014, 22:46

я бы не вставлял ничего в строчный элемент img.
Как вариант - использовать div, с background: url('here the file path');
Т.е. див с фоновым изображением, а внего вставить и позиционировать видео

@Academik · 12.06.2014, 22:53

virgos, в картинку ничего не вставляется. Это делается путём наложения слоя на картинку.

HTML5

<div class="block">
    <img src="http://www.494911.ru/products_pictures/big/3006820_1.jpg">
    <iframe width="448" height="253" src="//www.youtube.com/embed/BLcDXvS0Ftg" frameborder="0" allowfullscreen></iframe>
</div>

CSS

1
2
3

.block{position: relative;}
.block img{width: 500px;}
.block iframe{position: absolute; top: 101px; left: 26px;}

Пример: http://jsfiddle.net/z3D8A/

Добавлено через 2 минуты

Сообщение от Micheal

я бы не вставлял ничего в строчный элемент img.

А как вставить то?

@virgos · 12.06.2014, 23:24 **[ТС]**

Mr Coder, спасибо, но что-то у меня не получается (точнее все показывается по отдельности)
может что не так делаю..
касаемо кода css - вот у меня сайт на движке wordpress, я установил в css-таблица стилей)

Micheal , вы писали - использовать div, с background: url('here the file path');

я не слишком "силен" в кодах html и прочего, нельзя ли на примере кода показать.

скажите а как быть со скриптами, кто знает ?!

@Micheal · 12.06.2014, 23:50

HTML5

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <style>
            .main
            {
                position: relative;
            }
 
            .bck
            {
                position: absolute;
                top: 0px;
                left: 0px;
                background: url('tv_back.png');
                background-size:cover;
                width: 400px;
                height:300px;
            }
 
            .main iframe
            {
                position: absolute;
                top: 25px;
                left: 30px;                
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="bck"></div>
            <iframe width="340" height="250" src="http://www.youtube.com/embed/XL5tYSQiSpE" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>
</html>

@virgos · 13.06.2014, 09:12 **[ТС]**

Mr Coder, все получилось . +1

Micheal - это простой код для видео с youtube ?!

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

@Micheal · 13.06.2014, 09:31

Сообщение от virgos

это простой код для видео с youtube ?!

, нет у Вас картинка tv_back.png не подгрузилась...

@virgos · 13.06.2014, 09:42 **[ТС]**

Сообщение от Micheal

нет у Вас картинка tv_back.png не подгрузилась...

ааа понятно, а Вы не знаете как поверх картинки разместить код(скрипт) или просто кнопку(активную)

@Micheal · 13.06.2014, 10:12

Сообщение от virgos

поверх картинки разместить код(скрипт) или просто кнопку(активную)

точно так же:

HTML5

<!doctype html>
<html>
    <head>
        <title>Test</title>
        <style>
            .main
            {
                position: relative;
            }
 
            .bck
            {
                position: absolute;
                top: 0px;
                left: 0px;
                background: url('tv_back.png');
                background-size:cover;
                width: 400px;
                height:300px;
            }
 
            .main input
            {
                position: absolute;
                top: 25px;
                left: 30px;                
            }
        </style>
    </head>
    <body>
        <div class="main">
            <div class="bck"></div>
            <input type="button" value="Some button"/>
        </div>
    </body>
</html>

@virgos · 13.06.2014, 12:22 **[ТС]**

Micheal , а куда свой скрипт вставлять,в ваш код, ещё раз извините я "мало грамотный" в httml так знаю не много.
А вот разобраться не получается.(((

@N3stY · 14.06.2014, 23:42

Сообщение от Micheal

Тыкай его сюда, хех.

Скрин:

Как в картинку вставить скрипт программы/видео?

HTML5

<html>
    <head>
        <title>Test</title>
        <style>
            .main
            {
                position: relative;
            }
 
            .bck
            {
                position: absolute;
                top: 0px;
                left: 0px;
                background: url('http://pngimg.com/upload/tv_PNG477.png');
                background-size:cover;
                width: 561px;
                height:406px;
            }
.frame1 {
    padding-top: 16px;
    padding-left: 16px;
    float: left;
    width: 529px;
    height: 296px;
}
 
            .main input
            {
    position: absolute;
    top: 291px;
    left: 471px;
            }
        .buttona {
    float: none;
    margin-top: 20px;
}
       
        </style>
    </head>
<body>
        <div class="main">
            <div class="bck">
              <iframe class="frame1" src="//www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
           
            <input type="button" value="Some button" class="buttona"/></div>
</div>
    </body>
</html>

@virgos 0 / 0 / 0 Регистрация: 12.06.2014 Сообщений: 5
		1
	Как в картинку вставить скрипт программы/видео? 12.06.2014, 21:45. Показов 5695. Ответов 10 Метки нет (Все метки) Здравствуйте! Подскажите, пожалуйста, как в картинку вставить скрипт(код) программы или же видео. к примеру картинка телевизора(монитора) а в середине (за место экрана) работающий скрипт или же видео, c того же youtube. Ребят очень нужно, кто знает подскажите, прежде чем задать вопрос везде прошарил, но все не то. Спасибо. 0

@Micheal 53 / 53 / 28 Регистрация: 23.04.2011 Сообщений: 214
	12.06.2014, 22:46	2
	я бы не вставлял ничего в строчный элемент img. Как вариант - использовать div, с background: url('here the file path'); Т.е. див с фоновым изображением, а внего вставить и позиционировать видео 0

@virgos 0 / 0 / 0 Регистрация: 12.06.2014 Сообщений: 5
	12.06.2014, 23:24 [ТС]	4
	Mr Coder, спасибо, но что-то у меня не получается (точнее все показывается по отдельности) может что не так делаю.. касаемо кода css - вот у меня сайт на движке wordpress, я установил в css-таблица стилей) Micheal , вы писали - использовать div, с background: url('here the file path'); я не слишком "силен" в кодах html и прочего, нельзя ли на примере кода показать. скажите а как быть со скриптами, кто знает ?! 0

@virgos 0 / 0 / 0 Регистрация: 12.06.2014 Сообщений: 5
	13.06.2014, 09:12 [ТС]	6
	Mr Coder, все получилось . +1 Micheal - это простой код для видео с youtube ?! вот как бы теперь чтобы точно так-же с картинкой - вставить скрипт или же кнопку с переходом. (при это не всю картинку сделать активной, а только в нужное место) 0

@Micheal 53 / 53 / 28 Регистрация: 23.04.2011 Сообщений: 214
	13.06.2014, 09:31	7
	Сообщение от virgos это простой код для видео с youtube ?! , нет у Вас картинка tv_back.png не подгрузилась... 0

@virgos 0 / 0 / 0 Регистрация: 12.06.2014 Сообщений: 5
	13.06.2014, 09:42 [ТС]	8
	Сообщение от Micheal нет у Вас картинка tv_back.png не подгрузилась... ааа понятно, а Вы не знаете как поверх картинки разместить код(скрипт) или просто кнопку(активную) 0

@virgos 0 / 0 / 0 Регистрация: 12.06.2014 Сообщений: 5
	13.06.2014, 12:22 [ТС]	10
	Micheal , а куда свой скрипт вставлять,в ваш код, ещё раз извините я "мало грамотный" в httml так знаю не много. А вот разобраться не получается.((( 0

	14.06.2014, 23:42

Опции темы