X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Layers и FireFox
JollyRoger_hb
JollyRoger_hb
Topic Starter сообщение 19.8.2009, 17:20; Ответить: JollyRoger_hb
Сообщение #1


Hi
Имеются две картинки
image.png
---------------------------------
| |------------------------ ====|
| | ;;;;;;;;;;;;;;;;;;;;;;;;|===|
| | Transparent area;;;;;;;;|===|
| | ;;;;;;;;;;;;;;;;;;;;;;;;|===|
| | ;;;;;;;;;;;;;;;;;;;;;;;;|===|
| |_________________________|===|
|_______________________________|
и image.jpg (без прозрачности)
Следующий код

<div tyle="position: relative; height: 100%; width: 100%; z-index: 3;
visibility: visible; overflow: hidden;">
<div id="page_image" style=" position: absolute; width: 564 ;
z-index: 1; left: 0px; top: 0px; overflow: hidden; alignX: 100;"
onmouseup="alert('MouseUp Fired!');">
<img class="dragclass" id="page_imagePort-image"
src="image.jpg" width="900" height="608" style="cursor:
move;position: relative; left: 0px; top: 0px;" alt="" />
</div>
<div id="layer_s" style="position: absolute; width: 578 ; z-
index: 2; left: 0px; top: 0px; visibility: visible;">
<img id="plastic" src="Image.png" width="898"
height="566" />
</div>
</div>
в Интернет Експлорере
1. меняет форму курсора при перемещение на image.jpg (в прозрачной области layer_s).
2. выдает алерт при клике в перечисленной выше области.
В FireFox не работает. Может кто-то знает как это можно делать и для FireFox?
Спасибо
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 20.8.2009, 11:12; Ответить: Apay
Сообщение #2


что-то вы наделали... разобраться сходу трудно... например про стиль alignX я впевые слышу. кроме приведенного кода еще неплохо было бы и css, а то классы и id у объектов есть, а стилей для них не приведено.

опишите что должно получиться в итоге
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
JollyRoger_hb
JollyRoger_hb
Topic Starter сообщение 20.8.2009, 11:17; Ответить: JollyRoger_hb
Сообщение #3


(Apay @ 20.8.2009, 14:12) *
что-то вы наделали... разобраться сходу трудно... например про стиль alignX я впевые слышу. кроме приведенного кода еще неплохо было бы и css, а то классы и id у объектов есть, а стилей для них не приведено.

опишите что должно получиться в итоге


Сорри

Буду точнее
1. есть картинка image.jpg
2. и image.png которая имеет прозрачную область
(плохо что не могу приатачить приатачил на http://www.softtime.ru/forum/read.php?id_f...7419&page=1)


Эти картинки накладываются слоями причем png верхний слой таким образом чтоб jpg была видна только в прозрачной части png, Надо захватить события mouse только на видимом участке jpg чтоб движением мышки можно было позиционировать jpeg а нажатием кнопок маштабировать.
HTML на которм можно это делать дан ниже. Но это только в IE (в идеале было бы чтобы ннезавизило от браузера) но мин требуется чтоб работала и в FireFox

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<script type="text/javascript">

if (window.captureEvents){
window.addEventListener("load",correctPNG,true);
}
else {
window.attachEvent("onload", correctPNG);
}

function correctPNG(e) {

for (var i = 0; i < document.images.length; i++) {
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
var a2=img.parentNode;

if (img.align == "left") {
imgStyle = "float:left;" + imgStyle;
}
if (img.align == "right") {
imgStyle = "float:right;" + imgStyle;
}
if (img.parentNode.href) {

imgStyle = "cursor:hand;" + imgStyle;
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;

}
}

}

</script>

</head>
<body>

<br>
<table width="900" height="570">
<tr>
<td style="overflow: hidden">

<div style="position: relative; height: 100%; width: 100%; z-index: 3; visibility: visible; overflow: hidden">
<div id="page_imagePort"
style="position: absolute; width: 564px; z-index: 1; left: 0px; top: 0px; alignX: 100">
<img id="page_imagePort-image" src="image.jpg" width="900" height="608"
style="cursor: move; position: relative; left: 0px; top: 0px" alt="" onmouseup="alert('MouseUp Fired!');"/>
</div>

<div id="Layer3"
style="position: absolute; width: 578px; z-index: 2; left: 0px; top: 0px; visibility: visible; -moz-opacity: 1">
<img id="plastic" src="Image.png" width="898" height="566" /></div>
</div>
</td>
</tr>
</table>

<br>


</body>
</html>


код желательно выделять, кнопочки для этого есть
Apay
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 20.8.2009, 12:19; Ответить: Apay
Сообщение #4


если png стоит поверх jpg, то любые операции с мышкой будут перехватываться верхней картинкой (прозрачные пиксели - это тоже пиксели картинки). и если что-то сработало из-за глюка ie, то оно не обязано работать в других браузерах.

кстати, у вас ф-я correctPNG не проверяет что за браузер используется (баг)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
JollyRoger_hb
JollyRoger_hb
Topic Starter сообщение 20.8.2009, 12:27; Ответить: JollyRoger_hb
Сообщение #5


(Apay @ 20.8.2009, 15:19) *
если png стоит поверх jpg, то любые операции с мышкой будут перехватываться верхней картинкой (прозрачные пиксели - это тоже пиксели картинки). и если что-то сработало из-за глюка ie, то оно не обязано работать в других браузерах.

кстати, у вас ф-я correctPNG не проверяет что за браузер используется (баг)


Иммено с correctPNG в IE и игнорируется прозрачный слой поверх jpg. Без
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
в IE тоже как в лисе.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Apay
Apay
сообщение 20.8.2009, 18:35; Ответить: Apay
Сообщение #6


как я уже писал
(Apay @ 20.8.2009, 15:19) *
и если что-то сработало из-за глюка ie, то оно не обязано работать в других браузерах

добавлю: это не обязано работать и в последующих версиях ie (мелкомягкие обещают двигаться в сторону стандартов)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСчетчики трекеров не отображаются в Mozilla Firefox
Самый глючный браузер наверное
26 muratastana 3606 13.12.2022, 8:36
автор: muratastana
Открытая тема (нет новых ответов) Таблица растягивается в Chrome , Opera в FireFox все хорошо , помогите.
0 Hammer2900 6239 3.2.2013, 22:01
автор: -Hammer2900-
Открытая тема (нет новых ответов) калькулятор не работает в firefox
2 cro7 7015 8.7.2012, 17:19
автор: -Bonik-
Открытая тема (нет новых ответов) Нужно лого для расширения Firefox
8 Galen 4074 2.12.2011, 16:36
автор: -Galen-
Открытая тема (нет новых ответов) отступ снизу после основного блока в firefox,opera,ie8
0 Doctor_Victor 9180 16.4.2011, 10:05
автор: -Tusha-kurusha-


 



RSS Текстовая версия Сейчас: 29.3.2024, 17:13
Дизайн