ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Layers and FireFox
7 сообщений из 7, страница 1 из 1
Layers and FireFox
    #36154737
JollyRoger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JollyRoger
Участник
Возник такой вопрос
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, 14:27
| Ответить | Цитировать | Написать  
Layers and FireFox
    #36154868
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
опиши для пнг-шного слоя его прозрачную часть через полигон и тэг <area shape="poly">, по ней ловишь клики мышкой и делаешь вид что кликнули на жпег под пнг-шкой
...
Рейтинг: 0 / 0
20.08.2009, 15:15
| Ответить | Цитировать | Написать  
Layers and FireFox
    #36154981
JollyRoger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JollyRoger
Участник
зыопиши для пнг-шного слоя его прозрачную часть через полигон и тэг <area shape="poly">, по ней ловишь клики мышкой и делаешь вид что кликнули на жпег под пнг-шкой
Спасибо
Это тоже выход только у меня верхний слой прозрачная часть прямоугольник с двумя округленными вершинами... И что выходит что для IE одно для Лиса другое итд... Не очень красиво...
...
Рейтинг: 0 / 0
20.08.2009, 15:41
| Ответить | Цитировать | Написать  
Layers and FireFox
    #36155209
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
сделай для всех одинаково, не понимаю проблему
...
Рейтинг: 0 / 0
20.08.2009, 16:49
| Ответить | Цитировать | Написать  
Layers and FireFox
    #36155278
JollyRoger
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
JollyRoger
Участник
зысделай для всех одинаково, не понимаю проблему
Так в ИЕ активен нижний слой в Лисе верхний. Потом так я смогу ловить только клик а передвижение при нажатом моусе для перемещения... нет. Скорей всего надо в Fash переписать и все. Но опять привязка...
...
Рейтинг: 0 / 0
20.08.2009, 17:17
| Ответить | Цитировать | Написать  
Layers and FireFox
    #36155802
Elain
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Elain
Участник
Скругление и позиционирование решается CSS хаками для разных браузеров. Как было ранее сказано используйте карты изображений, а позиционируйте подлежащий слой. Если есть проблемы в IE6 с png , опятьже используйте хаки (Alpha) фильтр. Как-то так.
...
Рейтинг: 0 / 0
21.08.2009, 01:22
| Ответить | Цитировать | Написать  
Layers and FireFox
    #36155824
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
передвижение отлавливается событием onmousemove, временно повешенном на весь документ
...
Рейтинг: 0 / 0
21.08.2009, 02:42
| Ответить | Цитировать | Написать  
7 сообщений из 7, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Layers and FireFox
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=36155824&tid=1454357]:
 0ms
get settings:
 10ms
get forum list:
 19ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 211ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 60ms
get tp. blocked users:
 1ms
others: 247ms
total:  571ms
созд. / загр.: 571ms
x
x
Закрыть


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