Как изменить положение элемента фона? - PullRequest
Новая
       0

Как изменить положение элемента фона?

0 голосов
/ 26 марта 2011

Что у меня сейчас, только изображение перемещается за секунду, затем возвращается в исходное положение? 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <link rel="stylesheet" type="text/css" href="styles/formstyle.css"/> 
    <script type="text/javascript">

     function northwest(image) {

       var myElement;//create reference
       myElement = document.getElementById('image').style;
       myElement.top = "50px";
       myElement.left = "50px";
     }

    function northeast(image) {
       var myElement;//create reference
       myElement = document.getElementById('image').style;
       myElement.top = "14px";
       myElement.left = "1106px";
    }

    <title>Move It!</title>

</head>

<body>  
     <div id = "para">
        Blah Blah Blah Blah:)     </div>

     <div id ="image" ></div>

    <div id = "links">
    <form action = " ">
    <p >
        <a href="javascript: northwest('image')">move background image to the northwest</a>
        <a href="javascript: northeast('image')">move background image to the northeast</a>
        <a href="javascript: southwest('image')">move background image to the southwest</a>
        <a href="javascript: southwest('image')">move background image to the southwest</a>
    </p> 
    </form>   
</div>
</body>
</html>

CSS 

#image {
        background-image:url('http://nova.umuc.edu/~ct386a28/lovej2ee/exercise4/images/kito.jpg');
        background-repeat: no-repeat;
        position: absolute; 
        top: 205px; 
        left: 456px; 
        color: inherit;
        width: 133px;
        height: 107px;
        filter:alpha(opacity=60);
        opacity:0.6;            
        } 

  #para {
        text-align: left;
        font-family: Arial;
        position: relative; 
        top: 73px; 
        left: 447px; 
        color: inherit;
        width: 132px;
        height: 341px;
        }

Ответы [ 2 ]

1 голос
/ 26 марта 2011

Другая проблема заключается в том, что вы возвращаетесь из DOM еще до его загрузки. Попробуйте поместить JavaScript в конец HTML-файла прямо перед закрывающим тегом body. Это считается лучшей практикой в ​​Google и Yahoo!

Еще одна проблема, которую я вижу, это способ получения элемента DOM.

Я бы сделал это так: 

var myElement; // creating a reference
myElement = document.getElementById("image"); // initialize the reference
1 голос
/ 26 марта 2011

Эта функция прикреплена для отправки кнопок.Таким образом, вы отправляете форму каждый раз, по существу обновляя страницу.

Рассмотрите возможность создания этих якорей или кнопок вместо отправки.Если вы хотите использовать submit, вам нужно остановить поведение по умолчанию .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...