Javascript-форум (https://javascript.ru/forum/)
-   Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)
-   -   Скрипт, передвигающий изображение (https://javascript.ru/forum/css-html-firefox-mizilla/3399-skript-peredvigayushhijj-izobrazhenie.html)

Kosty@n 15.04.2009 19:24
Скрипт, передвигающий изображение
 
Народ, есть скрипт, передвигающий изображение на экране


<script type="text/javascript">
<!--
var doc=document;

function pereezd(photoGo,x0,y0,x1,y1){
pgo=photoGo;
count=0; //счетчик
x=x0; // x0,y0 - "нулевые" точки; x1,y1 - конечные точки
y=y0;
vremya=10; // время задержки(в принципе скорость)
step=500; // частота шага
stepX=(x1-x0)/step;
stepY=(y1-y0)/step;
moveto();
}

function moveto(){
if(count < step){
count++ ;
x += stepX;
y += stepY;
obg=doc.getElementById(pgo).style;
obg.left=x;
obg.top=y;
setTimeout("moveto()",vremya);
}
}
//-->
</script>


вот, как это описывается на странице
<div id="photo"><a class="welcome" onmouseover="pereezd('imgZador',220,69,550,69)" onmouseout="pereezd('imgZador',550,69,220,69)">"П ри наведении на текст..."</a><br/>
<div id="imgZador"><img id = "smimg" alt="Изображение" src ='images/image1.jpg' onclick = "changeimg()"></div>
</div>


вот css
#photo{
min-width:350px;
height:280px;
background: #e1e6f8;
padding: 0px 10px 10px 10px;
}

#imgZador{
position:absolute;
}

скрипт адекватно воспринимается оперой и ие, firefox игнорирует его...
буду благодарен за любую помощь. Заранее спасибо.

Gvozd 15.04.2009 19:32
отлино работает в огнелисе.выложите полный пример

Kosty@n 15.04.2009 20:14
Вот полный пример...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Заголовок</title>

<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
<!--
var doc=document;

function pereezd(photoGo,x0,y0,x1,y1){
pgo=photoGo;
count=0; //счетчик
x=x0; // x0,y0 - "нулевые" точки; x1,y1 - конечные точки
y=y0;
vremya=10; // время задержки(в принципе скорость)
step=500; // частота шага
stepX=(x1-x0)/step;
stepY=(y1-y0)/step;
moveto();
}

function moveto(){
if(count < step){
count++ ;
x += stepX;
y += stepY;
obg=doc.getElementById(pgo).style;
obg.left=x;
obg.top=y;
setTimeout("moveto()",vremya);
}
}
//-->
</script>
</head>
<body>
<div id="body">
<div id="header">Текст</div>

<div id="menu">
<div><a href="#">Меню1</a></div>
<div><a href="#">Меню2</a></div>
</div>
<div id="info">
<div id="photo"><a class="welcome" onmouseover="pereezd('imgZador',220,69,550,69)" onmouseout="pereezd('imgZador',550,69,220,69)">"П ри наведении на текст..."</a><br/>
<div id="imgZador"><imgalt="Изображение" src ='images/image1.jpg'></div>
</div>
<p>текст</p>
</div>
</body>
</html>

вот Css

body{
margin:0;
padding:0;
background:#c2ddfe;
}

#header{
height:50px;
min-width:600px;
background:#688DCD;
text-align: center;
font-size: 25px;
}

#menu{
width:200px;
float:left;
background:#c2ddfe;
}

#menu div {
padding: 2px;
}

#photo{
min-width:350px;
height:280px;
background: #e1e6f8;
padding: 0px 10px 10px 10px;
}

#imgZador{
position:absolute;
}

#info{
font-family: Arial, Helvetica, sans-serif;
min-width:350px;
min-height:450px;
margin-left:200px;
background: #e1e6f8;
padding: 0px 10px 10px 10px;
font-size: 12px;
color: #000000;
text-align: justify;
text-indent: 1.5em;
vertical-align: top;
}

.welcome{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #3462AD;
padding-left: 10px;
padding-bottom: 9px;
}

img{
margin: 5px 5px 5px 5px;
border:0;
}

Gvozd 15.04.2009 20:33
ваш первый пример отлично работает везде
ваш второй пример не работает нигде.
разберитесь сперва сами, что и как у вас не работает

jsch 20.04.2009 13:04
если вы работаете со стилями то соблюдайте правила CSS
http://www.w3.org/TR/CSS21/visuren.html#position-props
"Value: <length> | <percentage> | auto | inherit"
http://www.w3.org/TR/CSS21/syndata.h...lue-def-length

Kosty@n 20.04.2009 17:44
Я проверял CSS на w3.org, ошибок не было, но спасибо в любом случае

Riim 20.04.2009 18:12
Цитата:
Сообщение от Kosty@n
Я проверял CSS на w3.org, ошибок не было, но спасибо в любом случае
Вот здесь:
obg.left=x;
obg.top=y;


без "px"


obg.left=x + 'px';
obg.top=y + 'px';

Kosty@n 21.04.2009 19:02
Все заработало, спасибо огромное, буду развиваться))

blase 03.05.2009 15:57
а не проще картинку в тэг marquee поместить?
<marquee><img src="picture.png"></marquee>

jsch 24.06.2009 11:28
Цитата:
Сообщение от blase (Сообщение 18088)
а не проще картинку в тэг marquee поместить?
<marquee><img src="picture.png"></marquee>
по спецификации marquee вообще не существует
и за динамику в браузере должен отвечать javascript


Часовой пояс GMT +3, время: 08:29.