изображения увеличить OnMouseOver

Question

Мне нужен скрипт, который будет применен к набору изображений по кругу ..

Теперь, Что требуется через скрипт, который

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

Как это сделать, используя Javascript и CSS.

Будьте конкретны в отношении атрибутов CSS и функций Javascript, пожалуйста, я почти новичок.

Помогите мне.

Thnx заранее.

Answer 1

Вы должны разбить проблему, которую вы имеете на более мелкие части, а затем задавать вопросы, когда у вас есть трудности с внедрением любого из них. Предлагаемый разрыв:

i] Позиционирование изображений: ну, для заданного набора изображений вам нужно сначала определить параметры круга, это размер в целом. Это чисто функция от нет. изображений и размера предварительного просмотра. Как только вы закончите с этим, вы можете использовать простые полярные координаты для позиционирования.

ii] Часть анимации: Лучше всего обрабатывать jQuery или script.aculo.us. Попытайтесь использовать свои собственные функции для лучшей производительности [JS-фреймворки могут стать ужасно медленными].

iii] Тонкая настройка: Ну, просто попробуйте поиграть и получить результаты.

Answer 2

Добавьте эту функцию скрипта на странице:

function actionWhenMouseOver(imgName) { 
    var img = document.getElementById(imgName); 
    img.style['width'] = "500px"; 
    img.style['height'] = "500px"; 
} 

, а затем аналогичное мероприятие для onmouseout:

function actionWhenMouseOut(imgName) { 
    var img = document.getElementById(imgName); 
    img.style['width'] = "200px"; 
    img.style['height'] = "200px"; 
} 

, а затем для каждого изображения, которое вы хотите, чтобы это произошло добавить атрибут:

<image id="image1" src="" onmouseover="actionWhenMouseOver(this.id)" onmouseout="actionWhenMouseOut(this.id)"/>