Форум PHP программистов > Моргает картинка

[ Поиск ] - [ Пользователи ] - [ Календарь ]

program90

7.09.2010 - 00:34

Здравствуйте,
подскажите, пож-та, почему при работе этого скрипта моргает картинка, когда курсор перемещается с ссылки на фон, или с фона на ссылку. Как сделать, чтобы фон не моргал? я склеил по вертикали фон из двух картинок, на одной
глаза горят, а на другой не горят. Чтобы после того как картинка загрузиться полностью, при наведении указателя мыши на ссылку, фон менял положение, но не загружался заново. И тогда бы не было задержки на загрузку, и фон бы не моргал. Но он все равно моргает. Что можно сделать, картинка не моргала?
Заранее спасибо.

<html>

<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню фото</title>
</head>




<body> 

<div id="div1" style='background: url("FotoMenu/GL1.jpg"); height: 600px;'>
<a target="_blank" href="Politra.htm" id="ref1">Ссылка</a> 
<a target="_blank" href="priroda/11" id="ref2">Природа</a>

</div>

</body>
<script type="text/javascript"> 
document.getElementById('ref1').onmouseover=function(){document.getElementById('div1').style.background='url("FotoMenu/GL2.jpg")'} 
document.getElementById('ref1').onmouseout=function(){document.getElementById('div1').style.background='url("FotoMenu/GL1.jpg")'} 
document.getElementById('ref2').onmouseover=function(){document.getElementById('div1').style.background='url("FotoMenu/GL2.jpg")'} 
document.getElementById('ref2').onmouseout=function(){document.getElementById('div1').style.background='url("FotoMenu/GL1.jpg")'} 
</script>

</html>

Спустя 31 минута, 36 секунд (7.09.2010 - 00:05) inpost написал(а):

program90
1. Две картинки, поверх той наложить картинку глаз.
2. Разбить картинку на части, выделить AREA участок наведения, для изменения глаз.
3. Флеш.
4. jQuerry & mootools фреймворки для плавного перехода.
5. js, там сделать плавный но быстрый переход.
6. картинка подгружается чуть после, при условии, тогда и происходит моргание! Загружать картинку ранее, можно загрузить её и спрятать, тогда она будет в буфере и проблем с морганием не будет.

Спустя 15 минут, 11 секунд (7.09.2010 - 00:21) program90 написал(а):

А как загрузить ее в буфер?

Спустя 7 часов, 33 минуты (7.09.2010 - 07:54) Michael написал(а):

Цитата (program90 @ 6.09.2010 - 23:21)

А как загрузить ее в буфер?

При загрузке страницы напиши:

var im1 = new Image();
im1.src = 'img/pic1.gif';
// ...

нужным картинкам и они заранее подгрузятся.

Спустя 4 минуты, 53 секунды (7.09.2010 - 07:58) program90 написал(а):

ясно. А ты не подскажешь где об этом можно подробно прочитать, лучшую статью? Просто мне этот конструктор неизвестен. Толком не знаю что там происходит, когда это используешь.
заранее спасибо

Спустя 4 минуты, 4 секунды (7.09.2010 - 08:03) Michael написал(а):

Так а тут две строчки. Что о них читать? Смысл прост: тебе нужны картинки -> запрашиваешь их яваскриптом в переменную-> браузер их достает. Когда будут обрабатываться действия пользователя браузеру не придется за ними бегать.
Также само можно было их в html тегом <img> в какой нибудь невидимый див запихнуть - тоже подгрузятся.

Спустя 45 минут, 7 секунд (7.09.2010 - 08:48) program90 написал(а):

а вы не подскажите, как сделать так, чтобы при загрузке фона в теге div можно было использовать созданный объект Image?
Т.е. я пишу примерно так:

<head>
....
<script language = "Javasript">
hiddenImg = new Image();
hiddenImg.src = "somelinkfromweb"
</script>
</head>
<body>
<div ....  style='background: url("КАК СЮДА ВСТАВИТЬ HIDDENIMG.SRC ?"); background-position: ... '  .....>
.......
.........
</div>
</body>

Т.е. как сделать чтобы при загрузке уже туда картинка вставилась? Нужно после тега body вставить <script>, где будет обращение к тегу div, и присвоение свойству background: url значения hiddenImg.src ?

Спустя 47 минут, 44 секунды (7.09.2010 - 09:35) Гость_Michael написал(а):

Цитата

background: url("КАК СЮДА ВСТАВИТЬ HIDDENIMG.SRC ?")

- путем к файлу.
Тот код на js определит переменную, которая будет использоваться естественно тоже где то в скрипте js, а не html разметке.
В js манипулируется так:

document.getElementById("elementID").style.backgroundImage = im1.src;

Спустя 22 минуты, 22 секунды (7.09.2010 - 09:58) program90 написал(а):

я написал так. В Mozilla работает. А в Explorer нет. Из-за чего скрипт может не работать в Explorer?

<html>

<head>
<meta http-equiv="Content-Language" content="ru">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Название страницы</title>

<script type="text/javascript">
hiddenImg = new Image();
hiddenImg.src = "http://vsefotki.at.ua/FotoMenu/KartinkaMenu.jpg";
</script>

<style type="text/css">
  body {
    margin: 0px;
  }
</style>

</head>


<body> 

<div id="div1" style='background: url("http://vsefotki.at.ua/FotoMenu/KartinkaMenu.jpg"); background-position: 0px -768px; height: 768px;'>
<a target="_blank" href="Politra.htm" id="ref1">Палитра</a> 
<a target="_blank" href="priroda/11" id="ref2">Природа</a>
</div>

</body>
<script type="text/javascript"> 
document.getElementById('div1').style.background=hiddenImg.src;
document.getElementById('ref1').onmouseover=function(){document.getElementById('div1').style.backgroundPosition='0px 0px'} 
document.getElementById('ref1').onmouseout=function(){document.getElementById('div1').style.backgroundPosition='0px -768px'} 
document.getElementById('ref2').onmouseover=function(){document.getElementById('div1').style.backgroundPosition='0px 0px'} 
document.getElementById('ref2').onmouseout=function(){document.getElementById('div1').style.backgroundPosition='0px -768px'}  
</script>

</html>

From Linker: Есть такое понятие, как bb-коды, научитесь ими уже пользоваться при оформлении своих постов.

Спустя 4 минуты, 12 секунд (7.09.2010 - 10:02) Гость_Michael написал(а):

style.backgroundImage

Спустя 45 минут, 16 секунд (7.09.2010 - 10:47) program90 написал(а):

А в чем разница между background: url и background-image: url ?
Изменил, но в эксплорере заработал только фон. А глаза не загораются, т.е. картинка не меняется при наведении мыши.
И можно ли обращаться к background: url - style.background? Если нет, то как обратиться к этому свойству.
Зарарее спасибо

Спустя 26 минут, 18 секунд (7.09.2010 - 11:14) Michael написал(а):

Я вот накидал, все везде работает:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
div {
  height:300px;
  width:300px;
  background-repeat:no-repeat;
  background-color:#00CC00;
}
</style>
</head>

<body>
<div id="ddd"></div>
<script type="text/javascript">
var im1= new Image();
im1.src = 'img/p1.jpg';
var im2= new Image();
im2.src = 'img/p2.jpg';
var obj = document.getElementById('ddd');
obj.onmouseover = function(){//alert(1);
  obj.style.backgroundImage = 'url(' + im1.src + ')';
}
obj.onmouseout = function(){//alert(2);
  obj.style.backgroundImage = 'url(' + im2.src + ')';
}
</script>
</body>
</html>

Спустя 1 час, 52 минуты, 15 секунд (7.09.2010 - 13:06) inpost написал(а):

Michael
Если вечно делать всё за других, так они никогда не научатся, и смысл данного форума отпадает. Лучше советовать отдельные части, пусть сами дописывают, ато будет тупой копи-паст, как у Попова.

Спустя 59 минут, 23 секунды (7.09.2010 - 14:05) Гость_Michael написал(а):

Цитата (inpost)

так они никогда не научатся

у меня по этому поводу не будет слез ...

Спустя 54 минуты, 36 секунд (7.09.2010 - 15:00) program90 написал(а):

Michael,
Спасибо большое! Ваш ответ оказался полезен!

Спустя 6 дней, 21 час, 37 минут, 44 секунды (14.09.2010 - 12:37) panneer написал(а):

Лампа рабочая. Телевизор включается и нормально показывает в течении минуты после чего пропадает изображение и начинает мигать индикатор лампы красным цветом. Лампу осматривал все гут .Вентилятор на лампе иобщий работают нормально.После выключения лампы работает еще некоторое время.

===========================
Zotrim Slimming Pills | Fenjal

Быстрый ответ:

Здесь расположена полная версия этой страницы.