Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Layers and FireFox / 7 сообщений из 7, страница 1 из 1
20.08.2009, 14:27
    #36154737
JollyRoger
JollyRoger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Layers and FireFox
Возник такой вопрос
1. есть картинка image.jpg
2. и image.png которая имеет прозрачную область
(плохо что не могу приатачить :( размер не позволяет :( приатачил на http://www.softtime.ru/forum/read.ph...e=67419&page=1)


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

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<!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>

Всем заранее спасибо
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.08.2009, 15:15
    #36154868
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Layers and FireFox
опиши для пнг-шного слоя его прозрачную часть через полигон и тэг <area shape="poly">, по ней ловишь клики мышкой и делаешь вид что кликнули на жпег под пнг-шкой
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.08.2009, 15:41
    #36154981
JollyRoger
JollyRoger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Layers and FireFox
зыопиши для пнг-шного слоя его прозрачную часть через полигон и тэг <area shape="poly">, по ней ловишь клики мышкой и делаешь вид что кликнули на жпег под пнг-шкой
Спасибо
Это тоже выход только у меня верхний слой прозрачная часть прямоугольник с двумя округленными вершинами... И что выходит что для IE одно для Лиса другое итд... Не очень красиво...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.08.2009, 16:49
    #36155209
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Layers and FireFox
сделай для всех одинаково, не понимаю проблему
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.08.2009, 17:17
    #36155278
JollyRoger
JollyRoger
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Layers and FireFox
зысделай для всех одинаково, не понимаю проблему
Так в ИЕ активен нижний слой в Лисе верхний. Потом так я смогу ловить только клик а передвижение при нажатом моусе для перемещения... нет. Скорей всего надо в Fash переписать и все. Но опять привязка...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.08.2009, 01:22
    #36155802
Elain
Elain
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Layers and FireFox
Скругление и позиционирование решается CSS хаками для разных браузеров. Как было ранее сказано используйте карты изображений, а позиционируйте подлежащий слой. Если есть проблемы в IE6 с png , опятьже используйте хаки (Alpha) фильтр. Как-то так.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.08.2009, 02:42
    #36155824
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Layers and FireFox
передвижение отлавливается событием onmousemove, временно повешенном на весь документ
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Layers and FireFox / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 361ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1454357]:
 0ms
get settings:
 7ms
get forum list:
 15ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 37ms
get topic data:
 12ms
get forum data:
 2ms
get page messages:
 52ms
get tp. blocked users:
 1ms
others: 231ms
total:  361ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]